O Seletor de cores é a função do seu editor que permite gerenciar o esquema de cores do texto, plano de fundo, sobreposições e muito mais. Você pode escolher uma cor na paleta de cores, inserir um valor HEX ou RGB ou até mesmo criar um gradiente personalizado. O recurso de cores recentes ajudará você a manter seu esquema de cores consistente e a manter uma aparência profissional em seu site.
Antes de escolher o esquema de cores, você precisa escolher onde deseja usar uma única cor ou um gradiente.
Se você estiver usando a opção de cor única, poderá escolher uma cor na guia Cores recentes ou pular para Escolher outra cor.
O fundo gradiente será uma opção disponível para fundos de linhas, colunas e widgets e sobreposições de imagens. Para aplicar um gradiente, com o seletor de cores aberto, clique no menu suspenso acima da paleta de cores (pode ser Cor), selecione Degradê e certifique-se de:
-
Escolher 2 cores das paradas do gradiente
-
Você pode reverter as cores para ajustar o posicionamento das paradas
-
-
Escolher a direção do gradiente
-
A opção central gerará o gradiente radial
-
As opções laterais criarão um gradiente linear
-
Nota
Os gradientes não podem ser salvos nas cores do tema.
As cores do tema permitem que você defina uma paleta de cores e vincule as cores individuais a qualquer ou a todos os widgets com configurações de cores. A cor de qualquer elemento vinculado às cores do tema será atualizada automaticamente quando a cor vinculada for alterada nas configurações de cores do tema. Isso permite que você faça alterações de cor rapidamente, o que ajuda a reduzir o tempo de design e garante que o estilo do seu site seja consistente em todas as páginas.
Para saber como configurar as cores do tema, consulte Cores do tema.
Salve cores usadas com frequência em seu site adicionando-as à lista Cores salvas no seletor de cores.
Para adicionar uma cor às cores salvas, clique na guia Cores salvas no seletor de cores e clique no ícone +. Para remover uma cor da lista Cores salvas, clique com o botão direito do mouse na cor e selecione Remover.
Você pode salvar até 48 cores e gradientes na lista Cores salvas.
Selecione o matiz de uma cor usando a paleta de cores à direita ou o painel de cores. Como alternativa, você pode inserir o valor HEX ou RGB da cor desejada na caixa de texto abaixo do gradiente de cores vertical.
Para combinar perfeitamente uma cor de qualquer lugar em seu site (imagens, textos, etc.), clique no conta-gotas () tool e selecione a cor do site que deseja usar. Não é necessário perder tempo tentando descobrir o nome ou o valor exatos de uma cor.
O verificador de contraste das cores do texto ajuda a melhorar a acessibilidade dos sites ao indicar se o contraste entre o texto e o plano de fundo atende ao padrão AA ou AAA*. O verificador de contraste aparece no seletor de cores sempre que o seletor de cores está sendo usado para texto.
A seguir estão os critérios que determinam se o padrão AA ou AAA é atendido:
Tipo de texto |
Padrões* |
Tamanho da Fonte |
Relação mínima de contraste |
---|---|---|---|
Texto normal |
AAA |
Menos de 18 pontos |
7:1 |
Texto grande |
AAA |
18 ou 14 pontos em negrito |
4. 5:1 |
Texto normal |
AA |
Menos de 18 pontos |
4. 5:1 |
Texto grande |
AA |
18 pontos em negrito ou 24 pontos e maiores |
3:1 |
*Nos padrões de acessibilidade, " AA " e " AAA " representam diferentes níveis de requisitos de contraste de cores. O nível AA significa que suas cores têm contraste suficiente para serem legíveis, mas ainda podem apresentar problemas para alguns usuários. O nível AAA significa que você tem um alto contraste que deve ser legível para a grande maioria dos usuários.
Veja a seguir um exemplo do verificador de cores de contraste indicando que o contraste do texto e do plano de fundo atende ao padrão AAA.
O verificador de contraste será desativado nas seguintes circunstâncias:
-
Se o texto selecionado tiver várias cores. Por exemplo, se várias palavras no texto estiverem em azul e várias outras em rosa.
-
Se o texto estiver em um plano de fundo gradiente.
-
Se o texto estiver em um plano de fundo de imagem.
-
O gradiente não está disponível para elementos de texto, portanto, o senhor não o verá em um Color Picker para elementos de texto no editor de design widget da guia Theme.
-
Ao trabalhar com planos de fundo, alternar entre Cor e Imagem definirá as configurações da opção anterior como nulas. Por exemplo, se você estava usando uma cor e alterou a configuração para Imagem, todas as configurações de cor ou gradiente serão removidas.
-
Os gradientes substituem o plano de fundo do botão individual. Para retornar à configuração anterior, selecione novamente o plano de fundo dos botões individuais.