#6D5EFC, rgb(109, 94, 252) y hsl(245, 96%, 68%) son el mismo color. Tu navegador los trata de forma idéntica. La elección se reduce a cuál de los tres puede manejar una persona.
HEX: sirve para guardar, es inútil para editar
Seis dígitos hexadecimales: dos para el rojo, dos para el verde, dos para el azul, cada par de 00 a FF. Compacto, entendido en todas partes y lo que te entrega cualquier herramienta de diseño.
Su debilidad es que es opaco. Mira #6D5EFC e intenta responder: "¿cómo sería este color un 20% más oscuro?". No puedes, no sin convertirlo antes a otra cosa. El formato codifica el color a la perfección y no te dice nada sobre él.
Dos cosas que conviene saber: el atajo de tres dígitos (#F0C = #FF00CC) solo funciona cuando cada par tiene dos dígitos idénticos, y el CSS moderno acepta ocho dígitos donde los dos últimos son el alfa — #6D5EFC80 es el mismo color al 50% de opacidad.
RGB: los mismos números en base diez
La misma información, en decimal en lugar de hexadecimal. Un poco más fácil de leer, un poco más largo de escribir e igual de inútil cuando quieres una variación.
Su ventaja histórica era rgba() para la transparencia, pero el hexadecimal de ocho dígitos y la sintaxis moderna rgb(109 94 252 / 50%) la volvieron irrelevante. Úsalo cuando una herramienta o un lenguaje te dé un color como tres números y no quieras convertirlo.
HSL: con este sí puedes razonar
Tres valores que se corresponden con la forma en que la gente describe el color:
- Tono, de 0 a 360° alrededor de una rueda de color. 0 es rojo, 120 verde, 240 azul.
- Saturación, de 0 a 100%. 0 es gris, 100 es lo más vivo que llega a ser el color.
- Luminosidad, de 0 a 100%. 0 es negro, 100 es blanco, 50 es el color "puro".
La recompensa es que las variaciones se convierten en aritmética. ¿Quieres un estado hover? Baja la luminosidad 8 puntos. ¿Una versión deshabilitada? Recorta la saturación. ¿Una escala tonal completa para un design system? Mantén fijos el tono y la saturación y recorre la luminosidad de 95 hasta 10. Así es exactamente como se genera la paleta del conversor de color: entra un color, salen nueve pasos consistentes, todos con el mismo tono.
Intenta hacer eso con hexadecimal y estarás convirtiendo de ida y vuelta en cada uno de los pasos.
Dónde te miente HSL
Aquí está la trampa, y es una trampa real. Dos colores con la misma luminosidad HSL rara vez se ven igual de brillantes.
El amarillo al 50% de luminosidad deslumbra. El azul al 50% de luminosidad es oscuro. El mismo número, un brillo percibido completamente distinto: la visión humana le da mucho peso al verde y casi ninguno al azul, y la luminosidad de HSL es un simple punto medio geométrico que no sabe nada de eso.
La consecuencia práctica: una escala tonal generada recorriendo la luminosidad de HSL sale desigual. Los pasos son matemáticamente regulares y visualmente desparejos, y terminas corrigiendo a mano los amarillos y los azules. Todo design system construido sobre HSL tiene este problema y lo resuelve con ajustes manuales.
OKLCH, que lo arregla
OKLCH es un espacio de color de CSS más reciente, construido sobre un modelo de la percepción humana en lugar de sobre la geometría de RGB. Las mismas tres ideas — luminosidad, croma, tono — pero aquí luminosidad significa luminosidad percibida. Valores iguales se ven de verdad igual de brillantes en cualquier tono.
Eso hace que las escalas tonales salgan parejas sin ninguna corrección manual, que es la mayor ventaja práctica de todas. También alcanza colores fuera del gamut sRGB, así que puede expresar los colores más vivos que muestran las pantallas modernas y que el hexadecimal sencillamente no puede codificar.
Cuándo usarlo: cuando construyes una paleta desde cero, apuntas a navegadores actuales y estás dispuesto a renunciar a la familiaridad. Cuándo no: cuando necesitas compatibilidad amplia con navegadores viejos, estás editando una paleta existente basada en hexadecimal, o tu equipo piensa en hexadecimal y el costo de la conversión no compensa. HSL sigue siendo el punto medio pragmático para la mayoría de los proyectos.
Qué hacer en la práctica
- Guarda los colores de marca en hexadecimal. Compacto, sin ambigüedad y lo que espera todo el mundo.
- Construye las variaciones en HSL (u OKLCH si puedes). Ajustar un número le gana a convertir tres.
- Define ambos como custom properties de CSS y referencia los tokens, para que cambiar un color sea una edición y no cuarenta.
- Revisa el contraste después de cada cambio, porque mover la luminosidad unos pocos puntos es justo lo que hace que una combinación pase de aprobar a fallar.
Eso último no es opcional si alguien va a leer el texto. Ajustar un color hasta que se vea bien y publicarlo así es como la web terminó llena de texto gris claro que nadie puede leer.
El conversor de color hace el viaje de ida y vuelta en los dos sentidos: escribes un hexadecimal y obtienes RGB y HSL, editas cualquiera de los tres y los otros se actualizan solos. También genera la escala de luminosidad de nueve pasos descrita más arriba y muestra la relación de contraste de cada paso, así que puedes ver exactamente en qué punto de la escala tu texto deja de ser legible.
Que es justo lo que hay que revisar antes de publicar nada de esto: qué relación de contraste necesita un texto legible cubre los cuatro umbrales que importan y la definición de "texto grande" que la mayoría interpreta mal, en silencio y a su propio favor.
Preguntas frecuentes
¿Debería usar HEX, RGB o HSL en CSS?
Guarda los colores fijos en hexadecimal, porque es compacto y universal. Usa HSL cuando estés derivando variaciones — estados hover, estados deshabilitados, escalas tonales — porque ajustar un número es mucho más fácil que convertir tres.
¿Cómo convierto HEX a RGB a mano?
Divide los seis dígitos en tres pares y lee cada uno en base 16. #6D5EFC da 6D = 109, 5E = 94, FC = 252, o sea rgb(109, 94, 252).
¿Por qué mis colores HSL se ven desparejos con la misma luminosidad?
Porque la luminosidad de HSL es geométrica, no perceptual. La visión humana le da mucho peso al verde y casi ninguno al azul, así que el amarillo al 50% de luminosidad se ve mucho más brillante que el azul al 50%. OKLCH lo arregla modelando la luminosidad percibida.
¿OKLCH es mejor que HSL?
Para construir una paleta desde cero en navegadores actuales, sí: valores iguales de luminosidad se ven de verdad igual de brillantes, así que las escalas tonales salen parejas sin corrección manual. HSL sigue siendo la opción pragmática si necesitas compatibilidad con navegadores viejos o ya tienes una paleta en hexadecimal.
¿Qué es el hexadecimal de 8 dígitos?
Hexadecimal con dos dígitos extra para el alfa. #6D5EFC80 es el mismo color a aproximadamente 50% de opacidad. Todos los navegadores actuales lo admiten, lo que elimina casi toda la vieja razón para recurrir a rgba().
Última actualización 19 de septiembre de 2026