Propriedades de Cor CSS — Guia Completo para Desenvolvedores Web
Domine todas as propriedades de cor CSS, de color e background-color a gradientes e opacidade. Referência completa com exemplos práticos.
O básico: color e background-color
As duas propriedades de cor CSS mais fundamentais são color (para texto) e background-color (para fundos). Aceitam qualquer valor de cor CSS válido incluindo cores nomeadas, HEX, RGB, HSL e funções modernas.
A propriedade color define a cor de primeiro plano do elemento, afetando principalmente o conteúdo de texto.
A propriedade background-color preenche toda a área de conteúdo e padding do elemento.
Funções de cor CSS modernas
CSS evoluiu além de rgb() e hsl() com novas funções poderosas:
rgb() agora suporta a sintaxe moderna separada por espaços: rgb(255 0 0). Transparência alfa usa barra: rgb(255 0 0 / 50%).
hsl() funciona similarmente: hsl(210 100% 50%). HSL é útil para criar variações de cor.
A função color-mix() permite misturar duas cores: color-mix(in srgb, red 30%, blue).
oklch() e oklab() fornecem espaços de cor perceptualmente uniformes.
Gradientes: linear, radial e cônico
Gradientes CSS criam transições suaves e são definidos com background-image.
Gradientes lineares fluem em linha reta: background: linear-gradient(to right, #ff0000, #0000ff).
Gradientes radiais irradiam de um ponto central: background: radial-gradient(circle, red, blue).
Gradientes cônicos giram ao redor de um ponto central: background: conic-gradient(red, yellow, green, blue, red).
Opacidade e transparência
CSS oferece múltiplas formas de controlar transparência:
A propriedade opacity afeta o elemento inteiro e todos os filhos: opacity: 0.5.
Canais alfa em valores de cor afetam apenas a propriedade específica. background-color: rgb(255 0 0 / 50%) torna apenas o fundo semi-transparente.
A palavra-chave transparent equivale a rgba(0, 0, 0, 0).
currentColor herda a cor de texto atual.
Propriedades customizadas CSS para sistemas de cor
Propriedades customizadas CSS são a base dos sistemas de cor modernos. Definem cores uma vez e reutilizam em todo o stylesheet.
Use com var(): color: var(--color-primary). O poder real vem ao combinar com funções de cor para temas dinâmicos.
Para modo escuro, simplesmente sobrescreva as variáveis.
Nossa ferramenta de seletor de cores gera valores em todos os formatos CSS instantaneamente.