# Códigos de color hex, RGB, HSL y OKLCH: qué significan

[Canonical HTML page](https://gradiently.design/es/guide/color-codes-explained)

#7c3aed, rgb(124 58 237), hsl(262 83% 58%) y oklch(54.1% 0.247 293) son el mismo violeta. Esto es lo que dice de verdad cada notación y cuándo se justifica cada una.

## The short version

- Los códigos de color hex como `#7c3aed` son una forma compacta de escribir los valores de rojo, verde y azul de 0 a 255, cada uno con dos dígitos en base 16.
- RGB, hex y HSL describen los mismos colores sRGB, así que cualquier color escrito en uno puede convertirse con exactitud a los demás.
- HSL es fácil de ajustar a mano, pero su valor de luminosidad no coincide con cómo se ven de claros los colores, así que el amarillo y el azul al 50% se ven muy distintos.
- OKLCH describe el color por luminosidad percibida, croma y tono, lo que lo convierte en la mejor notación para crear paletas, tintes y degradados suaves.
- Una regla práctica: comparte los colores de marca en hex y crea paletas y degradados en OKLCH.

Los **códigos de color hex**, como `#7c3aed`, son la forma más habitual de escribir un color en pantalla: una `#` seguida de seis caracteres que indican la cantidad de rojo, verde y azul. RGB escribe los mismos números en decimal, HSL los reordena en tono, saturación y luminosidad, y OKLCH describe el color como lo percibe el ojo. Son notaciones distintas para los mismos colores, y cada una es mejor en un trabajo distinto.

- Violeta: #7c3aed
- Cielo: #0ea5e9
- Naranja: #f97316
- Verde: #16a34a
- Tinta: #111827

Cinco colores usados como ejemplo a lo largo de esta guía. La tabla de abajo escribe cada uno en las cuatro notaciones.

## Cómo funcionan los códigos de color hex

Un código hex son tres pares de dígitos en base 16: `#RRGGBB`. La base 16 cuenta del 0 al 9 y luego de la a a la f, así que cada par va de `00` (nada) a `ff` (255, máximo). En `#7c3aed`, el rojo es `7c` (124), el verde es `3a` (58) y el azul es `ed` (237): mucho azul, bastante rojo y poco verde, que es violeta. Tres canales de 256 valores dan 16.777.216 colores posibles.

- **Forma abreviada:** `#f0c` es lo mismo que `#ff00cc`. Cada dígito se duplica, así que solo sirve para colores cuyos pares se repiten.
- **Transparencia:** un código de ocho dígitos añade el alfa al final. `#7c3aed80` es el violeta con cerca del 50% de opacidad, porque `80` es 128 de 255.
- **Las mayúsculas no importan:** `#7C3AED` y `#7c3aed` son idénticos.
- **Los grises tienen tres pares iguales:** `#767676`, `#1a1a1a` y `#f4f4f4` son todos neutros.

## RGB: los mismos números en decimal

RGB escribe los tres canales como números normales de 0 a 255. El CSS moderno los separa con espacios y añade la transparencia tras una barra; la sintaxis antigua con comas y `rgba()` siguen funcionando en todas partes. RGB es útil cuando una herramienta o una API pide números, o cuando quieres leer de un vistazo la composición de un color.

```css
/* All four lines are the same violet */
color: #7c3aed;
color: rgb(124 58 237);
color: rgb(124, 58, 237);
color: hsl(262 83% 58%);

/* The same violet at 50% opacity */
color: #7c3aed80;
color: rgb(124 58 237 / 0.5);
```

La sintaxis moderna con espacios arriba, la antigua con comas debajo. Los navegadores aceptan ambas.

## HSL: tono, saturación y luminosidad

HSL describe un color por su **tono** como un ángulo en la rueda de color (0 es rojo, 120 verde, 240 azul), su **saturación** de gris (0%) a color pleno (100%) y su **luminosidad** de negro (0%) pasando por el color puro (50%) hasta blanco (100%). Es fácil de retocar a mano: para un violeta más oscuro, baja el último número.

El problema es que la luminosidad de HSL es una fórmula, no una medida de lo claro que se ve un color. El amarillo con un 50% de luminosidad se ve mucho más brillante que el azul con un 50%. Si creas una paleta manteniendo igual la luminosidad HSL, los colores no se verán igual de claros, y por eso los arcoíris por defecto parecen rayados. Mira los [degradados arcoíris](https://gradiently.design/es/guide/rainbow-gradient) para ver el resultado.

## OKLCH: el color tal como lo ves

OKLCH viene de Oklab, un espacio de color publicado por Björn Ottosson en 2020 y que ya forma parte del CSS. Usa tres valores: **L** es la luminosidad percibida de 0% a 100%, **C** es el croma, lo colorido que es, de 0 para el gris hasta cerca de 0,37 para los colores más vivos, y **H** es el ángulo del tono. Los mismos valores de L se ven de verdad igual de claros, así que puedes cambiar una cualidad sin alterar las demás.

| Color | Hex | RGB | HSL | OKLCH |
| --- | --- | --- | --- | --- |
| Violeta | `#7c3aed` | `124 58 237` | `262 83% 58%` | `54.1% 0.247 293` |
| Cielo | `#0ea5e9` | `14 165 233` | `199 89% 48%` | `68.5% 0.148 237` |
| Naranja | `#f97316` | `249 115 22` | `25 95% 53%` | `70.5% 0.187 48` |
| Verde | `#16a34a` | `22 163 74` | `142 76% 36%` | `62.7% 0.17 149` |
| Tinta | `#111827` | `17 24 39` | `221 39% 11%` | `21% 0.032 265` |

Los mismos cinco colores en cuatro notaciones. Los valores HSL y OKLCH están redondeados. Fíjate en que HSL considera el verde más oscuro que el violeta, mientras que OKLCH muestra que en realidad es más claro.

OKLCH brilla en los degradados. Al mezclar en sRGB simple, el valor por defecto de los colores hex, se traza una línea recta por el cubo RGB, y los colores de lados opuestos de la rueda se encuentran en gris. Mezclar en OKLCH mantiene el croma y recorre la rueda de tonos.

- De azul a amarillo en sRGB: `linear-gradient(90deg, #2563eb 0%, #facc15 100%)`
- De azul a amarillo en OKLCH: `linear-gradient(90deg, #2563eb 0%, #009edb 25%, #00c49e 50%, #82d14d 75%, #facc15 100%)`

Los mismos dos puntos. En sRGB el medio cae en un oliva grisáceo; en OKLCH pasa por turquesa y verde. Más en [degradados turbios](https://gradiently.design/es/guide/muddy-gradients).

```css
.band {
  /* Tell the browser which space to blend in */
  background: linear-gradient(in oklch 90deg, #2563eb, #facc15);
}

:root {
  /* One hue, a scale of equal steps in perceived lightness */
  --violet-90: oklch(90% 0.05 293);
  --violet-70: oklch(70% 0.16 293);
  --violet-54: oklch(54.1% 0.247 293);
  --violet-35: oklch(35% 0.16 293);
  --violet-20: oklch(20% 0.08 293);
}
```

OKLCH hace predecibles los tintes y las sombras: cambia L en pasos uniformes y baja C cerca de los extremos para que los colores no se salgan de la pantalla.

## Qué código de color usar en cada caso

| Trabajo | Mejor notación | Por qué |
| --- | --- | --- |
| Guía de marca, entrega de diseño | Hex | Corto, universal, se pega en cualquier herramienta |
| Transparencia en CSS | RGB o hex de 8 dígitos | Alfa claro tras la barra |
| Retoques rápidos a mano | HSL | Fácil de ajustar el tono o la oscuridad |
| Paletas, tintes y sombras | OKLCH | Pasos iguales se ven iguales |
| Degradados | OKLCH | Mezcla sin medios grises |
| Pantallas de gama amplia | OKLCH | Alcanza colores fuera de sRGB |
| Impresión | CMYK o colores directos | Los códigos de pantalla nunca se imprimen con exactitud; mira [imprimir degradados](https://gradiently.design/es/guide/print-gradients) |

Ninguna de estas es incorrecta. La habilidad está en usar cada una donde ayuda.

> **Las pantallas no son papel** Hex, RGB, HSL y OKLCH describen la luz de una pantalla. Las impresoras mezclan tinta, que cubre otra gama de colores, así que comprueba siempre las pruebas de impresión de los colores de marca en lugar de fiarte de un código convertido.

Para probar cualquiera de estos valores, [oklch.com](https://oklch.com) muestra un color en todas las notaciones y avisa cuando queda fuera del rango de una pantalla, y la [referencia de color de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) cubre todas las sintaxis. Si estás eligiendo colores en lugar de escribirlos, [cómo elegir los colores de una marca](https://gradiently.design/es/guide/how-to-choose-brand-colors) es el siguiente paso, y el [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility) te enseña a comprobar que el texto sigue siendo legible.

## FAQ

### ¿Qué significan los seis caracteres de un código de color hex?

Son tres pares de dígitos en base 16 para el rojo, el verde y el azul. Cada par va de `00` (0) a `ff` (255), así que `#7c3aed` significa rojo 124, verde 58, azul 237.

### ¿Es hex lo mismo que RGB?

Sí. Hex es RGB escrito en base 16. `#7c3aed` y `rgb(124 58 237)` son exactamente el mismo color.

### ¿Qué es OKLCH?

OKLCH es una notación de color basada en el espacio de color Oklab. Describe la luminosidad percibida, el croma y el tono, así que los mismos valores de luminosidad se ven igual de claros, lo que hace las paletas y los degradados mucho más predecibles.

### ¿Cómo añado transparencia a un código hex?

Añade dos dígitos más para el alfa. `#7c3aed80` es cerca de un 50% de opacidad y `#7c3aedcc` cerca de un 80%. En CSS también puedes escribir `rgb(124 58 237 / 0.5)`.

### ¿Qué código de color debo usar en CSS?

Hex sirve para colores sueltos. Usa OKLCH para paletas, tintes, modo oscuro y degradados, donde su luminosidad perceptual evita pasos desiguales y medios grises.