Seletor de cores: HEX, RGB, HSL e CMYK
Escolha qualquer cor e copie o código em todos os formatos comuns. Pegue cores de uma foto ou direto da tela, ache tons mais claros e mais escuros e confira se o texto vai ficar legível.
----Tons, do claro ao escuro
Cores que combinam: complementar, complementar dividida, análogas, tríade
- Sobre branco
- -
- Sobre preto
- -
Escolha uma cor para começar.
Como usar o seletor de cores
Clique na caixa de cor para abrir o seletor do seu aparelho, ou digite um código HEX como #1E90FF na caixa ao lado. A amostra grande se atualiza e todos os códigos abaixo mudam junto. Toque em Copiar ao lado de qualquer formato para copiar, pronto para colar no CSS, num app de design ou num documento.
Para tirar uma cor de uma foto ou logo, escolha Pegar de uma imagem, carregue o arquivo e toque no ponto que quiser. A imagem fica no seu aparelho. No Chrome e no Edge do computador você também tem Pegar da tela, um conta-gotas que pega qualquer pixel da tela, até fora do navegador.
HEX, RGB, HSL e CMYK explicados
- HEX é o código de seis dígitos usado na web, como #FF5733. Cada par de dígitos é a quantidade de vermelho, verde e azul, de 00 a FF.
- RGB dá essas mesmas três quantidades como números de 0 a 255. As telas formam cada cor misturando luz vermelha, verde e azul.
- HSL descreve a cor pelo matiz (a posição na roda de cores, de 0 a 360°), a saturação (o quanto é viva) e a luminosidade. É o formato mais fácil para clarear, escurecer ou suavizar uma cor na mão.
- CMYK é a mistura de tinta ciano, magenta, amarela e preta usada na impressão. Os valores aqui são uma conversão direta; as gráficas usam perfis de cor, então peça uma prova se a cor exata importar.
Tons e cores que combinam
A fileira de Tons mantém o matiz e a saturação e varia a luminosidade do muito claro ao muito escuro, ótimo para estados de hover, bordas e fundos da mesma família. A fileira de Cores que combinam usa as regras da roda de cores: a complementar oposta à sua, as duas complementares divididas ao lado, duas vizinhas análogas e duas cores em tríade a um terço da volta. Toque em qualquer amostra para torná-la a cor principal.
Contraste e legibilidade
As caixas de contraste mostram o quanto sua cor é legível como texto sobre branco e sobre preto, pela razão de contraste WCAG. Uma razão de 4,5:1 passa no nível AA para texto normal, 3:1 passa no AA para texto grande como títulos e 7:1 passa no nível mais rígido, AAA. Se a cor da sua marca reprovar sobre branco, use um dos tons mais escuros para o texto e deixe a original para botões e detalhes.
Cores em telas diferentes
O mesmo código pode parecer um pouco diferente de uma tela para outra, porque brilho, gama de cores e calibração mudam. Celulares com tela OLED de gama ampla costumam mostrar cores mais vivas que um monitor de escritório. Se a fidelidade de cor importar, confira o design em mais de um aparelho.
Seletor de cores: perguntas frequentes
Como acho o código HEX de uma cor?
Escolha a cor na caixa de cor, ou carregue uma imagem e toque na cor que quiser. O código HEX aparece no topo da lista, pronto para copiar.
Posso pegar uma cor da tela?
Sim, no Chrome e no Edge no Windows, Mac e Linux. Toque em Pegar da tela e clique em qualquer pixel. Outros navegadores ainda não suportam o conta-gotas; use Pegar de uma imagem.
Como converto HEX para RGB?
Digite ou cole o código HEX na caixa. Os valores RGB, HSL e CMYK se atualizam na hora.
A imagem que eu carrego fica privada?
Sim. A imagem é lida no seu navegador e nunca é enviada.
Que contraste o texto precisa ter?
Pelo menos 4,5:1 para texto normal e 3:1 para texto grande para cumprir o padrão WCAG AA.
Os valores CMYK são exatos para impressão?
São uma conversão direta. As gráficas ajustam conforme o papel e a tinta com perfis de cor, então peça uma prova quando a cor exata importar.