Modelo de cores HEX: Notação #RRGGBB explicada
A notação de cores HEX é uma abreviação hexadecimal para valores RGB. O formato é #RRGGBB onde:
- RR = canal vermelho (00 a FF = 0 a 255)
- GG = canal verde (00 a FF = 0 a 255)
- BB = canal azul (00 a FF = 0 a 255)
| Cor | HEX | Significado |
|---|---|---|
| Puro vermelho | #FF0000 | R=255 G=0 B=0 |
| Puro verde | #00FF00 | R=0 G=255 B=0 |
| Puro azul | #0000FF | R=0 G=0 B=255 |
| Branco | #FFFFFF | R=255 G=255 B=255 |
| Preto | #000000 | R=0 G=0 B=0 |
| FerramentaDolfen azul | #3B82F6 | R=59 G=130 B=246 |
Abreviação HEX: Quando ambos os dígitos são idênticos para cada canal, uma abreviação de 3 caracteres funciona: #F00 = #FF0000.
Modelo de cores RGB: canais vermelho, verde, azul
rgb(red, green, blue) — cada canal varia de 0 a 255.
RGB é um modelo de cores aditivas — adicionar canais se move em direção ao branco. É assim que a luz funciona (telas de TV, monitores).
Em CSS:
color: rgb(59, 130, 246); /* Blue */
color: rgba(59, 130, 246, 0.5); /* Blue at 50% opacity */Modelo de cores HSL: matiz, saturação, luminosidade
HSL separa a cor em três dimensões perceptualmente significativas:
- Matiz (0–360°): A cor em si — vermelho a 0°, verde a 120°, azul a 240°
- Saturação (0–100%): Intensidade da cor — 0% é cinza, 100% é cor pura e vívida
- Brilho (0–100%): Brilho — 0% é preto, 100% é branco, 50% é o mais puro cor
Em CSS:
color: hsl(217, 91%, 60%); /* Blue */
color: hsla(217, 91%, 60%, 0.5); /* Blue at 50% opacity */Vantagem do fluxo de trabalho do designer: Para criar uma paleta de 5 tons a partir de uma única cor:
- 90% de luminosidade → tonalidade muito clara
- 75% de luminosidade → tonalidade clara
- 50% de luminosidade → cor base
- 35% de luminosidade → escuro sombra
- 20% de luminosidade → sombra muito escura
Basta ajustar o valor L mantendo H e S constantes.
Quando usar HEX, RGB ou HSL em CSS
Use HEX: para referências de cor única onde você precisa do valor de um sistema de design ou guia de marca. HEX é o formato mais comum em especificações de design.
Use RGB: Quando você precisar manipular dinamicamente canais de cores em JavaScript: rgb(${r}, ${g}, ${b}).
Use HSL: Ao criar sistemas temáticos, gerar paletas dinamicamente ou trabalhar com propriedades personalizadas CSS para alternar entre modos claro/escuro acessível.
Conversão de cores no ToolDolfen
Use a Seletor e Conversor de Cores (Color Picker) para:
- Escolha qualquer cor visualmente em uma roda de cores e espectro
- Insira qualquer valor HEX, RGB ou HSL e veja instantaneamente todos os três formatos equivalentes
- Copie qualquer formato para a área de transferência com um clique em
- Use o conta-gotas para obter amostras de cores da tela (somente Chrome e Edge)
Guias complementares recomendados
Explore tutoriais e utilitários complementares deste grupo de tópicos para aprimorar seu fluxo de trabalho digital: