El color es un componente muy importante en el diseño web. De hecho, es de las primeras cosas que se modifican cuando se empieza un nuevo proyecto. CSS ofrece propiedades para modificar el color del texto, el color de fondo y de los bordes, e incluso permite crear sombreados con cualquier color.
En CSS, los colores se pueden indicar mediante un nombre predefinido (existen 140), con notación hexadecimal o introduciendo valores numéricos a través de los modelos RGB, HSL y HWB. El código hexadecimal es el más usado.
También se puede indicar colores a través del espacio de color CIE L*a*b. La ventaja de este espacio de color es que representa los colores de una manera que se asemeja mucho más a la percepción humana, y permite definir muchos más colores. En CSS puede usarse los modelos Lab, Oklab, Lch y Oklch.
Lista completa de formas para introducir colores:
| Modelo | Descripción |
|---|---|
| Nombres | Nombres predefinidos de colores (hay 140). |
#rrggbb | Indica colores con notación hexadecimal. |
rgb() | Combinación de rojo, verde y azul. |
hsl() | Combinación de matiz, saturación y brillo. |
hwb() | Combinación de matiz, blancura y negrura. |
Por ejemplo, el nombre predefinido del color rojo es red. Si se quiere indicar con un código hexadecimal se usará los valores #ff0000 o #f00 (abreviado). Con el modelo de color RGB el valor será rgb(255 0 0), y en cambio con el modelo de color HSL su valor será hsl(0% 100% 50%). Todos estos valores constituyen diferentes formas de representar el mismo color.
Colores con nombre predefinido
Existe una nomenclatura predefinida de colores que permite aplicar hasta un total de 140 colores solo recordando el nombre. Por ejemplo, el valor salmon aplicará el color salmón y el valor olive aplicará el color verde olivo. Los navegadores web reconocen estos colores y los muestran de la misma manera.
Algunos nombres son muy populares, aunque sean en inglés, por tanto es fácil recordar el verde (green), el rojo (red), el azul (blue), el gris (gray), el blanco (white), el negro (black), el púrpura (purple), el amarillo (yellow) o el fucsia (fuchsia). Pero hay otros que son más difíciles de recordar.
Debido al hecho de que existen 140 colores con nombre predefinido, se recomienda trabajar con una tabla de referencia de colores. De todas formas, las alternativas que se explican a continuación también se pueden dominar fácilmente, y tienen la ventaja de que permiten crear hasta 16,7 millones de colores.
Notación hexadecimal
Indicar colores mediante código hexadecimal es más difícil que el método anterior, y sin embargo es el más popular y utilizado. Su sintaxis es la siguiente: almohadilla (#) seguida de 6 dígitos hexadecimales divididos en 3 grupos de 2. Cada grupo representa una cantidad de color (de rojo, verde y azul).
El esquema es el siguiente:
#rrggbb
Los dos primeros dígitos corresponden al color rojo («R» de Red), los dos dígitos del medio corresponden al color verde («G» de Green), y finalmente, los dos últimos dígitos corresponden con el color azul («B» de Blue). De hecho, este método es una forma de representar los colores según el modelo de color RGB.
Cada uno de los tres colores mencionados está definido mediante dos dígitos hexadecimales. Cada dígito hexadecimal puede tener 16 valores, esto implica que podemos especificar 256 tonalidades de cada uno de los tres colores (rojo, verde y azul). El 256 nace de la multiplicación 16×16.
Con la combinación de las 256 tonalidades de cada uno de los tres colores es posible formar 16.777.216 de colores. Esto es así porque es el resultado de multiplicar 256×256×256; o lo que es lo mismo, 2563 (256 al cubo).
Los dígitos hexadecimales son los siguientes:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
Debido a que cada color tiene dos dígitos hexadecimales, 00 el valor más bajo y ff el más alto (mayor cantidad). Vamos a crear la máxima saturación del color azul: indicamos los valores 00 en el grupo del rojo, 00 en el grupo del verde y ff en el grupo del azul. El color azul es #0000ff.
Cuando los dos dígitos hexadecimales de cada uno de los tres colores se repite es posible comprimirlos, dos a dos. En este caso, el color #0000ff puede abreviarse de la siguiente manera: #00f, que también será válida. En muchos otros casos (#0f2385), esta simplificación o abreviación no será posible.
A la notación hexadecimal puede añadirse otros dos dígitos al final que indican el canal alfa (transparencia). Puede ir desde el 00 (0 en sistema decimal) hasta el ff (255 en el sistema decimal). Por lo tanto, usando este método es posible indicar 256 niveles de opacidad para el color deseado.
Sintaxis de la notación hexadecimal con transparencia:
#rrggbbaa
El 50% de transparencia correspondería con el valor 128 en sistema decimal, o el 80 en el sistema hexadecimal. Por tanto, para indicar el color azul con una transparencia del 50% indicaremos #0000ff80.
Por ejemplo:
p {
color: #0000ff80;
}
La función ‘rgb()’
La función rgb() permite especificar los colores del modelo RGB mediante una combinación del rojo, el verde y el azul, pero en este caso no se usa el sistema hexadecimal, sino números enteros del sistema decimal, con el que estamos más familiarizados. Por esta razón, es un método más intuitivo.
Esta función tiene tres parámetros obligatorios y un cuarto opcional. Los tres primeros son números enteros que van desde el 0 hasta el 255, formando 256 tonalidades de rojo, verde y azul. El cuarto valor es el canal alfa, para indicar la opacidad de los píxeles, y se expresa en porcentaje.
Por tanto, la sintaxis es la que se indica a continuación: rgb(r g b). Los tres parámetros se pueden separar con un espacio o una coma. Solo hay que sustituir las variables r, g y b por números enteros. Si se añade el canal alfa, se separa con una barra inclinada (/), así: rgb(r g b / a).
Para crear el color azul en su máxima saturación de color se deberá usar el valor 255 en el parámetro correspondiente al color azul, y dejaremos en 0 los otros dos parámetros. El resultado será el siguiente:
p {
color: rgba(0 0 255);
}
Para crear el color azul con una transparencia del 50% añadiremos el cuarto parámetro con el valor 0.5. De la siguiente manera:
p {
color: rgba(0 0 255 / 0.5);
}
Ya no se recomienda utilizar la función rgba() para indicar el valor del canal alfa, aunque sigue siendo aceptada por razones de compatibilidad.
La función ‘hsl()’
La función hsl() utiliza el modelo HSL para representar los colores del espacio de color RGB. Por tanto, se basa en una combinación del matiz (hue), la saturación (saturation) y la luminosidad (lightness). Este modelo también permite formar la mencionada cifra de 16,7 millones de colores.
El modelo HSL es una deformación no lineal del espacio de color RGB.
Para especificar colores usando la función hsl() debe indicarse tres parámetros obligatorios y un cuarto opcional. El primero es el matiz, cuyo valor será un ángulo basándose en la rueda del color; por defecto se usa los grados. El segundo es la saturación, el tercero la luminosidad y el cuarto el canal alfa, para añadir opacidad o transparencia; estos tres valores son porcentuales.
La sintaxis de esta función es hsl(h s l) para los parámetros obligatorios, que deben ir separados con un espacio o una coma. Si se quiere indicar el canal alfa, debe separase con una barra inclinada (/) del resto de valores. En este caso, la sintaxis pasa a ser la siguiente: hsl(h s l / a).
Ejemplo de color sin transparencia:
p {
color: hsl(240 100 50);
}
Ejemplo de color con transparencia:
p {
color: hsl(240 100 50 / 0.5);
}
La función hsla() para indicar el canal alfa ya no está recomendada. No obstante, se sigue aceptando con fines de compatibilidad.
La función ‘hwb()’
La función hwb() utiliza el modelo HWB para representar los colores del espacio de color RGB, pero en este caso utiliza una combinación de matiz (hue), blancura (whiteness) y negrura (blackness). El mecanismo HWB aporta otro camino para formar los 16,7 millones de colores; al ser más predecible que el modelo HSL, facilita la creación de colores de forma algorítmica.
El modelo HWB comparte el parámetro del matiz con el modelo HSL.
Para crear colores mediante la función hwb() se debe indicar tres parámetros obligatorios referentes al matiz, la blancura y la negrura. El matiz se basa en la rueda del color, y su valor será un ángulo que por defecto estará en grados. Al matiz se le asignará un porcentaje de blancura y un porcentaje de negrura. El cuarto parámetro es opcional, referente al porcentaje de la transparencia.
La sintaxis de esta función es hwb(h w b). Los tres parámetros obligatorios pueden ir separados con un espacio o una coma. El cuarto parámetro referente al canal alfa se separa con la barra inclinada (/); entonces la sintaxis queda estipulada de la siguiente manera: hwb(h w b / a).
Ejemplo de color sin transparencia:
p {
color: hwb(180 20% 50%);
}
Ejemplo de color con transparencia:
p {
color: hwb(180 20% 50% / 0.3);
}
Este modelo para definir colores puede ser más intuitivo cuando la intención es crear una paleta de colores partiendo de un mismo matiz. Vamos a ver algunos ejemplos modificando la blancura y la negrura a partir del azul.
Ejemplos añadiendo blancura al azul, para hacerlo más claro:
.blancura1 { background: hwb(240 0% 0%); }
.blancura2 { background: hwb(240 25% 0%); }
.blancura3 { background: hwb(240 50% 0%); }
.blancura4 { background: hwb(240 75% 0%); }
.blancura5 { background: hwb(240 100% 0%); }
12345
Ejemplos añadiendo negrura al azul, para hacerlo más oscuro:
.negrura1 { background: hwb(240 0% 0%); }
.negrura2 { background: hwb(240 0% 25%); }
.negrura3 { background: hwb(240 0% 50%); }
.negrura4 { background: hwb(240 0% 75%); }
.negrura5 { background: hwb(240 0% 100%); }
12345
Propiedades para definir el color
En CSS existen varias propiedades que permiten modificar los colores en varios contextos, como un borde o un sombreado. A continuación se detallan algunas de las propiedades más relevantes relacionadas con el color:
| Propiedad | Descripción |
|---|---|
color | Modifica el color del texto. |
border-color | Modifica el color del borde. |
background-color | Modifica el color de fondo. |
box-shadow | Aplica sombreado de caja indicando el color. |
text-shadow | Aplica sombreado de texto indicando el color |
Además de las propiedades border-color y background-color, también existen las abreviaturas border y background, respectivamente, que permiten especificar otros parámetros particulares sobre los bordes y el fondo.
