Gerador e Seletor de Cores HEX/RGB
As cores na web são representadas em múltiplos formatos: HEX (hexadecimal como #FF5733), RGB (valores de vermelho, verde e azul de 0-255) e HSL (matiz, saturação, luminosidade). Cada formato tem seus casos de uso — HEX é compacto para CSS, RGB é intuitivo para mistura e HSL é natural para ajustar brilho e saturação.
Esta ferramenta permite gerar, selecionar e converter cores entre todos os três formatos em tempo real. Também calcula as proporções de contraste WCAG contra fundos branco e preto, ajudando a garantir que suas escolhas de cores atendam aos padrões de acessibilidade (níveis AA e AAA).
Como funciona
HEX para RGB: converte pares de dígitos hexadecimais para decimal 0-255. RGB para HSL: normaliza RGB para 0-1, calcula matiz pelo canal máximo, saturação por croma/luminosidade, luminosidade como (máx+mín)/2. Proporção de contraste WCAG: (L1 + 0,05) / (L2 + 0,05) onde L é a luminância relativa.
Casos de uso
- Converter cores entre formatos HEX, RGB e HSL para CSS
- Verificar acessibilidade de cores segundo padrões WCAG AA/AAA
- Encontrar harmonias de cores complementares, análogas e triádicas
- Gerar cores aleatórias para inspiração de design
Perguntas frequentes
Como converter um código de cor HEX para RGB?
Um código HEX como #FF5733 é formado por três pares de dígitos hexadecimais, um par por canal. Converta cada par para decimal: FF = 255 (vermelho), 57 = 87 (verde), 33 = 51 (azul), resultando em rgb(255, 87, 51). Esta ferramenta faz a conversão instantaneamente nos dois sentidos.
Qual a diferença entre os formatos de cor HEX, RGB e HSL?
Os três descrevem as mesmas cores de formas diferentes. HEX é um código compacto de seis dígitos muito usado em CSS, RGB expressa os canais vermelho, verde e azul com valores de 0 a 255, e HSL descreve a cor por matiz, saturação e luminosidade. HSL costuma ser o formato mais fácil para deixar uma cor mais clara, mais escura ou mais suave.
Qual proporção de contraste é necessária para passar no WCAG AA?
O nível AA do WCAG exige contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA, mais rigoroso, exige 7:1 para texto normal e 4,5:1 para texto grande. Esta ferramenta calcula a proporção da sua cor contra fundos branco e preto usando a fórmula (L1 + 0,05) / (L2 + 0,05), onde L é a luminância relativa.
Como clarear ou escurecer uma cor sem mudar o matiz?
Trabalhe em HSL e ajuste apenas o valor de luminosidade, mantendo matiz e saturação fixos. Aumentar a luminosidade aproxima a cor do branco e diminuí-la aproxima do preto, sem alterar o tom original. Fazer o mesmo em RGB é mais difícil, pois seria preciso escalar os três canais proporcionalmente.
O que são harmonias de cores complementares, análogas e triádicas?
São relações entre matizes no círculo cromático. A cor complementar fica diretamente oposta (a 180 graus) e cria forte contraste, as cores análogas ficam lado a lado e transmitem harmonia, e o esquema triádico usa três matizes espaçados a 120 graus para uma paleta equilibrada e vibrante. Este gerador sugere as três harmonias a partir de qualquer cor inicial.