Cor em CSS

9.1 Maneiras de definir cores em CSS

A cor desempenha um papel importante no web design e no desenvolvimento web. No CSS, existem várias maneiras de definir cores, que permitem aos desenvolvedores criar interfaces atraentes e intuitivas. Abaixo, vamos explorar as diferentes maneiras de definir cores no CSS, incluindo modelos de cores, transparência, gradientes e funções padrão para trabalhar com cor.

Maneiras de definir cor em CSS:

• Cores nomeadas
• Cores hexadecimais
• RGB e RGBA
• HSL e HSLA
• Gradientes
• Transparência

9.2 Modelo de cor RGB

O modelo RGB (Red Green Blue) define a cor misturando vermelho, verde e azul. Cada cor recebe um valor de 0 a 255.

Sintaxe:

    
      color: rgb(255, 0, 0); /* Vermelho */
      color: rgb(0, 255, 0); /* Verde */
      color: rgb(0, 0, 255); /* Azul */
    
  

Exemplo:

    
      body {
        background-color: rgb(240, 248, 255); /* Cor de fundo: aliceblue */
      }
    
  

9.3 Modelo de cor HEX

HEX (Hexadecimal) representa a cor usando valores hexadecimais. Cada um dos valores (RR, GG, BB) pode variar de 00 a FF.

Sintaxe:

    
      color: #ff0000; /* Vermelho */
      color: #00ff00; /* Verde */
      color: #0000ff; /* Azul */
    
  

Exemplo:

    
      h1 {
        color: #4CAF50; /* Verde */
      }
    
  

9.4 Modelo de cor HSL

HSL (Hue, Saturation, Lightness) representa a cor em termos de matiz, saturação e luminosidade. Matiz (Hue) é medido em graus (0-360), saturação (Saturation) e luminosidade (Lightness) em porcentagens (0%-100%).

Sintaxe:

    
      color: hsl(0, 100%, 50%); /* Vermelho */
      color: hsl(120, 100%, 50%); /* Verde */
      color: hsl(240, 100%, 50%); /* Azul */
    
  

Exemplo:

    
      p {
        color: hsl(210, 100%, 50%); /* Azul */
      }
    
  

9.5 Transparência: RGBA e HSLA

Para adicionar transparência às cores, são usados os modelos RGBA e HSLA. Nesses modelos, é adicionado um quarto parâmetro — o canal alfa (Alpha), que determina o nível de transparência de 0 (totalmente transparente) a 1 (totalmente opaco).

1. RGBA (Red, Green, Blue, Alpha):

Sintaxe:

    
      color: rgba(255, 0, 0, 0.5); /* Vermelho semitransparente */
      color: rgba(0, 255, 0, 0.3); /* Verde semitransparente */
      color: rgba(0, 0, 255, 0.7); /* Azul semitransparente */
    
  

Exemplo:

    
      div {
        background-color: rgba(255, 99, 71, 0.6); /* Cor de tomate semitransparente */
      }
    
  

2. HSLA (Hue, Saturation, Lightness, Alpha):

Sintaxe:

    
      color: hsla(0, 100%, 50%, 0.5); /* Vermelho semitransparente */
      color: hsla(120, 100%, 50%, 0.3); /* Verde semitransparente */
      color: hsla(240, 100%, 50%, 0.7); /* Azul semitransparente */
    
  

Exemplo:

    
      span {
        color: hsla(210, 100%, 50%, 0.8); /* Azul semitransparente */
      }