HEX, RGB e HSL
- HEX: 16 números em #RRGGBB formato. #FF0000 é vermelho, #000000 é preto #FFFFFF é branco. Códigos com os mesmos dígitos pares podem ser abreviados (#FFF).
- RGB: canais vermelho, verde e azul de 0 a 255. rgb(255, 0, 0) é vermelho. Um último valor "alfa" (0–1) adiciona transparência: rgba(0, 0, 0, 0.5) é preto semitransparente.
- HSL: matiz (0–360°), saturação e luminosidade (%). hsl(0, 100%, 50%) é vermelho. Para obter um tom mais claro ou mais escuro de uma cor, basta mudar a luminosidade.
HEX para RGB
Cada par de dígitos é convertido da base 16 para a base 10. #3B5998: 3B = 3×16+11 = 59, 59 = 5×16+9 = 89, 98 = 9×16+8 = 152 → rgb(59, 89, 152).
| Cor | HEX | RGB | HSL |
|---|---|---|---|
| Vermelho | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| Verde | #00FF00 | 0, 255, 0 | 120, 100%, 50% |
| Azul | #0000FF | 0, 0, 255 | 240, 100%, 50% |
Deixe contraste suficiente entre o texto e o fundo (pelo menos 4,5:1 para texto normal segundo a WCAG).
Perguntas Frequentes
O código HEX pode ser escrito em letras maiúsculas ou minúsculas?
Sim, #ff0000 e #FF0000 dão a mesma cor.
Posso usar o valor CMYK no site?
Não. CMYK é para impressão; na tela usa-se HEX, RGB ou HSL.
Como adiciono transparência a uma cor?
Converta o HEX para RGB e, no formato rgba(), escreva como último valor uma transparência entre 0 e 1.