Con CSS se puede especificar colores para los atributos de cada elemento HTML de la página. Para cada elemento podemos especificar colores en varios de sus atributos, como el color de fondo o el color del borde, el color del texto, incluso en atributos más especiales como su sombra o el aspecto que tendrían cuando se pasa el ratón por encima.

Notación hexadecimal RGB

Esta notación es la que ya conocemos. Se especifican los tres valores de color (rojo, verde y azul) con valores en hexadecimal entre 00 y FF.

h1 {
      background-color: #ff8800;
  }
  

Esto provocará que todos los encabezamientos H1 tengan un fondo de color naranja.

Notación hexadecimal abreviada

Esta notación es muy parecida a la anterior, pero permite abreviar un poco la declaración del color, indicando sólo un número para cada valor rojo, verde y azul. Por ejemplo, para especificar el color de antes (#ff8800) podríamos haber escrito:

h1 {
      background-color: #f80;
  }
  

Nombre del color

También podemos definir un color por su nombre. Los nombres de colores son en inglés, los mismos que sirven para especificar colores con HTML.

blockquote {
      color: red; 
      border-color: lime;
  }
  

En este ejemplo tendríamos que las etiquetas <blockquote> tengan el color del texto en rojo y el color del borde en verde lima.

Notación de color con porcentajes de RGB

Se puede definir un color por los distintos porcentajes de valores RGB. Si todos los valores están al 100% el color es blanco. Si todos están al 0% obtendríamos el negro y con combinaciones de distintos porcentajes de RGB obtendríamos cualquier matiz de color.

#navegador {
      color: rgb(33%, 0%, 0%);
  }
  

En este ejemplo tenemos los definido un color para el texto rojo oscuro sobre el elemento de la página que tenga el identificador "navegador" (atributo id="navegador" en el la etiqueta).

Notación por valores decimales de RGB, de 0 a 255

De una manera similar a la notación por porcentajes de RGB se puede definir un color directamente con valores decimales en un rango desde 0 a 255.

body {
      color: rgb(50, 50, 50);
  }
  

En este ejemplo tenemos definido que los textos de la página completa (etiqueta BODY) tengan un color gris muy oscuro, prácticamente negro.

De entre todas estas notaciones podemos utilizar la que más nos interese o con la que nos sintamos más a gusto. Nosotros en nuestros ejemplos venimos utilizando la notación hexadecimal RGB por habernos acostumbrado a ella en HTML.

Notación con grado de transparencia

El presente manual abarca CSS básico, o lo que teníamos en la versión CSS 2. Sin embargo, el lenguaje CSS no ha parado de crecer y añadir nuevas posibilidades, entre ellas la especificación de colores con un grado de transparencia.

Esta posibilidad, también conocida como RGB con canal Alpha, llegó en CSS 3 y la explicamos con detalle en el manual de CSS 3: Colores RGBA en CSS 3 .

Color transparente

Para finalizar, podemos comentar que también existe el color transparente, que no es ningún color, sino que específica que el elemento debe tener el mismo color que el fondo donde está. Este valor, "transparent", sustituye al color. Este color se suele usar más habitualmente para fondos de elementos, es decir, para el atributo background-color.

li.item-transparent {
      background-color: transparent;
  }
  

En este caso hemos definido que los elementos de lista que tienen la clase (class de CSS) "item-transparent" tendrán el color de fondo transparente.