5.4.2 Cores

🎨 Cores no CSS

color

A propriedade color define a cor do texto de um elemento.

Exemplo:

cssCopiarEditarp {
  color: blue;
}

Neste exemplo, todo o texto dentro das tags <p> será exibido na cor azul.


background-color

A propriedade background-color define a cor de fundo de um elemento.

Exemplo:

cssCopiarEditardiv {
  background-color: yellow;
}

Aqui, o fundo da <div> será exibido na cor amarela.


🧪 Valores Aceitos

CSS permite diversos formatos para definir cores:

  • Nomes de cores: red, blue, green, black, white, etc. Simples e fácil de lembrar.

  • Códigos Hexadecimais (HEX): Exemplo: #FF0000 (vermelho), #00FF00 (verde), #0000FF (azul). Pode usar versões curtas: #f00, #0f0, #00f.

  • RGB (Red, Green, Blue): Exemplo: rgb(255, 0, 0) representa vermelho puro. Cada valor vai de 0 a 255.

  • RGBA (RGB + Alpha): Exemplo: rgba(255, 0, 0, 0.5) O quarto valor (alpha) define a transparência, de 0 (transparente) a 1 (opaco).

  • HSL (Hue, Saturation, Lightness): Exemplo: hsl(0, 100%, 50%) (vermelho). Hue = matiz (0–360), Saturation = saturação (0–100%), Lightness = brilho (0–100%).

  • HSLA (HSL + Alpha): Exemplo: hsla(0, 100%, 50%, 0.5) Igual ao HSL, com o controle de transparência.

  • currentcolor: Usa a cor atual definida pelo color do elemento. Útil para manter a consistência visual.

Exemplo:

cssCopiarEditarbutton {
  color: #004aad;
  border: 2px solid currentcolor;
}

Last updated