Cómo definir colores en CSS

El estándar CSS ofrece distintas maneras para definir colores: por nombre, con notación hexadecimal o con notación decimal.

Designación de un color por su nombre

HTML tiene un grupo de nombres para una cantidad limitada de colores (ver colores HTML). La cantidad de colores que ofrece HTML no alcanza para cubrir todas las necesidades; sin embargo, puede resultar muy práctico llamar a los colores por su nombre si son colores estándar.

El estándar CSS incluye 16 colores básicos ya definidos por HTML 4.01 y agrega el naranja. La lista de colores disponibles en CSS es la siguiente:

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

Por lo tanto, para establecer los encabezados de nivel 1 en azul (blue), sólo se debe agregar una regla CSS como la siguiente:

h1 {color: blue}

En realidad, los navegadores admiten más de 140 nombres de colores, pero actualmente no todos forman parte del estándar CSS.

Código RGB (rojo, verde, azul) en notación hexadecimal

Pueden definirse más de 16 millones de colores al especificarse los valores RGB de un color con la notación #RRGGBB tomada de HTML, donde RR, GG y BB representan, cada uno, un número hexadecimal entre 00 y FF para rojo, verde y azul, respectivamente.

Ésta es la misma declaración que la anterior, pero con notación hexadecimal:

h1 {color: #0000FF}

Código RGB (rojo, verde, azul) en notación decimal

CSS también define una notación RGB "funcional" que se utiliza para establecer los valores rojo, verde y azul al indicar sus proporciones relativas en porcentaje o en números enteros positivos (cada valor puede ser un número entero entre 0 y 255) por medio de alguna de las siguientes sintaxis:

rgb(100%,100%,100%)
rgb(24,125,255)

Foto: ©123RF

Haz una pregunta
Nuestros contenidos son redactados en colaboración con expertos del ámbito tecnológico bajo la dirección de Jean-François Pillou, fundador de CCM.net. CCM es un sitio de tecnología líder a nivel internacional y está disponible en 11 idiomas.
El documento « Cómo definir colores en CSS » se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.