color

color es la propiedad CSS que controla el color del contenido textual de un elemento: el texto, los decorados de texto (text-decoration), y el color que toman los bordes o sombras cuando usan currentColor. Es una de las propiedades más usadas de CSS y una de las pocas que hereda por defecto: si establecés color en un contenedor, todos sus descendientes heredan ese valor a menos que lo sobreescriban.

Lo que hace color es asignar el color del primer plano (“foreground”) del elemento — el color sobre el que va el contenido. No controla el fondo (eso es background-color) ni el color de los bordes (eso es border-color, aunque admite currentColor). Cuando se dice coloquialmente “el color de un texto”, en CSS eso es color.

Más allá de su función directa, color tiene una segunda responsabilidad: define el valor de la keyword currentColor en el elemento. currentColor resuelve al valor computado de color en ese punto del árbol del documento. Esto significa que el valor de color no solo afecta al texto — puede propagarse a border-color, box-shadow, fill, stroke y cualquier otra propiedad que use currentColor como valor. Por eso es central entender color como un “valor fuente” del que otras propiedades pueden beber.

Cómo funciona

Cuando el navegador aplica color a un elemento, establece el color del texto directo del elemento y actualiza el valor de currentColor. Los hijos que no declaren color propio heredan el valor del padre.

body {
  color: #1e293b; /* hereda a todos los descendientes */
}

.alerta {
  color: #dc2626; /* sobreescribe la herencia para este elemento */
}

El valor computado de color siempre es un color absoluto — el navegador convierte cualquier formato a un valor rgb() o rgba() interno. currentColor en propiedades de ese mismo elemento siempre resuelve a ese valor computado.

Sintaxis

selector {
  color: <valor-de-color>;
}

Donde <valor-de-color> puede ser cualquiera de los formatos descriptos en la sección “Valores” abajo.

Valores

color acepta todos los formatos de valor de color de CSS. Estos formatos no son exclusivos de color — aplican a cualquier propiedad que acepte un color (background-color, border-color, box-shadow, etc.).

Keywords — nombres de color

CSS incluye 148 palabras clave de color con nombre predefinido. Son la forma más legible para colores comunes:

.alerta   { color: red; }
.aprobado { color: green; }
.titulo   { color: navy; }
.boton    { color: teal; }

Keywords útiles: black, white, red, green, blue, teal, navy, orange, purple, pink, gray, coral, salmon, gold.

transparent — keyword especial: equivale a rgba(0, 0, 0, 0). Se usa para el valor “sin color” visible, por ejemplo en bordes que no queremos ver pero que reservan espacio, o en transiciones desde transparente.

Cuándo usar keywords: para colores de sistema o prototipos rápidos. En producción se prefiere hex o hsl() para mayor precisión y consistencia.

Hexadecimal — #RRGGBB y #RGB

El formato hex especifica los tres canales de color (Rojo, Verde, Azul) como pares hexadecimales de 00 a FF (0 a 255 en decimal). Es el formato más común en código de producción:

