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:
palavra-chave | cor | palavra-chave | cor |
---|---|---|---|
black | silver | ||
gray | white | ||
maroon | red | ||
purple | fuchsia | ||
green | lime | ||
olive | yellow | ||
navy | blue | ||
teal | aqua |
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.