CSS define 17 palabras clave para referirse ás cores básicas. As palabras correspóndense co nome en inglés de cada cor:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver,teal, white, yellow

Táboa de cores CSS.

Aínda que é unha forma moi sinxela de referirse ás cores básicas, este método practicamente non se utiliza nas follas de estilos dos sitios web reais, xa que se trata dunha gama de cores moi limitada.

Ademais da lista básica, os navegadores modernos soportan moitos outros nomes de cores. A lista completa pódese ver en en.wikipedia.org/wiki/Websafe.

No campo do deseño gráfico, definíronse varios modelos para facer referencia ás cores. Os dous modelos máis coñecidos son RGB e CMYK. Simplificando a súa explicación, o modelo RGB consiste en definir unha cor indicando a cantidade de cor vermella, verde e azul que se debe mesturar para obter esa cor.

Polo tanto, no modelo RGB unha cor defínese indicando os seus tres compoñentes R (vermello), G (verde) e B (azul). Cada unha das compoñentes pode tomar un valor entre 0 e 255 (se o expresamos en numeración decimal) e entre 0 e FF (se o expresamos en numeración hexadecimal). 

O seguinte exemplo establece a cor do texto dun parágrafo empregando a notación RGB en decimal:

p {
  color: rgb(71, 98, 176);
}

A sintaxe que se utiliza para indicar as cores é rgb() e entre paréntese indícanse as tres compoñentes RGB, nesa mesma orde e separadas por comas. A cor do exemplo anterior obteríase mesturando as compoñentes R=71, G=98, B=176, que se corresponde cunha cor azul claro.

A notación RGBA é un xeito de especificar as cores nas que se definen catro valores. Os tres primeiros son as coñecidas canles RGB (vermello, verde e azul) e o cuarto parámetro é a canle Alpha, que non é máis que o grao de transparencia ou opacidade da cor.

A canle Alpha é un valor entre cero e un, sendo 0 totalmente transparente e 1 totalmente opaco.

No mundo do deseño existen outros formatos ou sistemas que admiten cores coa canle Alpha e, polo tanto, podemos estar familiarizados con este parámetro, como por exemplo os formatos de imaxe PNG ou o GIF.

En CSS podemos aplicar transparencias ás cores que especificamos con RGBA. A sintaxe que se utiliza para indicar as cores é rgba() e entre paréntese indícanse as tres compoñentes RGB, nesa mesma orde e separadas por comas. A cor do exemplo anterior obteríase mesturando as compoñentes R=71, G=98, B=176, que se corresponde cunha cor azul claro. O último parámetro é a transparencia da cor, que irá dende 0.0 a 1.0 (0.0 totalmente transparente e 1.0 totalmente opaco).

O seguinte exemplo establece a cor do texto dun parágrafo con unha transparencia de 0.5:

p {
  color: rgba(71, 98, 176, 0.5);
}

Para entender o modelo RGB hexadecimal, en primeiro lugar é preciso repasar o concepto matemático chamado sistema numérico hexadecimal. Este concepto xa o vichedes en varios módulos do curso anterior, pero non está mal volver a recordalo.

Cando realizamos operacións matemáticas, sempre utilizamos 10 símbolos para representar os números (do 0 ao 9). Por este motivo, dise que utilizamos un sistema numérico decimal.

Non obstante, o sistema decimal é soamente un dos moitos sistemas numéricos que se definiron. Entre os sistemas numéricos alternativos máis utilizados encóntrase o sistema hexadecimal, que utiliza 16 símbolos para representar os seus números.

Como só coñecemos 10 símbolos numéricos, o sistema hexadecimal utiliza tamén seis letras (da A áF) para representar os números. Desta forma, no sistema hexadecimal, despois do 9 non vai o 10, senón a A. A letra B equivale ao número 11, a C ao 12, a D ao 13, a E ao 14 e a F ao número 15.

Definir unha cor en CSS co método RGB hexadecimal require realizar os seguintes pasos:

• Determinar as compoñentes RGB decimais da cor orixinal, por exemplo: R = 71, G = 98, B = 176 
• Transformar o valor decimal de cada compoñente ao sistema numérico hexadecimal. No exemplo anterior, o valor hexadecimal de cada compoñente é: R = 47, G = 62, B = b0 
• Para obter a cor completa en formato RGB hexadecimal, concaténanse os valores hexadecimais das compoñentes RGB nesa orde e engádeselles o prefixo #. Desta forma, a cor do exemplo anterior é #4762b0 en formato RGB hexadecimal.

Realmente isto é moito máis sinxelo xa que na maioría de editores de imaxes empregados, cando escollemos ou seleccionamos unha cor xa nos aparece o seu valor en hexadecimal e non necesitaremos facer ningunha operación, tal e como vemos na imaxe de arriba.

Seguindo o mesmo exemplo das seccións anteriores, a cor do parágrafo indícase da seguinte forma utilizando o formato RGB hexadecimal:

p {
  color: #4762b0;
}

Recorda que aínda que é o método máis complicado para definir unha cor, se trata do método que utilizan a inmensa maioría de sitios web, polo que é imprescindible dominalo.

Tal e como mencionei antes, todos os programas de deseño gráfico converten de forma automática os valores RGB decimais aos seus valores RGB hexadecimais, polo que non tes que facer ningunha operación matemática.

O formato RGB hexadecimal é a forma máis compacta de indicar unha cor, xa que mesmo é posible comprimir os seus valores cando todas as súas compoñentes son iguais dous a dous: 

#aaa = #aaaaaa 

#fff = #ffffff 

#a0f = #aa00ff 

#369 = #336699
}

No seguinte exemplo establécese a cor de fondo da páxina a branco, a cor do texto a negro e a cor da letra dos titulares defínese de cor vermella:

body {
  background-color: #fff; 
  color: #000;
}

h1, h2, h3, h4, h5, h6 { 
  color: #c00; 
}

As letras que forman parte da cor en formato RGB hexadecimal pódense escribir en maiúsculas ou minúsculas indistintamente. Non obstante, recoméndase escribilas sempre en maiúsculas ou sempre en minúsculas para que a folla de estilos resultante sexa máis limpa e homoxénea.