.boton     { color: #3a7bd5; }   /* azul */
.alerta    { color: #e53e3e; }   /* rojo */
.texto     { color: #1a202c; }   /* casi negro */

El atajo #RGB: cuando cada par tiene los dos dígitos iguales, podés escribirlo con un dígito por canal:

#f00 → #ff0000 (rojo puro)
#333 → #333333 (gris oscuro)
#abc → #aabbcc (azul grisáceo)

Si algún canal tiene dígitos distintos (#3a7bd5), el atajo no aplica.

#RRGGBBAA — hex con canal alfa: existe la variante con canal de opacidad al final, donde AA va de 00 (transparente) a FF (opaco). Sin embargo, para colores con transparencia se prefiere rgba() por ser más legible: rgba(0,0,0,0.5) es más claro que #00000080.

rgb() y rgba() — canales 0–255

rgb() especifica el color con tres números enteros (rojo, verde, azul), cada uno de 0 a 255:

.precio  { color: rgb(37, 99, 235); }   /* azul */
.titulo  { color: rgb(220, 38, 38); }   /* rojo */
.suave   { color: rgb(100, 116, 139); } /* gris azulado */

rgba() agrega el canal alfa (opacidad), que va de 0 (transparente) a 1 (opaco):

.texto-suave { color: rgba(30, 41, 59, 0.6); }   /* texto semitransparente */

En CSS moderno, rgba() es un alias de rgb() — ambas funciones aceptan el canal alfa como cuarto parámetro. La sintaxis sin comas (rgb(37 99 235) o rgb(37 99 235 / 0.5)) también es válida en navegadores modernos, pero la sintaxis con comas sigue siendo más legible y familiar.

hsl() y hsla() — matiz, saturación, luminosidad

hsl() describe el color en términos humanos, lo que facilita enormemente crear variaciones de un mismo color:

.verde     { color: hsl(120, 50%, 40%); }   /* verde medio */
.azul      { color: hsl(210, 70%, 55%); }   /* azul brillante */
.gris      { color: hsl(0, 0%, 50%); }      /* gris neutro */

La ventaja de hsl() sobre hex o rgb() es que ajustar el color es intuitivo — “aclarar” un color solo implica subir el tercer parámetro:

/* Variaciones del mismo azul */
.azul-base   { color: hsl(210, 70%, 55%); }
.azul-claro  { color: hsl(210, 70%, 75%); } /* más luminosidad */
.azul-oscuro { color: hsl(210, 70%, 35%); } /* menos luminosidad */
.azul-vivo   { color: hsl(210, 95%, 55%); } /* más saturación */

Con hex o rgb(), cambiar el tono o la luminosidad requiere conocer las relaciones entre los tres canales. Con hsl(), son operaciones directas sobre parámetros con significado.

hsla() agrega el canal alfa exactamente igual que rgba(). También es un alias de hsl() en CSS moderno.

currentColor — hereda el valor de color

currentColor es una keyword especial que resuelve al valor computado de color en el elemento. Permite que otras propiedades (bordes, sombras, fondos) usen el mismo color que el texto sin repetir el valor:

.boton {
  color: teal;
  border: 2px solid currentColor; /* el borde toma el color del texto: teal */
  box-shadow: 0 0 0 3px currentColor; /* el shadow también */
}

El caso de uso principal es mantener la coherencia: cuando el color cambia (por ejemplo, en :hover), todas las propiedades con currentColor se actualizan automáticamente.

.enlace       { color: navy; border-bottom: 1px solid currentColor; }
.enlace:hover { color: teal; /* el borde también cambia a teal */ }

Ejemplo realista

Un sistema de tipografía que establece el color en el cuerpo y lo ajusta en variantes:

body {
  color: #1e293b;        /* hereda a todo el documento */
}

h1, h2, h3 {
  color: #0f172a;        /* más oscuro para headings */
}

.texto-secundario {
  color: #64748b;        /* gris para texto de soporte */
}

.precio {
  color: hsl(0, 72%, 51%);  /* rojo vivo para precios */
}

.link {
  color: hsl(221, 83%, 53%);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

Cuándo usar qué formato

Notas, gotchas e interacción

• color hereda — background-color no. Si establecés solo color en un contenedor, los hijos lo heredan. background-color no se hereda y por defecto es transparent.
• currentColor en fill y stroke de SVG: cuando un SVG está inline en el HTML, sus elementos pueden usar currentColor como valor de fill o stroke. Eso permite que los íconos SVG cambien de color con el texto circundante automáticamente.
• El navegador canoniza todos los formatos. Internamente convierte cualquier sintaxis a rgb() o rgba(). En DevTools, el color siempre aparece como rgb(...) independientemente de cómo lo escribiste. Esto también significa que comparar teal y rgb(0, 128, 128) da el mismo resultado — son el mismo color.
• color: inherit para forzar herencia en elementos que no la tienen por defecto. Algunos elementos (<button>, <input>) no heredan color automáticamente. Usá color: inherit para forzar que lo hagan.
• Contraste mínimo para accesibilidad. WCAG define ratios mínimos de contraste entre el color del texto (color) y el fondo (background-color): 4.5:1 para texto normal, 3:1 para texto grande. Las DevTools de Chrome/Firefox tienen una herramienta de verificación de contraste integrada en el inspector de color.
• Los gradientes y el color de fondo se documentan en la familia de fondos y bordes (próximamente en la referencia). color solo afecta al texto.

Vigente / legacy

color está vigente desde CSS1. No tiene forma legacy.

Las funciones de color modernas oklch(), color-mix() y el espacio de color display-p3 ofrecen una gama más amplia y mejores herramientas para manipulación programática, pero aún no son Baseline widely (2026). Se mencionan como expansión futura.