Docs ejecutables de CSS: Colores CSS

Q: ¿Qué formatos de color admite CSS?

Colores con nombre (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() y color(), además de las palabras clave transparent y currentColor. Hex, rgb y hsl cubren casi todo el trabajo diario.

Q: ¿Qué diferencia hay entre rgb y rgba?

Ya ninguna. rgba() es un alias antiguo: el CSS actual permite que rgb() lleve un valor alfa (rgb(37 99 235 / 50%)), y las dos funciones aceptan los mismos argumentos en todos los navegadores actuales.

Q: ¿Cómo hago un color transparente en CSS?

Agrega un canal alfa: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) o un hex de 8 dígitos como #2563eb80. A diferencia de opacity, esto desvanece solo ese color, no todo el elemento.

Q: ¿Qué significa currentColor?

Es el valor de la propiedad color del elemento. Usarlo en un borde o en el fill de un SVG hace que sigan automáticamente el color del texto.

Formas de escribir un color en CSS

Cualquier propiedad que acepte un color (color, background-color, border-color, las sombras, el fill de SVG) acepta los mismos formatos. Las cuatro primeras muestras son el mismo azul escrito de cuatro formas, y la quinta es un color con nombre que se le parece:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

Formato	Ejemplo	Ideal para
Nombre	`tomato`, `rebeccapurple`	Pruebas rápidas y prototipos
Hex	`#2563eb`, `#25e`	Copiar desde herramientas de diseño
`rgb()`	`rgb(37 99 235)`	Agregar transparencia, trabajar con valores RGB
`hsl()`	`hsl(221 83% 53%)`	Crear tonos más claros y más oscuros de un color
`oklch()`	`oklch(55% 0.2 262)`	Paletas con una luminosidad percibida uniforme
Palabras clave	`transparent`, `currentColor`	Mira las secciones de abajo

Colores hex

Un color hex es # seguido del rojo, el verde y el azul con dos dígitos hexadecimales cada uno, de 00 a ff. Hay tres formas que son atajos o extensiones:

#rgb: cada dígito se duplica, así que #25e es #2255ee.
#rrggbbaa: el último par es el alfa, así que #2563eb80 es opaco en un 50% aproximadamente.
#rgba: la forma corta con alfa.

Hex no distingue mayúsculas: #2563EB y #2563eb son el mismo color.

rgb() y rgba()

rgb() acepta rojo, verde y azul de 0 a 255 (o de 0% a 100%). Un cuarto valor opcional después de una barra es el alfa, de 0 (invisible) a 1, o de 0% a 100%.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() y rgb() ahora son la misma función: las dos aceptan ambas sintaxis y un alfa opcional. El código antiguo usa rgba() cuando necesita transparencia, y sigue funcionando.

hsl(): el formato más fácil de ajustar

hsl() describe un color como lo piensan las personas: un tono de la rueda de color, una saturación y una luminosidad. Mantén el tono y cambia la luminosidad para obtener toda una escala:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

La primera fila mantiene el tono 221 y la saturación 83% y solo cambia la luminosidad. La segunda fila recorre la rueda de color con la misma saturación y luminosidad.

Transparencia: alfa vs opacity

Un canal alfa hace transparente un color. opacity hace transparente todo el elemento, incluidos el texto y los hijos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent es una palabra clave para un negro totalmente transparente, rgb(0 0 0 / 0). Es el fondo por defecto de la mayoría de los elementos.

currentColor

currentColor es igual al color del propio elemento. Un botón cuyo borde, ícono y texto lo usan cambia todo con una sola declaración:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

Los bordes ya usan currentColor por defecto, y por eso border: 2px solid sin color coincide con el texto.

Prueba cualquier color

Escribe un color en cualquier formato. El navegador lo interpreta y muestra lo que calculó; un color inválido deja la muestra sin cambios.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prueba tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150) y color-mix(in srgb, #2563eb, white 50%).

Funciones de color más nuevas

oklch(L C H): luminosidad, croma y tono en un espacio diseñado para que una misma luminosidad se vea igual de clara. Las paletas creadas con él tienen menos pasos intermedios apagados que las de HSL.
color-mix(in srgb, A, B 30%): mezcla dos colores. Con white o black crea tonos más claros y más oscuros a partir de un solo color de marca, y funciona con variables CSS: color-mix(in srgb, var(--brand), white 80%).

Las dos funcionan en las versiones actuales de Chrome, Firefox y Safari. Guarda los colores de marca en variables CSS para que los formatos que elijas vivan en un solo lugar.

Errores comunes

Olvidar el # en un color hex. color: 2563eb es inválido y se ignora.
Usar opacity para hacer transparente un fondo. También desvanece el texto. Usa un color con alfa.
Mezclar separadores en la sintaxis moderna. rgb(37 99, 235) es inválido: usa solo espacios o solo comas.
Suponer que un color con nombre coincide con tu diseño. royalblue no es #2563eb. Copia el código exacto.
Juzgar el contraste a ojo. Comprueba los colores del texto contra su fondo con un verificador de contraste; 4.5:1 es el mínimo para el texto del cuerpo.

Preguntas frecuentes

¿Qué formatos de color admite CSS?

Colores con nombre (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() y color(), además de las palabras clave transparent y currentColor. Hex, rgb y hsl cubren casi todo el trabajo diario.

¿Qué diferencia hay entre rgb y rgba?

Ya ninguna. rgba() es un alias antiguo: el CSS actual permite que rgb() lleve un valor alfa (rgb(37 99 235 / 50%)), y las dos funciones aceptan los mismos argumentos en todos los navegadores actuales.

¿Cómo hago un color transparente en CSS?

Agrega un canal alfa: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) o un hex de 8 dígitos como #2563eb80. A diferencia de opacity, esto desvanece solo ese color, no todo el elemento.

¿Qué es HSL en CSS?

Tono, saturación y luminosidad (hue, saturation, lightness). El tono es un ángulo en la rueda de color (0 rojo, 120 verde, 240 azul), la saturación indica qué tan vivo es y la luminosidad va del 0% negro al 100% blanco. Facilita los tonos más claros y más oscuros: cambias solo el último número.

¿Qué significa currentColor?

Es el valor de la propiedad color del elemento. Usarlo en un borde o en el fill de un SVG hace que sigan automáticamente el color del texto.

Conceptos relacionados