Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Escolhe uma cor em um campo OKLCH: a luminosidade corre para cima, o croma corre de lado, e o matiz é a faixa abaixo. Esse layout é o sentido todo — no quadrado HSV familiar, “a mesma cor, um pouco menos saturada” é um movimento diagonal que ninguém encontra, e aqui é um movimento horizontal. Ele também pega uma cor da tela onde o navegador permite, e de uma imagem que você solta, o que funciona em todo lugar.
Escolher
A luminosidade sobe pelo campo, o croma o atravessa e o matiz é a faixa de baixo. O hachurado quer dizer que a cor existe, mas o sRGB não consegue mostrar.
Esta cor
L
62,3
C
0,1880
H
259,8°
Notações
- hex
#3b82f6 - rgb
rgb(59 130 246) - hsl
hsl(217.22 91.22% 59.8%) - hwb
hwb(217.22 23.14% 3.53%) - lab
lab(54.619% 8.763 -65.791) - lch
lch(54.619% 66.372 277.59) - oklab
oklab(62.308% -0.0332 -0.1851) - oklch
oklch(62.308% 0.188 259.81) - named
#3b82f6
Escolher de uma imagem
Solte uma captura de tela ou uma foto
Clique em qualquer ponto para pegar aquele pixel.
Tudo fica nesta aba. Útil quando a API EyeDropper não existe, que é o caso da maioria dos navegadores.
Precisa converter entre notações em lote? O conversor de cores faz isso. Quer montar uma paleta inteira a partir desta cor? O gerador de paletas gira o matiz em OKLCH.
Como usar
Defina o matiz primeiro, depois mova-se no campo
A faixa escolhe o matiz; o campo então mostra toda luminosidade e croma disponíveis naquele matiz. Fazer na ordem contrária significa perseguir a cor, porque mudar o matiz redesenha o campo inteiro.
Ou pegue uma da tela
“Pegar da tela” abre o conta-gotas do navegador e lê qualquer pixel da área de trabalho, inclusive de outros aplicativos. Ele só existe em navegadores baseados em Chromium; nos outros, o botão diz isso em vez de falhar em silêncio.
Ou solte uma captura de tela e clique nela
O painel de imagem na parte de baixo aceita qualquer figura e devolve o pixel exato em que você clica. Este é o caminho que funciona em todo navegador, e é o que se deve usar quando o conta-gotas não existe.
Copie na notação que o código quer
Toda notação é listada de uma vez, com o próprio botão de copiar. Pegue o hexadecimal para uma folha de estilo que precisa funcionar em todo lugar, e o valor `oklch()` quando a cor importa mais do que a compatibilidade — o hexadecimal é uma aproximação mapeada sempre que a amostra está fora do sRGB.
Salve as que está comparando
“Salvar esta” guarda até doze amostras em uma fileira à qual você pode voltar clicando. Elas vivem só na página — um recarregamento as apaga.
Perguntas frequentes
O botão do conta-gotas de tela não faz nada de útil. Por quê?
Ele precisa da EyeDropper API, que só os navegadores baseados em Chromium lançaram — Chrome, Edge, Arc, Brave. Firefox e Safari não lançaram, e não há polyfill para ela, porque ler pixels arbitrários da tela é um privilégio que a página não pode conceder a si mesma. Carregue uma captura de tela no painel de imagem em vez disso; ela dá a mesma resposta.
Por que uma parte grande do campo está hachurada?
Essas combinações de luminosidade e croma existem em OKLCH, mas o sRGB não consegue exibi-las naquele matiz. É uma propriedade real do espaço, não um bug, então a região é hachurada em vez de pintada com a cor mais próxima que ele consegue mostrar — uma parede lisa de cor ali seria uma mentira sobre o que a sua tela consegue fazer. “Trazer para o sRGB” reduz o croma até a cor caber, mantendo luminosidade e matiz.
O conta-gotas mantém a precisão de gamut amplo?
Não. A API devolve uma string hexadecimal sRGB, então uma cor Display P3 na tela já foi convertida quando esta página a vê. Para uma cor P3 cujo valor você conhece, digite a forma `oklch()` ou `color(display-p3 ...)` no conversor de cores em vez disso.
A imagem que eu solto é enviada para algum lugar?
Não. Ela é decodificada em um canvas nesta aba e lida pixel a pixel ali. Nada sai do navegador, e fechar a aba a descarta.
Pode receber de
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.
Gerador de paleta de cores
Palette Generator
Monta uma paleta harmoniosa a partir de uma cor base usando regras complementar, triádica e análoga.
Gerador de degradê CSS
CSS Gradient Builder
Monta degradês lineares, radiais e cônicos com paradas arrastáveis e gera o CSS, em sRGB ou OKLCH.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Escala de tons e matizes
Tint & Shade Scale
Gera uma escala de luminosidade 50–950 a partir de uma cor com passos perceptualmente uniformes, pronta como tokens de design.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.
Extrair paleta de cores
Palette Extractor
Extrai uma paleta de N cores de uma imagem e exporta como hex, variáveis CSS ou amostra ASE.
Gerador de paleta de cores
Palette Generator
Monta uma paleta harmoniosa a partir de uma cor base usando regras complementar, triádica e análoga.
Calculadora de proporção
Aspect Ratio Calculator
Calcula a dimensão que falta para uma proporção alvo e lista os tamanhos padrão que ela corresponde.