# Tipos de Cores

Valores de cor podem ser passados como propriedades de diferentes componentes, como [Materials](https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/essenciais-de-conteudo-3d/materials), [Text](https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/essenciais-de-conteudo-3d/text) ou diferentes propriedades de [UI entities](https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/ui-2d/onscreen-ui). Valores de cor podem ser do tipo `Color3` ou `Color4`.

`Color3` contém três propriedades, *red*, *green*, e *blue*. `Color4` possui essas mesmas três mais `alpha`, para valores de transparência.

## Definir uma cor

Você pode criar uma cor usando a `Color3.create()` ou o `Color4.create()` funções.

```ts
// Cor vermelha
const red3 = Color3.create(1, 0, 0)
const red4 = Color4.create(1, 0, 0, 1)
```

Você também pode criar certas cores predefinidas que fazem parte dos `Color3` e `Color4` namespaces.

```ts
const red = Color3.Red()
const blue = Color3.Blue()
const black = Color3.Black()
```

{% hint style="info" %}
**💡 Tip**: Escreva `Color3.` ou `Color4.` e o Visual Studio deve sugerir todos os valores possíveis em um menu inteligente.
{% endhint %}

Você também pode escolher uma cor aleatória usando a seguinte função:

```ts
const randomColor = Color3.Random()
```

Se você preferir descrever uma cor em hexadecimal, use `Color3.fromHexString()`.

```ts
const red = Color3.fromHexString('FD350A')
const blue = Color3.fromHexString('0A0CFD')
```

Qualquer objeto que inclua valores numéricos para `r`, `g`, e `b` pode ser interpretado como um `Color3` valor. Da mesma forma, qualquer objeto que inclua essas propriedades mais um `a` valor pode ser interpretado como um `Color4` valor. Isso permite que você também use a seguinte sintaxe:

```ts
// Cor vermelha
const red3 = { r: 1, g: 0, b: 0 }
const red4 = { r: 1, g: 0, b: 0, a: 1 }
```

O exemplo a seguir usa uma propriedade de cor como parte de um `TextShape` component, para definir a cor do texto.

```ts
const myEntity = engine.addEntity()

Transform.create(myEntity, {
  position: Vector3.create(4, 1, 4),
})

TextShape.create(myEntity, {
  text: 'this text is RED',
  textColor: Color4.create(1, 0, 0, 1),
})
```

{% hint style="warning" %}
**📔 Nota**: `Color3` e `Color4` devem ser importados via

> `import { Color3, Color4 } from "@dcl/sdk/math"`

Veja [Imports](https://docs.decentraland.org/creator/content-creator-pt/primeiros-passos/coding-scenes#imports) para como lidar com estes facilmente.
{% endhint %}

## Transparência

Use o *alpha* propriedade de `Color4` para tornar uma cor translúcida.

Se o alpha for 1, a cor será completamente opaca; se for 0 será completamente invisível. Qualquer valor intermediário resulta em um tom parcialmente transparente.

```ts
// Completamente opaco
const opaque = Color4.create(1, 1, 1, 1)

// Metade do caminho
const half = Color4.create(1, 1, 1, 0.5)

// Quase invisível
const half = Color4.create(1, 1, 1, 0.1)
```

## Lerp

Use o `Color3.lerp()` ou o `Color4.lerp()` função para definir uma cor que esteja entre duas outras cores. Essas funções funcionam de forma semelhante ao `Vector3.lerp()` função.

Ambos `Color3.lerp()` ou o `Color4.lerp()` aceitam os seguintes argumentos:

* `left`: A primeira cor a usar como referência
* `right`: A segunda cor a usar como referência
* `amount`: Um número de 0 a 1 para definir quanto da *left* cor usar na mistura. Quanto mais próximo de 0, mais próximo da *left* cor.

```ts
const orange = Color3.lerp(Color3.Red(), Color3.Yellow(), 0.3)
```

Você pode usar um sistema para alterar gradualmente o `amount` parâmetro, para criar uma transição suave.

```ts
// Systems
var pulseState: number = 0
const color1 = Color4.Red()
const color2 = Color4.Yellow()

export function PulseSystem(dt: number) {
  pulseState += dt
  const entitiesWithMaterial = engine.getEntitiesWith(Material)

  // iterar sobre as entidades do grupo
  for (const [entity] of entitiesWithMaterial) {
    const material = Material.getMutable(entity)
    material.albedoColor = Color4.lerp(color1, color2, Math.sin(pulseState))
  }
}

engine.addSystem(PulseSystem)
```