Site avançado: Usando o seletor de cores

Use o seletor de cores para gerenciar o esquema de cores de textos, planos de fundo, sobreposições e muito mais. Você pode selecionar cores de uma paleta, inserir valores HEX ou RGB ou criar gradientes personalizados. O recurso de cores recentes ajuda a manter uma aparência consistente e profissional em todo o seu site.

Selecionando um estilo de cor

Antes de escolher uma cor, decida se o elemento deve usar uma única cor ou um gradiente.

• Cor única

  Se estiver usando uma única cor, escolha uma cor na aba "Cores recentes" ou selecione Escolher outra cor.

• Gradiente

  Os gradientes estão disponíveis para fundos de linhas, colunas e widgets, bem como para sobreposições de imagens. Para aplicar um gradiente, certifique-se de:

  • Selecione duas cores para os pontos de parada do gradiente. Você pode inverter as cores para ajustar o posicionamento dos pontos.
  • Escolha uma direção para o gradiente:
    • A opção central gera um gradiente radial.
    • A opção lateral cria um gradiente linear.

Gerenciando cores globais

As cores globais permitem definir uma paleta de cores primárias e associar essas cores a widgets. Ao atualizar uma cor global, todos os elementos associados a ela são atualizados automaticamente. Isso reduz o tempo de desenvolvimento e garante a consistência do estilo em todas as páginas. Para saber como configurar essas cores, consulte nosso artigo sobre Cores do Tema.

Economizando e utilizando cores

Cores salvas

Salve as cores e gradientes usados com frequência na lista "Cores salvas" para acesso fácil. Você pode salvar até 48 cores e gradientes na lista de cores salvas.

• Adicionar uma cor: Clique na aba Cores salvas no seletor de cores e clique em +.
• Para remover uma cor: Clique com o botão direito do mouse na cor e selecione Remover.

Cores recentes

O menu "Cores recentes" exibe uma amostra das cores usadas recentemente em seu site, permitindo que você reaplique rapidamente as tonalidades existentes.

Escolha outra cor

Selecione uma tonalidade usando a paleta de cores ou o painel de cores. Como alternativa, insira um valor HEX ou RGB na caixa de texto.

Para combinar perfeitamente uma cor de um elemento existente no site, clique no ícone de conta-gotas e selecione a cor desejada na página.

Ajustar opacidade

Use o controle deslizante de opacidade para determinar a transparência de um elemento. Ao reduzir a opacidade, a cor ou imagem de fundo atrás do elemento se misturará com ele.

Verificação do contraste do texto para acessibilidade

O verificador de contraste melhora a acessibilidade do site, indicando se o contraste entre o texto e o fundo atende aos padrões AA ou AAA. Essa ferramenta aparece automaticamente ao usar o seletor de cores para elementos de texto.

Os seguintes critérios determinam os níveis de acessibilidade:

• Nível AA: As cores têm contraste suficiente para serem legíveis para a maioria das pessoas, mas ainda podem apresentar problemas para alguns usuários.
• Nível AAA: Alto contraste que garante legibilidade para a grande maioria dos usuários.

Segue abaixo um exemplo do verificador de contraste de cores indicando que o contraste entre o texto e o fundo atende ao padrão AAA:

O verificador de contraste está desativado nos seguintes casos:

• O texto selecionado contém várias cores.
• O texto está sobre um fundo gradiente.
• O texto está inserido sobre um fundo de imagem.

Considerações

• Os gradientes não estão disponíveis para texto. Você não verá essa opção no seletor de cores para elementos de texto na guia "Design global" ou nos editores de widgets.
• Ao trabalhar com planos de fundo, alternar entre "Cor" e "Imagem" redefine a seleção anterior. Por exemplo, ao mudar de uma cor para uma imagem, as configurações de cor ou gradiente são removidas.
• Os gradientes substituem os fundos dos botões individuais. Para reverter isso, selecione novamente o fundo para os botões individuais.