De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.

Cores CSS - Definição com palavra-chave

Colaboração: Maurício (Maujor) Samy Silva

Data de Publicação: 03 de novembro de 2017

As especificações do W3C para as CSS preveem várias propriedades, tais como color, background-color, border-color e outras, destinadas a definir cores. Os valores possíveis para tais propriedades podem ser definidos usandos-se os seguintes tipos de dados:

• valor expressso por uma palavra-chave,
• valor expressso em número hexadecimal,
• valor expressso por uma função RGB,
• valor expressso por uma função RGBA,
• valor expressso por uma função HSL,
• valor expressso por uma função HSLA.

Palavra-chave

Nessa dica mostraremos a definição de cores em CSS com uso de palavras-chave.

O tipo de dado palavra-chave para definir uma cor consiste simplesmente no nome da cor, ou de um nome que expresse a cor com grafia no idioma inglês. Por exemplo:

• red para a cor vermelha,
• green para a cor verde,
• darkslateblue para um tom escuro da cor azul,
• lightcoral para um tom claro da cor coral, e assim por diante.

Sintaxe

A sintaxe CSS para se definir cores é conforme mostrada no exemplo a seguir:

  div {
    background-color: green;
    color: white;
   }
  

Especificações CSS1 para cores

As especificações para as CSS Nível 1, lançadas em 17 de dezembro de 1996, previram 16 palavras-chave para se definir cores. São as cores VGA (Video Graphics Array) suportadas pelo display do primeiro computador IBM/PS2 lançado em 1987. Mais informações na Wikipedia.

As cores VGA e as respectivas palavras-chaves que as definem são mostradas na tabela a seguir:

Especificações CSS2.1 para cores

As especificações para as CSS Nível 2 Revisão 1, lançadas em 07 de junho de 2011, adicionou a palavra-chave orange (cor laranja) às 16 já existentes para se definir cores.

Especificações CSS3 para cores

As especificações para o Módulo para Cores Nível 3, lançadas em 07 de junho de 2011, previram palavras-chave para se definir as cores previstas em "X Windows System" ou abreviadamente X11. Essas cores são também chamadas de cores extendidas, cores X11 ou cores SVG.

Mais informações no portal W3.org.

O total de palavras-chave para se definir cores é de 147 e uma tabela com essas cores pode ser consultada em também no portal Portal W3.org.

Palavras-chave transparent e currentColor

A palavra-chave transparent foi criada com a finalidade de se sobrescrever uma cor sólida herdada e a palavra-chave currentColor define uma cor igual àquela que foi definida para a propriedade color.

Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).

No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.

Saiba mais: Facebook , Twitter.