Seletor de cores online: escolha a cor e copie o código

O conta-gotas da página inicial parte de uma foto: você carrega uma imagem e captura as cores dos pixels dela. Esta página parte de um valor de cor. Use-a quando já tiver o código HEX (de um manual de marca, de um print ou de um colega) e precisar das conversões, variações, testes de acessibilidade e trechos de código que vêm com ele.

Hexadecimal de três, quatro, seis ou oito dígitos, com ou sem cerquilha; rgb() e rgba() com vírgulas ou espaços; hsl() e hsla(); e qualquer uma das 148 palavras-chave de cor do CSS, como rebeccapurple ou cornflowerblue. O que ele não conseguir interpretar deixa a cor atual como está, em vez de reiniciá-la.

HSL não é perceptualmente uniforme: duas cores com a mesma luminosidade em HSL podem parecer bem diferentes em brilho, e é por isso que paletas geradas em HSL saem irregulares. OKLCH corrige isso e tem suporte em todos os navegadores atuais. As variações, as harmonias e a cor acessível sugerida nesta página são todas calculadas em OKLCH por esse motivo.

Serve como ponto de partida. É a fórmula padrão sem calibração, a mesma que a maioria das ferramentas web usa, e serve para ter uma ideia aproximada. Não é uma conversão com gerenciamento de cor: um trabalho de impressão real precisa de um perfil ICC da máquina e do papel específicos. Trate o valor CMYK daqui como ponto de partida para entregar à gráfica, não como especificação final.

É a distância CIEDE2000 entre duas cores, uma medida de quão diferentes elas parecem. Abaixo de 1, ninguém vê a diferença. Por volta de 2, um observador atento percebe a diferença com as cores lado a lado. Acima de 10, parecem cores diferentes. Reflete o que as pessoas veem muito melhor do que comparar valores RGB.

Pela fórmula da WCAG 2.1: a luminância relativa de cada cor em luz linear e depois (mais clara + 0,05) / (mais escura + 0,05). O nível AA exige 4,5:1 para texto corrido e 3:1 para texto grande ou componentes de interface; o AAA exige 7:1 e 4,5:1. A relação ignora o matiz por completo, e é por isso que duas cores podem parecer muito diferentes e mesmo assim não passar.

Não. A página já traz os cálculos de cor em JavaScript e roda tudo no seu navegador. Não há chamada de API quando você muda a cor, nada é registrado, e a página continua funcionando sem internet depois de carregada.

Pode. Um valor de cor não é passível de direito autoral e nada aqui tem licença. As escalas, harmonias e trechos de código gerados são seus para usar em qualquer projeto. Vale notar que uma cor específica ainda pode fazer parte de um conjunto-imagem registrado quando combinada com um logotipo ou categoria de produto determinados, então copiar a cor de marca exata de um concorrente é uma questão jurídica, não técnica.

Cole o código HEX no campo do topo desta página. Ele é convertido na hora para RGB, HSL, HSV, CMYK, OKLCH e mais 28 formatos, e cada valor é copiado com um clique. Os seis dígitos do HEX são três pares, vermelho, verde e azul, que vão de 00 a FF, ou seja, de 0 a 255 em RGB.

Para texto normal, o nível AA da WCAG pede pelo menos 4,5:1 entre texto e fundo, e o nível AAA pede 7:1. Texto grande (24 px, ou cerca de 19 px em negrito) precisa de 3:1 para o AA. Coloque as duas cores no verificador de contraste desta página para ver a relação e quais níveis passam.

Use o simulador de daltonismo desta página. Ele mostra a sua cor como pessoas com protanopia, deuteranopia, tritanopia e acromatopsia a veem, e lista cores próximas que para elas pareceriam iguais. Se dois estados se diferenciam só por vermelho e verde, acrescente também uma forma, um ícone ou um rótulo.