As diferentes formas de definir cores no CSS: nome, hex, RGB e HSL
No CSS você pode aplicar cores em textos, planos de fundo, bordas e outros elementos. Existem quatro formas principais de especificar uma cor.
O CSS reconhece mais de 140 nomes de cores em inglês.
1p { 2 color: red; 3 background-color: lightyellow; 4}
É a forma mais simples, mas cobre só as cores básicas. Para algo mais preciso, use os outros formatos.
O formato hexadecimal representa a cor com um # seguido de seis caracteres, combinando os canais de vermelho, verde e azul.
1h1 { 2 color: #ff0000; /* vermelho puro */ 3} 4 5p { 6
É o formato mais usado no desenvolvimento web. Se os pares de caracteres se repetem, você pode abreviar:
1color: #ff0000; /* forma completa */ 2color: #f00; /* forma abreviada, equivalente */
O formato rgb() também usa os canais vermelho, verde e azul, mas com valores de 0 a 255.
1p { 2 color: rgb(255, 0, 0); /* vermelho puro */ 3 color: rgb(
Uma variação é o rgba(), que adiciona um quarto valor para controlar a opacidade (de 0 a 1):
1p { 2 color: rgba(255, 0, 0, 0.5); /* vermelho com 50% de transparência */ 3}
O formato hsl() define a cor pelo matiz (hue), saturação e luminosidade. É mais intuitivo para ajustar variações de uma mesma cor.
1p { 2 color: hsl(0, 100%, 50%); /* vermelho puro */ 3 color:
Assim como o RGB, existe o hsla() com suporte a transparência:
1p { 2 color: hsla(0, 100%, 50%, 0.3); 3}
No dia a dia, o hexadecimal é o mais comum. Ferramentas de design como Figma e editores de código já entregam as cores nesse formato. O rgba() entra quando você precisa de transparência.