Inspecionar e depurar cores em alta definição e não HD com o seletor de cores

Jecelyn Yeen

Sofia Emelianova

O Seletor de cores oferece uma GUI para mudar as declarações color e *-color e permite criar, converter e depurar cores não HD e HD com um clique.

Para saber mais sobre os novos espaços de cores, consulte o Guia de cores CSS de alta definição.

Abrir o seletor de cores e mudar as cores

Use o Seletor de cores para mudar os valores de cor com um clique:

1. Selecione um elemento no painel Elementos.

2. No painel Estilos, encontre a declaração color ou *-color que você quer mudar.

   À esquerda de cada valor color ou *-color, há um pequeno ícone quadrado com uma prévia dessa cor.

   

Para inspecionar o valor calculado, use o painel Calculado.

1. Clique no quadrado de visualização ao lado de uma cor para abrir o Seletor de cores.
2. Para mudar a cor, use qualquer um dos elementos da interface do Seletor de cores.

Elementos do seletor de cores

Confira uma descrição de cada um dos elementos da interface do Seletor de cores:

1. Tons.
2. Conta-gotas. Consulte Extrair uma cor em qualquer lugar com o conta-gotas.
3. Copiar para a área de transferência. Copie o Valor de exibição para a área de transferência.
4. Valor de exibição. Argumentos do espaço de cores escolhido.
5. Taxa de contraste. Disponível apenas para valores color. É a diferença entre color e background-color.
6. Paleta de cores. Clique em um quadrado para mudar a cor dele.
7. Limite de gama. Essa linha está disponível apenas para os novos espaços de cores e a função color(). Eles podem produzir cores HD e não HD. A linha permite distinguir entre HD e não HD.
8. Círculo de cores. Arraste esse círculo pelas tonalidades para mudar o valor de exibição.
9. Controle deslizante de matiz.
10. Controle deslizante de opacidade.
11. Seletor de valor de exibição. Escolha um espaço de cor na lista suspensa. Consulte Converter cores.
12. Expandir a taxa de contraste. Abre a seção correspondente para Corrigir contraste.

13. Seletor de paleta de cores. Clique nele para alternar entre:

    • Paleta de cores do Material Design.
    • Paleta personalizada. Para adicionar manualmente a cor atual a essa paleta, clique em .
    • Paleta de variáveis CSS. Lista todas as variáveis CSS personalizadas (acrescentadas com --) na sua página.
    • Paleta Cores da página. Para gerar essa paleta, o DevTools procura todas as cores nas suas folhas de estilo.

Escolher um espaço de cor

Para escolher um espaço de cor:

1. Clique com a tecla Shift pressionada no ícone de visualização ao lado de um valor de cor. Uma lista suspensa será aberta.

   

2. Escolha um destes espaços de cores:

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   Ou um dos novos espaços:

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   Ou um espaço definido pela função color(<color_space> X X X).

Converter cores

Quando você alterna entre espaços de cores com o Alternador de valores de exibição, o DevTools converte os valores automaticamente.

Passe o cursor sobre o ícone para ver o valor original.

O próximo vídeo mostra as conversões em ação.

Corrigir contraste

Para corrigir um problema de contraste em uma declaração color:

1. Abra o Seletor de cores ao lado do valor color.
2. Abra a seção Taxa de contraste .

3. Use a cor sugerida que esteja de acordo com uma diretriz:

   • Clique em ao lado da diretriz.
   • Na prévia Tons na parte de cima, arraste o Círculo de cores abaixo da linha correspondente.

Por padrão, o Seletor de cores sugere valores compatíveis com o APCA.

Como alternativa, você pode definir para sugerir valores compatíveis com as diretrizes da WebAIM. Em Configurações > Preferências > Elementos, desmarque a caixa de seleção Algoritmo avançado de contraste perceptivo (APCA)....

Para receber uma lista de todos os problemas de contraste de uma só vez, siga o guia Melhorar a legibilidade do seu site.

Extrair uma cor em qualquer lugar com o conta-gotas

O conta-gotas pode coletar amostras de cores da página e de qualquer lugar na tela.

Para escolher uma cor em qualquer lugar da tela:

1. Abra o Seletor de cores e faça uma destas ações:
   • Clique no botão .
   • Pressione C para ativar o Conta-gotas. Para desativar, pressione Esc.
2. Com o Conta-gotas ativo, passe o cursor sobre a cor desejada e clique para fazer uma amostra.

Neste exemplo, o Seletor de cores mostra um valor de cor atual de rgb(224 255 255 / 15%). Essa cor muda para rosa quando você clica fora do Chrome.