# Color

O componente do tipo <mark style="color:blue;">color</mark> deve ser utilizado quando o criador do tema disponibiliza ao usuário a seleção de uma cor. Abaixo é possível visualizar a aparência deste campo.

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FBZM6aSjQ82bW6T77qABM%2Fimage%20(1).png?alt=media&#x26;token=1eb90ba5-f268-4306-8119-d2e175dd9e64" alt=""><figcaption><p><strong>Exibição do campo color</strong></p></figcaption></figure>

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FBjb94FB2Au1iQ7f3m2qf%2Fimage.png?alt=media&#x26;token=240aa0fe-be05-4f3f-b023-04a0e22cc73e" alt=""><figcaption><p><strong>Exibição do campo color com a validação realizada</strong></p></figcaption></figure>

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FJ1ciF2LY04QHtGKJESg1%2Fimage%20(2).png?alt=media&#x26;token=25358151-9953-4e43-87a2-c26739e50fe1" alt=""><figcaption><p><strong>Exibição do campo color em funcionamento</strong></p></figcaption></figure>

**Estrutura padrão do campo:**

{% code overflow="wrap" %}

```json
{
    "label": "Título do campo color", 
    "type": "color", 
    "description": "Descrição do campo",
    "placeholder": "Descrição do Hex #ffffff",
    "field": "nome_do_campo_color",
    "validation": "required:true"
}
```

{% endcode %}

<table><thead><tr><th width="215">Atributo</th><th>Descrição</th></tr></thead><tbody><tr><td>label</td><td>Título do campo</td></tr><tr><td>type</td><td>Tipo do campo</td></tr><tr><td>description</td><td>Descrição do campo <br>Caso não houver, deixar vazio</td></tr><tr><td>placeholder</td><td>Texto exemplificando como deve ser o texto inserido<br>Caso não houver, deixar vazio</td></tr><tr><td>field</td><td>Campo utilizado no tema para exibir o item desejado. <br>Esse nome deve ser exatamente igual ao campo criado no tema</td></tr><tr><td>validation</td><td>Validações do campo <br>Caso não houver campo obrigatório, deixar como "validation": "required:false"</td></tr></tbody></table>