Como um código HEX representa uma cor
Um código HEX representa a cor por seis dígitos hexadecimais divididos em três pares: os dois primeiros são a quantidade de vermelho, os do meio o verde e os últimos o azul. Cada par vai de 00 a FF, ou seja, de 0 a 255 em decimal, então #FF0000 é vermelho puro e #000000 é preto. Formas curtas de três dígitos, como #F00, expandem cada dígito em dobro e equivalem a #FF0000. Esse mesmo trio de valores aparece no formato rgb(255, 0, 0); o HEX é apenas uma notação mais compacta dos três canais RGB.
Quando o HSL facilita ajustar a cor
O HSL descreve a cor por matiz, saturação e luminosidade, e isso ajuda quando você quer variações de um mesmo tom. O matiz (hue) é um ângulo de 0 a 360 graus no círculo cromático: 0 é vermelho, 120 verde e 240 azul. A saturação, de 0% a 100%, controla a intensidade, e a luminosidade, também de 0% a 100%, vai do preto ao branco passando pela cor pura em 50%. Para clarear ou escurecer sem mudar o tom, basta mexer na luminosidade, algo que no HEX exigiria recalcular os três canais na mão.
Como incluir transparência na cor
A transparência entra por um quarto canal, o alfa, que vai de 0 (invisível) a 1 (totalmente opaco). No CSS você o escreve como rgba(255, 0, 0, 0.5) ou hsla, informando a opacidade no fim. Os navegadores modernos também aceitam o HEX de oito dígitos, em que os dois últimos definem o alfa: #FF000080 é vermelho a cerca de 50% de opacidade. A transparência não muda a cor em si, só o quanto o fundo aparece através dela, útil para sobreposições, sombras e estados de destaque.
Como usar esta ferramenta
- Escolha a cor no seletor ou digite um código HEX.
- Veja os valores em HEX, RGB e HSL.
- Copie o formato que precisar.
Perguntas Frequentes (FAQ)
- Qual a diferença entre HEX, RGB e HSL?
- HEX e RGB descrevem a cor pela quantidade de vermelho, verde e azul. HSL descreve por matiz, saturação e luminosidade, o que facilita ajustar tonalidades e criar variações da mesma cor.
- Posso usar esses códigos no CSS?
- Sim. Os três formatos são aceitos diretamente no CSS. Basta copiar o valor e usar em propriedades como color, background ou border.
