Qué es Generador de sintaxis de color relativa CSS?
La sintaxis de color relativo de CSS permite partir de un color existente y modificar sus canales individualmente. Usando la sintaxis rgb(from color r g b / alpha) o hsl(from color h s l / alpha), puede ajustar la luminosidad, saturacion, alfa o canales individuales. Esto es mas potente que color-mix() para la manipulacion precisa de canales.
Respuesta rápida
La sintaxis de color relativo de CSS permite crear un nuevo color ajustando canales individuales de un color existente. Es mas potente que color-mix() para la manipulacion precisa a nivel de canal sin un preprocesador.
Last updated: 2026-06-11
Limitaciones
- La compatibilidad del navegador requiere Chrome 119+, Safari 16.4+ y Firefox 128+. Los navegadores antiguos ignoraran la declaracion por completo.
- La sintaxis varia ligeramente segun el espacio de color. No todos los canales estan disponibles en todos los espacios de color, y los rangos de valores de canal difieren.
- Las expresiones de color relativo complejas y anidadas pueden perjudicar la legibilidad. Use una propiedad personalizada CSS para el color base y mantenga las declaraciones limpias.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ingrese un color base en formato hex, RGB o HSL.
- Elija el espacio de color de salida y los ajustes de canal.
- La herramienta genera la sintaxis de color relativo CSS.
- Copie la declaracion en su hoja de estilos.
Para qué puedes usarla
- Crear variantes semitransparentes de un color de marca.
- Generar un tono mas claro u oscuro ajustando el canal de luminosidad.
- Aumentar o reducir la saturacion para estados hover y activos.