Como usar o seletor de cores hex
- Clique na amostra grande para abrir o seletor de cores do seu sistema ou digite um código hex como
#1E90FFou um nome comotomato. - Copie o formato de que você precisa: HEX, RGB, HSL, HSV ou CMYK. Clique em qualquer amostra de tom claro, tom escuro ou harmonia para copiar o código hex dela.
- Confira as caixas de contraste para ver se texto branco ou preto sobre a sua cor atende ao nível AA ou AAA da WCAG.
Como funcionam os códigos de cores hex
Um código de cor hex como #FF6347 contém três bytes: vermelho (FF = 255), verde (63 = 99) e azul (47 = 71). Cada canal vai de 00 a FF, o que dá 256 × 256 × 256 = 16.777.216 cores possíveis. Valores iguais produzem cinzas – #000000 é preto, #808080 é cinza médio e #FFFFFF é branco – e valores mais altos deixam a cor mais clara.
Tons claros, tons escuros e harmonias de cores
Um tom claro (tint) é a sua cor misturada com branco, e um tom escuro (shade) é a sua cor misturada com preto. O seletor mostra os dois em passos de 10%, o que é prático para estados de hover, bordas e fundos que combinam com a cor da marca.
As harmonias giram o matiz no círculo cromático, mantendo a saturação e a luminosidade:
- Complementar (180°) – a cor oposta, para contraste forte e botões de chamada para ação.
- Análoga (±30°) – cores vizinhas no círculo, para paletas calmas e coerentes.
- Triádica (±120°) – três cores igualmente espaçadas, para designs vibrantes, mas equilibrados.
Contraste de cores e WCAG
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) exigem uma razão de contraste de pelo menos 4,5:1 para texto normal (nível AA) e 7:1 para o nível AAA. Texto grande – 18 pt, ou 14 pt em negrito – precisa de 3:1 para AA. A razão compara a luminância relativa das cores do texto e do fundo e vai de 1:1 (cores idênticas) a 21:1 (preto no branco).
Perguntas frequentes
O que são códigos de cores hex?
Um código de cor hex descreve uma cor com seis dígitos hexadecimais: dois para o vermelho, dois para o verde e dois para o azul, por exemplo #FF6347 (tomato). CSS, HTML, ferramentas de design e editores de imagem entendem esse formato.
Quantas cores um código hex pode representar?
256 × 256 × 256 = 16.777.216 cores. Com um par extra de alfa (#RRGGBBAA), cada uma delas também pode ter 256 níveis de transparência.
Quais nomes de cores CSS são suportados?
Todas as 148 cores nomeadas do CSS Color Module, de aliceblue a yellowgreen, incluindo rebeccapurple. Digite um nome no campo hex ou filtre a lista abaixo da ferramenta e clique em uma cor para selecioná-la.