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.
Carregando...
É 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.
Carregando...
É o formato mais usado no desenvolvimento web. Se os pares de caracteres se repetem, você pode abreviar:
Carregando...
O formato rgb() também usa os canais vermelho, verde e azul, mas com valores de 0 a 255.
Carregando...
Uma variação é o rgba(), que adiciona um quarto valor para controlar a opacidade (de 0 a 1):
Carregando...
O formato hsl() define a cor pelo matiz (hue), saturação e luminosidade. É mais intuitivo para ajustar variações de uma mesma cor.
Carregando...
Assim como o RGB, existe o hsla() com suporte a transparência:
Carregando...
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.