Cores em CSS

Cores em CSS

As cores são elementos fundamentais no design de uma página web, pois elas podem transmitir emoções, destacar conteúdos importantes e tornar a experiência do usuário mais agradável. Em CSS, existem diversas maneiras de definir cores, seja através de palavras-chave, valores numéricos ou códigos hexadecimais.

Palavras-chave

As palavras-chave são as formas mais simples de definir cores em CSS. Elas são representações de cores comuns, como "red" (vermelho), "blue" (azul) e "green" (verde). Além disso, também existem palavras-chave que representam tons de cinza, como "gray" (cinza) e "silver" (prata).

Veja um exemplo:

  
    h1 {
      color: red;
    }
  

Nesse caso, o título da página será exibido em vermelho.

Valores numéricos

Os valores numéricos são outra forma de definir cores em CSS. Eles são representados por três números que variam de 0 a 255, que correspondem às intensidades de vermelho, verde e azul, respectivamente. Essa técnica é conhecida como RGB (Red, Green, Blue).

Veja um exemplo:

  
    h1 {
      color: rgb(255, 0, 0);
    }
  

Nesse caso, o título da página também será exibido em vermelho.

Códigos hexadecimais

Os códigos hexadecimais são a forma mais precisa de definir cores em CSS. Eles são representados por seis caracteres alfanuméricos que variam de 0 a F, que correspondem às intensidades de vermelho, verde e azul, respectivamente. Essa técnica é conhecida como HEX (Hexadecimal).

Veja um exemplo:

  
    h1 {
      color: #FF0000;
    }
  

Nesse caso, o título da página também será exibido em vermelho, mas com um código hexadecimal mais preciso.

Transparência

Além de definir as cores, é possível também definir a transparência de um elemento em CSS. Isso é feito através da propriedade "opacity", que varia de 0 a 1, sendo 0 totalmente transparente e 1 totalmente opaco.

Veja um exemplo:

  
    h1 {
      color: rgba(255, 0, 0, 0.5);
    }
  

Nesse caso, o título da página será exibido em vermelho com uma transparência de 50%.

Conclusão

Em resumo, as cores são elementos essenciais no design de uma página web e em CSS existem diversas maneiras de defini-las. Seja através de palavras-chave, valores numéricos ou códigos hexadecimais, o importante é escolher a cor certa para cada elemento e transmitir a mensagem desejada.

Próxima página do Ebook Gratuito:

9Gradientes em CSS

3 minutos