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.
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:
- Selecione um elemento no painel Elementos.
No painel Estilos, encontre a declaração
colorou*-colorque você quer mudar.À esquerda de cada valor de
colorou*-color, há um pequeno ícone quadrado com uma visualização dessa cor.
Para inspecionar o valor calculado, use o painel Calculado.
- Clique no quadrado de visualização ao lado de uma cor para abrir o Seletor de cores.
- 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:
- Sombras.
- Conta-gotas. Consulte Amostra de uma cor em qualquer lugar com o conta-gotas.
- Copiar para a área de transferência. Copie o Valor de exibição para a área de transferência.
- Valor de exibição. Argumentos do espaço de cor escolhido.
- Taxa de contraste. Disponível apenas para valores
color. É a diferença entrecolorebackground-color. - Paleta de cores. Clique em um quadrado para mudar a cor dele.
- 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. - Círculo de cor. Arraste este círculo pelas sombras para alterar o valor de exibição.
- Controle deslizante de matiz.
- Controle deslizante de opacidade.
- Seletor de valor de exibição. Escolha um espaço de cor na lista suspensa. Consulte Converter cores.
- Expanda a taxa de contraste. Abre a seção correspondente que permite a opção Fixar contraste.
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:
Pressione Shift e clique no ícone de visualização ao lado de um valor de cor. Uma lista suspensa será aberta.
Escolha um dos seguintes espaços de cor:
Ou um dos novos espaços:
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.
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:
- Abra o seletor de cores ao lado do valor
color. - Expanda a seção Contrast rates
. 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.
- Clique no
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:
- 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.
- Clique no botão
- Com o conta-gotas ativo, passe o cursor sobre a cor de destino e clique para criar 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.