La función CSS color() y sus modificadores o ajustes 16.1.17
La nueva función CSS color() a fondo. Sus modificadores o ajustes, las funciones que le son propias y ejemplos de uso.
La función CSS color() y sus modificadores o ajustes
Las funciones CSS (CSS functions
) son un tipo especial de valores usados en las hojas de estilo en cascada. Y aunque rara vez eran llamados por su nombre (funciones CSS) habitan entre nosotros desde siempre.
El valor de una función CSS es fácilmente reconocible por su sintaxis: está conformado por el nombre de la función y entre paréntesis su argumento. Argumento que es de lo más variopinto dependiendo del tipo de función CSS.
sintaxis de una función CSS en una declaración: propiedad: NOMBRE(argumento);
Hablando de colores y funciones CSS un ejemplo típico es la función rgba(). En ella el nombre de la función es rgba() y el valor del argumento (en este caso es múltiple separado por comas) es un color en el espacio RGB (rr,gg,bb) y el último el valor del canal alfa u opacidad (de 0 a 1).
Otro ejemplo de función CSS, esta sí conocida por este nombre, es la función CSS calc() que admite en su argumento una o más operaciones matemáticas.
La función CSS color()ha sido definida en el último desarrollo del módulo relativo a los colores: CSS Color Module Level 4 junto a las también nuevas funciones CSS hwb(), gray(), lab() y lch().
La función CSS color()
La función CSS color() permite declarar en su argumento un color y una serie de modificadores o ajustes y opcionalmente (y separado por comas de lo anterior) un color seguro o fallback
por si lo primero fallase por algún error.
Los ajustes o modificadores declarados en la función CSS color() en algunos casos son otras funciones CSS propias de esta función.
Si estás familiarizado con la nomenclatura del consorcio así define su sintaxis:
color()=color([<ident>? [<number>+ | <string>] [/<alpha-value>]? ]# ,<color>?)
[<ident>? [<number>+ | <string>] :
se corresponde e idéntifica a un color determinado declarado en cualquiera de las formas admitidas: por una palabra clave (nombre del color), en formato rgb... o cualquier otra forma correspondiente a alguno de los espacios de colores (colorspace
).
[/<alpha-value>]? :
Identifica a uno o varios de los modificadores de color posibles. Los veremos a continuación.
,<color>? :
un color declarado en cualquiera de las formas válidas. Su finalidad es ser usado si todo lo anterior fallase.
Unos ejemplos del uso de la función CSS color() en las declaraciones podrían ser:
body {
background-color: color(#ffffff blackness(+ 5%));
}
section {
background: linear-gradient(to right, white, color(blue blend(lime 50%)), black);
}
a:hover {
color: color(blue lightness(+ 10%));
}
Modificadores de la función CSS color()
Como ya habrás intuido toda la potencia y posibilidades de la nueva función CSS color() radica en el uso de los modificadores cuya finalidad es ajustar algún uno o múltiples aspectos del color inicial.
Son estos modificadores los que permitirán de una forma fácil modificar algún aspecto o particularidad del color elegido sin perderlo. Aspectos como su brillo, contraste, opacidad, el típico pedido de házmelo un poco más claro (u oscuro) y que brille más (o menos)
... étc. Y todo ello sin perder el color base.
Las modificaciones permitidas por la función CSS color() son los siguientes ajustes:
- Ajuste RGBA: modificación en los canales rojo, verde, azul y alfa.
- Ajuste HSL/HWB: el matiz (hue) más saturación y brillo o más whiteness y blackness
- Ajustes 'Tint' y 'Shade': mezcla el color base con un porcentaje de blanco o negro puro.
- Ajustes 'blend' y 'blenda': mezcla el color base con un color especificado. La diferencia es que el segundo (blenda) presta atención al canal alfa.
- Ajuste 'Contrast': modifica el contraste.
Las modificación pueden ser declaradas con los operadores matemáticos + (más), - (menos) o * (por) para incrementar, disminuir o multiplicar el color base en la particularidad indicada por el ajuste declarado.
Ajuste RGBA
border-color: color(red rgb(+ #004400));
La función CSS color con el ajuste RGBA del ejemplo sería tomar el color base 'red' (#ff0000) y añadirle el ajuste indicado a sus canales: el canal Rojo y Azul no sufren cambio ninguno y el Verde se incrementa en 4416. El resultado final es el color #ff4400.
Ajuste HSL/HWB
El ajuste HSL agrupa los tres modificadores hue() o matiz, saturation() y lightness()
El ajuste del matiz se indica con la palabra clave hue y se declara en grados:
body { background: var(--color-base); color: color(var(--color-base) hue(+ 180deg)); }
Los ajuste en las funciones saturation() y lightness() indicando un valor en tanto por ciento:
body { background: var(--color-base); color: color(var(--color-base) saturation(- 50%)); border-color: color(var(--color-base) lightness(-80%)); }
El ajuste HWB agrupa los tres modificadores del matiz del color o hue, whiteness() y blackness(). Los dos últimos también se declaran en porcentajes.
Los ajustes Tint y Shade
tint() mezcla el color base con el porcentaje de blanco puro indicado y shade() lo hace con negro:
a { background: color(var(--color-base) shade(+ 70%)); color: color(var(--color-base) tint(+ 70%)); }
Estos dos ajustes ('tint' y 'shade') también se declaran como porcentajes (valores permitidos entre 0% y 100%), al igual que los dos siguientes ('blend' y 'blenda').
Ajustes blend y blenda
Los ajustes blend() y blenda() mezclan (como en los modos de fusión CSS) el color de base con el indicado en ellos. La diferencia entre ambos es que en el ajuste blenda() también se mezclan el canal alfa u opacidad de ambos y con blend() se respeta el canal alfa del color base:
body { background: color(yellow blend(blue 50% hsl)); color: color(yellow blend(blue 50%)); }
Para el fondo o background = 'Yellow' es el color base que se mezcla con 'blue' al 50% en espacio de color HSL. En este espacio de color (HSL) el amarillo es hsl(60, 100%, 50%) y el azul hsl(240, 100%, 50%) con lo que su mezcla es hsl(150, 100%, 50%).
Para el 'color': mezcla yellow (#ffff00) con blue (#0000ff) a partes iguales, resultando en #808080
Ajuste 'Contrast
Para ajustar el contraste en la función CSS color() se utiliza la función contrast() con un valor en su argumento entre 0% y 100%
html { background: var(--miFondo); color: color(var(--miFondo) contrast(90%)); }
Casos de usos
La nueva función CSS color() es susceptible de ser usada en todos y cada uno de los valores que definen colores en las propiedades que manejan el color de cualquier aspecto de la web como fondos, bordes, color, gradientes CSS...
En la función CSS color() se pueden identificar los colores por cualquiera de las formas válidas, incluidas las palabras clave de CSS, así como el valor currentColor o las custom properties siempre que estas últimas computen un valor de color válido.
Una aplicación en línea para probar la función CSS color()
En Colorme.io, realizada por Tyler Gaw puedes "jugar" con los distintos modificadores y ver tanto el color base y el resultante como el valor del argumento de la función CSS color().
Lecturas complementarias
- CSS Color Module Level 4. Editor’s Draft, 16 January 2017
- Modifying CSS Colors with the color() function
- Building Themes with CSS4 Color Features
 a fondo. Sus modificadores o ajustes, las funciones que le son propias y ejemplos de uso.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso