Seletor de cores

Digite ou escolha uma cor, veja o valor em doze notações, monte uma harmonia de cores e uma escala 50-900 e confira o contraste pelos critérios da WCAG.

Como Copiar cor

1
Escolha uma cor ou cole um valor
Digite qualquer notação que um navegador entenda: um código hex, rgb(), hsl(), oklch() e até um nome de cor CSS. O campo de texto é o controle principal aqui; a amostra e o conta-gotas são atalhos para o mesmo valor.
2
Copie em qualquer formato
As doze notações aparecem de uma vez, cada uma com um botão de copiar ao lado. Nada fica escondido em um menu suspenso, então converter HEX para RGB leva um clique, e não três.
3
Exporte a paleta em CSS ou JSON
A cor base, a escala de dez tons dela e as cores extraídas de uma imagem saem juntas como propriedades personalizadas CSS, um trecho de tema do Tailwind, variáveis SCSS ou JSON simples.

Por que o espaço de trabalho é o OKLCH

O HSL tem uma vantagem prática e um defeito sério. A vantagem é que matiz, saturação e luminosidade são números separados, fáceis de entender. O defeito é que a luminosidade dele não é a que você enxerga: hsl(60 100% 50%) é um amarelo bem claro, e hsl(240 100% 50%) é um azul escuro, embora os dois digam cinquenta por cento. Por isso, girar o matiz no HSL gera harmonias em que uma amostra salta aos olhos e outra some. O OKLCH resolve isso. A luminosidade dele acompanha a percepção humana, então mudar só o matiz mantém de fato o brilho estável. Cada harmonia e cada escala desta página é calculada nesse espaço e depois convertida de volta para sRGB na saída.

O que os números de contraste significam

A WCAG expressa o contraste como a razão entre a luminância relativa de duas cores, de 1:1 para cores idênticas a 21:1 para preto sobre branco. O texto corrido precisa de 4,5:1 para passar no nível AA. Texto grande (a partir de 18,66 px, ou 14 px em negrito) e elementos de interface, como ícones e bordas de campos, precisam de 3:1. O nível AAA pede 7:1 para o texto corrido. Não são preferências de estilo: são a diferença entre uma página legível sob o sol ou com a visão imperfeita e uma página ilegível. Quando um par não alcança o mínimo, o botão ao lado do resultado reduz aos poucos a luminosidade no OKLCH até ele passar, e você recebe a versão aprovada mais próxima da sua própria cor, e não uma cor diferente.

Paletas extraídas de uma foto

Adicione uma imagem, e as cores dominantes dela são extraídas por corte mediano: a nuvem de pixels é dividida várias vezes pelo canal que mais varia, e a média de cada caixa resultante vira uma amostra. Depois, as cores quase repetidas são descartadas com o CIEDE2000, a métrica de distância perceptual, e você recebe seis cores distintas, e não seis tons do mesmo céu. A imagem é reduzida antes para 400 pixels e nunca sai do seu navegador.

Cores e imagens ficam nesta aba

Cada conversão é uma conta feita em JavaScript no seu próprio dispositivo; não há nenhuma chamada de API por trás de nada disso. Uma imagem que você solta aqui para gerar uma paleta é decodificada, reduzida e amostrada localmente, e nunca é enviada nem armazenada. Feche a aba e nada fica.

Perguntas frequentes

Por que o OKLCH é melhor que o HSL?

Porque a luminosidade dele corresponde ao que o seu olho percebe. No HSL, duas cores com o mesmo valor de luminosidade podem parecer muito diferentes em brilho, o que estraga harmonias e escalas tonais. O OKLCH é perceptualmente uniforme por construção, então passos iguais parecem iguais.

Por que o valor CMYK é só uma referência?

A separação CMYK real depende da impressora, da tinta e do papel, tudo descrito por um perfil ICC. O valor daqui vem da conversão aritmética simples, que serve para ter uma ideia aproximada, mas não para uma tiragem. Peça à sua gráfica os valores corrigidos pelo perfil.

Como ler uma razão de contraste como 4,5:1?

Ela compara a luminância de duas cores. 4,5:1 é o mínimo do nível AA da WCAG para texto corrido, 3:1 vale para texto grande e elementos de interface, e 7:1 é o nível AAA. Quanto maior, mais legível; 21:1 é preto sobre branco.

O conta-gotas funciona no Safari e no Firefox?

Ainda não. A API EyeDropper é um recurso do Chromium. Nos outros navegadores, o botão avisa isso e indica o caminho pela imagem: adicione uma foto e pegue a cor da paleta que ela gera.

Como extrair uma paleta de cores de uma foto?

Abra as configurações, escolha uma imagem e defina quantas cores você quer, de três a doze. As cores dominantes aparecem como amostras que você pode copiar uma a uma ou exportar junto com todo o resto.

Minha imagem é enviada para algum lugar?

Não. Ela é decodificada pelo seu navegador, desenhada em um canvas de 400 pixels e amostrada ali. Nenhuma parte dela é transmitida, e o arquivo nunca é gravado no armazenamento.

Para que serve a escala 50-900?

É a rampa tonal que os sistemas de design e o Tailwind esperam: dez tons de um mesmo matiz, de quase branco a quase preto. O croma é reduzido aos poucos nas duas pontas, porque a saturação total com luminosidade muito alta ou muito baixa fica fora do sRGB e volta com aspecto sujo.