Cómo convertir HEX a RGB, HSL y OKLCH, y dónde pegar cada formato

Convertir un color es aritmética. Decidir cuál de los resultados pegar es la parte en la que la gente se equivoca, porque las notaciones no son intercambiables en lo que te permiten hacer después.

Convierte un color con la herramienta

1. Abre el convertidor de colores y escribe o pega en el campo Any CSS colour (cualquier color CSS). Lee hex con o sin el numeral, nombres de colores CSS y valores rgb(), hsl() y oklch(). La muestra a la izquierda del campo abre un selector de color si prefieres elegir a ojo.
2. Revisa la muestra grande de abajo. Muestra el color a un tamaño en el que puedes juzgarlo, con su código hex en negro o en blanco, el que mida más contraste sobre él.
3. Busca el grupo según adónde va el valor: Paste into CSS (pegar en CSS), Paste into a design tool (pegar en una herramienta de diseño) o Going to print (para imprenta). Cada fila lleva una nota de una línea sobre cuándo usarla.
4. Haz clic en una fila para copiarla. Toda la fila es el botón, y su etiqueta cambia a “copied”. Para llevártelo todo de una vez, presiona Copy all formats (copiar todos los formatos) en la barra de la parte inferior de la página (o la tecla C), que copia todas las conversiones, una por línea.
5. Antes de decidirte, lee Contrast as text (contraste como texto). Da el ratio de tu color como texto sobre blanco y sobre negro, con las etiquetas “AA body”, “AA large only” o “fails AA”. Al lado, Colour vision (visión del color) muestra el mismo color en ocho muestras: la visión típica y siete deficiencias simuladas.

Un color en todas las notaciones

La herramienta abre con #2563EB. Esto es lo que da para ese color, y dónde va cada valor.

Notación	#2563EB escrito como	Pégalo en
HEX	#2563EB	Cualquier propiedad CSS; cualquier lugar donde baste un valor simple
RGB	rgb(37 99 235)	CSS cuando necesitas transparencia, como rgb(37 99 235 / 50%); canvas y datos de imagen
OKLCH	oklch(54.6% 0.215 262.9)	Tokens de diseño, escalas, variantes más claras y más oscuras
HSL	hsl(221 83% 53%)	Un ajuste rápido a mano, nunca un sistema
HEX, sin numeral	2563EB	Campos de color de Figma, Sketch y Canva
Variable CSS	--color: #2563eb;	Un archivo de tokens
CMYK	cmyk(84% 58% 0% 8%)	Una conversación con la imprenta, no una especificación

Una notación de color es una manera de escribir un color, no un color distinto. Todas las filas de arriba son el mismo azul. Lo que cambia es lo que los números te permiten razonar: HEX no te dice nada a simple vista, RGB es lo que hace la pantalla, HSL es fácil de ajustar a mano y OKLCH es la notación cuyo eje de luminosidad coincide con lo que ves.

Ese último punto merece una cifra en lugar de repetir todo el argumento. Con una luminosidad HSL del 50%, el amarillo puro tiene una luminancia relativa de 0.928 y el azul puro de 0.072, casi trece veces de diferencia con la misma luminosidad nominal. Por qué eso descarta HSL para cualquier uso sistemático, y qué hace OKLCH en su lugar, se explica en OKLCH para diseñadores.

Qué sale mal al convertir

El HSL redondeado no vuelve al mismo hex

El convertidor redondea HSL a números enteros, como hacen casi todas las herramientas y hojas de estilo. Ese redondeo tiene pérdida. Si conviertes hsl(221 83% 53%) de vuelta a RGB, el canal rojo da 255 × (0.53 − 0.83 × 0.94 ÷ 2) = 255 × 0.1399 = 35.7, que se redondea a 36. El original era 37. Así que #2563EB sale como HSL y vuelve como #2463EB.

Nadie puede ver una diferencia de uno en el canal rojo. Una auditoría de tokens que compara cadenas de texto, o un archivo de diseño que busca un hex de marca exacto, la va a ver siempre. Guarda el valor HEX u OKLCH como fuente de verdad y trata el HSL como una vista de ese valor.

La transparencia no sobrevive

Pega un hex de ocho dígitos como #2563EB80 y todos los formatos vuelven opacos, porque el convertidor trabaja con el color y descarta el canal alfa. Si necesitas la transparencia, vuelve a agregarla en la forma RGB, rgb(37 99 235 / 50%), que es lo que sugiere la nota de la herramienta en la fila RGB.

CMYK no es un color de imprenta

El CMYK de dispositivo es una conversión directa del RGB de pantalla a porcentajes de tinta sin perfil ICC, así que no sabe nada del papel, la prensa ni las tintas. La aritmética es lo bastante simple para comprobarla a mano. Para #2563EB, el negro es K = 1 − 235 ÷ 255 = 8%, y el cian es (1 − 37 ÷ 255 − 0.078) ÷ (1 − 0.078) = 84%. Todos los convertidores web hacen este mismo cálculo ingenuo, por eso la herramienta lo presenta como un punto de partida. Para imprenta, convierte en un software que conozca el perfil de tu papel y tu prensa.

La notación no cambia el contraste

Convertir nunca mejora la legibilidad de un color. La luminancia relativa es la medida de WCAG de cuánta luz emite un color, de 0 para el negro a 1 para el blanco, y los ratios de contraste se calculan a partir de ella. #2563EB tiene una luminancia relativa de 0.1532 la escribas como la escribas. Como texto sobre blanco eso da (1 + 0.05) ÷ (0.1532 + 0.05) = 5.17, que la herramienta muestra como 5.16:1 porque trunca en lugar de redondear, para que un ratio justo por debajo de un umbral nunca aparezca como aprobado. Sobre negro da (0.1532 + 0.05) ÷ 0.05 = 4.06:1: solo texto grande. Si un color no aprueba, la solución es un cambio de luminosidad, que es lo que busca el verificador de contraste.

Otras formas de hacerlo

Para CSS puede que ni siquiera necesites convertir. HEX, rgb(), hsl() y oklch() son todos valores de color CSS válidos, así que normalmente puedes pegar tal cual un valor sacado de un archivo de diseño.

Pasar de HEX a RGB es fácil a mano, porque cada par de dígitos hex es un número en base 16. Para #2563EB: 25 es 2 × 16 + 5 = 37, 63 es 6 × 16 + 3 = 99, y EB es 14 × 16 + 11 = 235. Eso da rgb(37 99 235).

OKLCH no es práctico a mano. Implica linealizar cada canal, dos multiplicaciones de matrices y una raíz cúbica, un trabajo para código. Aquí no damos ningún método integrado del sistema operativo, porque no hemos verificado ninguno que produzca todas estas notaciones.

Cómo comprobar que nada salió de la página

La conversión se ejecuta en la pestaña, y el color que escribes se guarda en la barra de direcciones después de un #. Esa parte de una URL nunca se envía al servidor, y por eso un enlace copiado vuelve a abrir el mismo color. Para comprobarlo, abre las herramientas para desarrolladores de tu navegador, elige el panel Network y escribe algunos colores: no verás ninguna solicitud que los transporte. La baliza de analítica de la propia página informa la ruta de la página, no el fragmento.

Siguiente paso

Abre el convertidor de colores y pega el color que estás a punto de fijar. Si va a formar parte de un sistema y no de una sola regla, el generador de escalas y tokens convierte un valor OKLCH en once pasos con roles asignados según el contraste medido.