Propiedades de Color CSS — Guía Completa para Desarrolladores Web

Las dos propiedades de color CSS más fundamentales son color (para texto) y background-color (para fondos). Aceptan cualquier valor de color CSS válido incluyendo colores nombrados, HEX, RGB, HSL y funciones modernas. La propiedad color establece el color de primer plano del elemento, afectando principalmente al contenido de texto. También se usa como color predeterminado para bordes y decoraciones de texto. La propiedad background-color rellena toda el área de contenido y padding del elemento.

CSS ha evolucionado más allá de rgb() y hsl() con nuevas funciones: rgb() ahora soporta la sintaxis moderna separada por espacios: rgb(255 0 0). La transparencia alfa usa barra: rgb(255 0 0 / 50%). hsl() funciona de manera similar: hsl(210 100% 50%). HSL es útil para crear variaciones de color porque puedes ajustar luminosidad y saturación independientemente. La función color-mix() permite mezclar dos colores: color-mix(in srgb, red 30%, blue). oklch() y oklab() proporcionan espacios de color perceptualmente uniformes.

Los gradientes CSS crean transiciones suaves y se configuran con background-image. Gradientes lineales fluyen en línea recta: background: linear-gradient(to right, #ff0000, #0000ff). Puedes especificar cualquier ángulo. Gradientes radiales irradian desde un punto central: background: radial-gradient(circle, red, blue). Gradientes cónicos giran alrededor de un punto central: background: conic-gradient(red, yellow, green, blue, red). Son excelentes para ruedas de color y gráficos circulares.

CSS ofrece múltiples formas de controlar la transparencia: La propiedad opacity afecta a todo el elemento y sus hijos: opacity: 0.5. Útil para efectos hover pero no puede hacer solo el fondo transparente. Los canales alfa en valores de color solo afectan la propiedad específica. background-color: rgb(255 0 0 / 50%) hace el fondo semi-transparente manteniendo el texto opaco. La palabra clave transparent equivale a rgba(0, 0, 0, 0). currentColor hereda el color de texto actual, útil para sincronizar iconos SVG con el color de texto.

Las propiedades personalizadas CSS son la base de los sistemas de color modernos. Definen colores una vez y los reutilizan en todo el stylesheet. Úsalas con var(): color: var(--color-primary). El poder real viene al combinarlas con funciones de color para temas dinámicos. Para modo oscuro, simplemente sobrescribe las variables: @media (prefers-color-scheme: dark) { :root { --color-text: #f9fafb; } } Nuestra herramienta de selector de color genera valores en todos los formatos CSS al instante.