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

Jecelyn Yeen

Twitter GitHub Página inicial

Sofia Emelianova

GitHub

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

Importante:este vídeo mostra a versão do Chrome DevTools anterior à 112. Nas versões mais recentes, o painel Styles oferece suporte a 12 novos espaços de cor e 7 novas gamas da especificação CSS Color Level 4, e à 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.

Abra o Seletor de Cores e altere 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:o exemplo mostra dois círculos cruzados ao lado da função color-mix(): . A interseção é uma prévia 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 alterar a cor, use qualquer um dos elementos da interface do seletor de cores.

Elementos do seletor de cores

Veja uma descrição de cada um dos elementos da interface do seletor de cores:

1. Sombras.
2. Conta-gotas. Consulte Testar 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 de gama. 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 definição e não alta definição.
8. Círculo de cores. Arraste este círculo pelas abas 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.
    Observação:como alternativa, para abrir o menu suspenso diretamente, mantenha a tecla Shift pressionada e clique no ícone de visualização de cores ao lado do valor da cor.
12. Expandir taxa de contraste. Abre a seção correspondente que permite Corrigir contraste.

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

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

Escolher um espaço de cor

Para escolher um espaço de cor:

1. Mantenha a tecla Shift pressionada 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 os espaços de cor com o seletor de valor de exibição, o DevTools converte os valores automaticamente.

Cuidado:ao converter de HD para não HD, o DevTools recorta a gama para se ajustar ao espaço e marca valores cortados com í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 proporções de contraste apenas para os valores color e em relação aos respectivos valores background-color. Portanto, apenas os valores color têm as seções 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 Taxa de contraste .

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

   • Clique em ao lado da diretriz.
   • Na visualização Tons 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. Como alternativa, você pode definir a opção para sugerir valores compatíveis com APCA: em Configurações > Experimentos, marque Ativar novo algoritmo avançado de contraste perceptível (APCA)...

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

Use o Conta-gotas para criar amostras de uma cor em qualquer lugar

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

Para escolher uma cor em qualquer lugar da tela:

1. Abra o Color Picker 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 mostrar uma amostra.

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

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