Seletor de cores

Como usar o seletor de cores

1. Clica na amostra por baixo de Escolher uma cor para abrir o seletor de cores do teu navegador e escolhe uma cor. Também podes escrever ou colar um valor no campo Código da cor: um código HEX como #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) ou um nome CSS como tomato.
2. A pré-visualização grande atualiza-se de imediato, com o código HEX escrito a preto ou a branco, consoante o que se lê melhor nesse fundo.
3. Em Códigos de cor, copia o formato de que precisas com o botão Copiar ao lado: HEX, RGB, HSL, HSV ou CMYK.
4. Clica em Cor aleatória quando procuras inspiração, ou em Captar do ecrã (nos navegadores que o suportam, como o Chrome e o Edge) para recolher a cor de qualquer píxel do ecrã, incluindo de outras janelas.

Tudo acontece no teu navegador: nenhuma cor ou imagem é enviada para lado nenhum.

O que significa cada código de cor

• HEX é a notação hexadecimal de seis dígitos usada em HTML e CSS. Cada par de dígitos é um canal (vermelho, verde, azul) de 00 a FF, por isso #1E90FF significa vermelho 30, verde 144, azul 255.
• RGB indica os mesmos três canais em números decimais de 0 a 255. É o que a maioria dos programas de design e das bibliotecas de programação espera.
• HSL descreve uma cor pela tonalidade (um ângulo de 0° a 360° no círculo cromático), saturação e luminosidade. Dá jeito para tornar uma cor mais clara ou mais escura alterando um único número.
• HSV (também chamado HSB) usa tonalidade, saturação e valor (brilho). É o modelo por trás dos quadrados de cor do Photoshop, do Figma e de muitos outros editores.
• CMYK exprime a cor em percentagens de tinta ciano, magenta, amarela e preta.

Sobre os valores CMYK

Os códigos CMYK resultam de uma conversão simples: K = 1 − max(R, G, B), depois C = (1 − R − K) / (1 − K), e o mesmo para M e Y. É a fórmula clássica dos manuais, mas não usa nenhum perfil ICC. A impressão real depende da máquina, do papel e das tintas, por isso a gráfica vai converter as tuas cores com o seu próprio perfil e o resultado pode ser diferente. Usa estes números como ponto de partida, não como prova de impressão.

Ler os rácios de contraste

Por baixo do código HEX, a pré-visualização mostra o Contraste sobre branco e o Contraste sobre preto, calculados com a fórmula de luminância relativa das WCAG 2. É preciso um rácio de 4,5:1 ou mais para texto corrido normal no nível AA, e de 3:1 para texto grande e elementos de interface. Se a tua cor só chega a 3:1 sobre branco, guarda-a para títulos grandes ou ícones e usa um tom mais escuro para o texto.

Dicas

• Podes colar códigos hex sem o #: 1e90ff também funciona, tal como as formas curtas, por exemplo f60.
• São aceites valores com transparência, como rgb(0 0 0 / 50%); o seletor mostra a cor opaca.
• A janela de cores do próprio navegador varia de sistema para sistema. Se precisares de um valor exato, escrevê-lo no campo Código da cor é sempre preciso.