> For the complete documentation index, see [llms.txt](https://wedocs.gitbook.io/wedocs-5.2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wedocs.gitbook.io/wedocs-5.2/weknow-client/criacao-e-edicao-de-dashboards/personalizacao-visual-do-dashboard/escala-de-cores.md).

# Escala de cores

As escalas de cores permitem padronizar a utilização de cores em diferentes componentes do Weknow Client.

Ao criar uma escala, é possível reutilizá-la em diversos dashboards e componentes, garantindo uma identidade visual consistente e facilitando a interpretação das informações.

As escalas são especialmente úteis em componentes que representam dados por meio de cores, como mapas, cartões e outros elementos visuais.

***

### Acessando o cadastro de escalas

Para acessar o cadastro de escalas de cores:

1. Clique na guia **Configurações**.
2. Clique em **Escala de cores**.

Será aberta a tela de cadastro de escalas, onde é possível criar, editar e gerenciar as escalas disponíveis no projeto.

<figure><img src="https://2272670858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe85p03cLIYvL7gAVHE90%2Fuploads%2FOy4tIimW4CTmoWeAtxlY%2Fimage.png?alt=media&amp;token=053a842c-f4ec-4426-af9d-3ab85bfd8137" alt=""><figcaption><p>Acesso à tela de cadastro.</p></figcaption></figure>

***

### Criando uma escala de cores

Para criar uma escala:

1. Clique no botão **\*** para criar um novo cadastro.
2. Informe um nome para identificar a escala.
3. Clique em Salvar, para finalizar cadastro.

<figure><img src="https://2272670858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe85p03cLIYvL7gAVHE90%2Fuploads%2FLC4eOl5bMxWCuhnx29Uv%2Fimage.png?alt=media&amp;token=d3e4a4fb-1752-4c43-a952-4f930f81bf47" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Caso a escala de cores já exista, é possível localizá-la informando seu código no campo **Código** ou utilizando o botão **...** para pesquisá-la.
{% endhint %}

***

### Adicionando cores

Após informar o nome da escala:

1. Clique no botão **+** para adicionar uma nova cor.
2. Selecione a cor desejada.
3. Clique  em **Adicionar**.
4. Clique em **OK**.

A cor será adicionada à lista de cores da escala.

Repita esse procedimento para incluir quantas cores forem necessárias.

<figure><img src="https://2272670858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe85p03cLIYvL7gAVHE90%2Fuploads%2FQHQSID5UGiykm7Bt18ba%2Fimage.png?alt=media&amp;token=114a670b-5db7-4eb1-92ed-c6ff314b21d2" alt=""><figcaption></figcaption></figure>

***

### Organizando as cores

Depois de adicionar as cores, é possível organizar sua ordem utilizando os botões de movimentação.

Também é possível:

* adicionar novas cores;
* remover a cor selecionada;
* alterar uma cor existente.

A ordem das cores será utilizada pelos componentes que fizerem referência à escala.

<figure><img src="https://2272670858-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe85p03cLIYvL7gAVHE90%2Fuploads%2F9ewzBG2skS6iwoGZEPp9%2Fimage.png?alt=media&amp;token=3782f955-cd41-4649-8b72-6122ad518cb0" alt=""><figcaption></figcaption></figure>

Após concluir a configuração, clique em **Salvar**.

A escala ficará disponível para utilização pelos componentes compatíveis.

***

### Boas práticas

Durante a criação de escalas de cores, recomenda-se:

* utilizar cores que apresentem bom contraste;
* manter um padrão visual entre dashboards relacionados;
* evitar utilizar muitas cores quando poucas forem suficientes para representar a informação;
* criar escalas reutilizáveis sempre que possível, evitando duplicações.

{% hint style="success" icon="lightbulb-on" %}
Sempre que uma mesma combinação de cores for utilizada em vários dashboards, prefira criar uma escala reutilizável em vez de configurar as cores individualmente em cada componente.
{% endhint %}