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

Jecelyn Yeen

Sofia Emelianova

O Color Picker oferece uma GUI para mudar declarações color e *-color e permite criar, converter e depurar cores que não são HD ou HD com um clique.

Importante:este vídeo mostra uma versão do Chrome DevTools anterior à 112. Em versões posteriores, o painel Styles é compatível com 12 novos espaços de cor e 7 novas gamas da especificação CSS Color Level 4 e da função color-mix() do CSS Color Level 5.

Para saber mais sobre os novos espaços de cor, 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 de color ou *-color, há um pequeno ícone quadrado com uma visualização dessa cor.

   

   Observação:este exemplo mostra dois círculos cruzados ao lado da função color-mix(): . A interseção é uma visualização da cor resultante.

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

Veja uma descrição de cada elemento da interface do Color Picker:

1. Sombras.
2. Conta-gotas. Consulte Amostra de 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 cor 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 do Gamut. Essa linha está disponível apenas para os novos espaços de cor e a função color(). Eles podem produzir cores HD e não HD. A linha permite distinguir entre alta e não HD.
8. Círculo de cor. Arraste este círculo pelas sombras para alterar 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.
    Observação:como alternativa, para abrir o menu suspenso diretamente, mantenha pressionada a tecla Shift e clique no ícone de visualização da cor ao lado do valor da cor.
12. Expanda a taxa de contraste. Abre a seção correspondente que permite a opção Fixar contraste.

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

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

Escolher um espaço de cores

Para escolher um espaço de cores:

1. Pressione Shift e clique no ícone de visualização ao lado de um valor de cor. Uma lista suspensa será aberta.

   Observação:também é possível clicar no seletor de valor de exibição no seletor de cores.

   

2. Escolha um dos seguintes espaços de cor:

   • #<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 cor com o seletor "Valor de exibição", o DevTools converte os valores automaticamente.

Cuidado:ao converter de HD para não HD, o DevTools recorta as gamas para caber no espaço e marca os valores recortados com os ícones de aviso .

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

Importante:o seletor de cores calcula as taxas de contraste apenas para os valores color e em relação aos respectivos valores de background-color. Portanto, apenas os valores color têm seções de Taxa de contraste.

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

1. Abra o seletor de cores ao lado do valor color.
2. Expanda a seção Contrast rates .

3. Use a cor sugerida que obedeça às diretrizes:

   • Clique no ao lado da diretriz.
   • Na visualização de Sombras na parte de cima, arraste o Círculo de cores abaixo da linha correspondente.

Observação:por padrão, o seletor de cores sugere que você siga as diretrizes do WebAIM. Outra opção é sugerir valores compatíveis com APCA: Em Configurações > Experimentos, marque Ativar novo algoritmo de contraste perceptual avançado (APCA)...

Para ver uma lista de todos os problemas de contraste de uma só vez, siga o guia Tornar seu site mais legível.

Usar o conta-gotas para testar uma cor em qualquer lugar

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

Para escolher uma cor em qualquer lugar da tela:

1. Abra o Seletor de cores e siga um destes procedimentos:
   • 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 de destino e clique para criar uma amostra.

Observação:o Conta-gotas faz amostras de cores apenas no espaço de cores sRGB. Quando você faz uma amostragem fora desse espaço, o conta-gotas recorta a cor na cor mais próxima. Consulte Converter cores.

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.