Funciones de color en CSS

CSS permite usar funciones de color para controlar con precisión la representación, transparencia y combinación de colores. Con RGBA, HSL y la moderna función color-mix podemos crear paletas flexibles en la web.

Función RGBA

RGBA incluye rojo, verde y azul junto con un valor alfa que controla la transparencia. El valor va de 0 (totalmente transparente) a 1 (completamente opaco).

Este ejemplo muestra un fondo rojo semitransparente usando RGBA.

Función HSL

HSL (Hue, Saturation, Lightness) es otro modelo que facilita ajustar brillo o saturación. Hue se mide en grados (0–360), Saturation y Lightness en porcentaje.

En este ejemplo se muestra un tono azulado con el modelo HSL.

Función color-mix

Color-mix es una función moderna que mezcla dos o más colores en proporciones definidas. Útil para crear tonos intermedios o esquemas dinámicos.

Este ejemplo combina rojo y azul con color-mix para generar un nuevo tono.

Consejos para usar funciones de color

Las funciones de color ofrecen un manejo más flexible, pero conviene usarlas con criterio para mantener coherencia en el diseño.

• RGBA es muy útil para overlays o capas semitransparentes.
• HSL simplifica modificar tonos, por ejemplo en estados hover.
• Color-mix abre posibilidades para esquemas dinámicos, pero revisa la compatibilidad en navegadores.