Conversor de colores HEX, RGB y HSL
Escribe un color en cualquiera de los tres formatos y los otros dos se actualizan al instante. La paleta de abajo te da tonos claros y oscuros para armar una escala, y el panel de contraste te dice si el texto va a resultar legible de verdad sobre ese color.
Tonos claros y oscuros
Contraste
Qué formato conviene en cada caso
HEX es el compacto — seis caracteres, entendido en todas partes, y lo que te entregan las herramientas de diseño. Está bien para guardar un color de marca fijo. Donde falla es a la hora de editarlo: nada en #6D5EFC te dice qué va a pasar si quieres el mismo color un poco más oscuro.
RGB es la misma información en decimal. Su ventaja real es rgba(), que agrega un canal alfa para la transparencia — aunque el CSS moderno te deja escribir #6D5EFC80 para lo mismo.
HSL es el que conviene usar cuando armas un sistema de diseño. Tono, saturación y luminosidad se corresponden con la forma en que la gente describe realmente un color, y eso hace que una paleta entera se pueda derivar a mano: deja fijos el tono y la saturación, recorre la luminosidad y ya tienes una escala consistente. Así es exactamente como se generan los tonos claros y oscuros de arriba.
Por qué la luminosidad de HSL miente un poco
Dos colores con la misma luminosidad HSL casi nunca se ven igual de brillantes. El amarillo puro al 50% de luminosidad se ve claramente más brillante que el azul puro al 50% de luminosidad, porque la visión humana es mucho más sensible al verde que al azul. HSL trata a todos los tonos como si el ojo respondiera igual a cada uno, y no es así.
Esto es lo que corrige OKLCH. Es un espacio de color de CSS más nuevo, construido sobre un modelo de la percepción humana, así que valores iguales de luminosidad se ven de verdad igual de brillantes en todos los tonos. Si hoy armas una paleta desde cero y solo necesitas soportar los navegadores actuales, OKLCH te va a dar resultados más parejos con menos corrección a mano. HSL sigue siendo la opción pragmática cuando necesitas compatibilidad amplia.
Cómo leer los números de contraste
La relación de contraste va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). Los umbrales de accesibilidad de WCAG son:
- 4.5:1 — el mínimo AA para el texto normal. Trátalo como el piso de cualquier cosa que publiques.
- 3:1 — AA para el texto grande, o sea 24px o más, o 19px o más si es negrita. También es el mínimo para los componentes de interfaz y los indicadores de foco.
- 7:1 — AAA para el texto normal. Vale la pena apuntar a esto en lecturas largas, y ayuda de verdad a quien tiene baja visión.
Dos cosas que la relación no te va a decir. Primero, no dice nada sobre el daltonismo — un texto rojo y uno verde pueden tener un contraste excelente contra el fondo y aun así ser indistinguibles entre sí. Nunca uses el tono por sí solo para transmitir significado. Segundo, pasar el umbral es un piso, no una meta: un texto exactamente en 4.5:1 cumple la norma y aun así cansa la vista.
Preguntas frecuentes
¿Cómo convierto HEX a RGB a mano?
Divide los seis dígitos en tres pares y lee cada uno como un número en base 16. #6D5EFC da 6D = 109, 5E = 94, FC = 252, o sea rgb(109, 94, 252). La herramienta de arriba lo hace al instante, pero la cuenta es realmente así de simple.
¿Puedo pegar un hex abreviado de 3 dígitos?
Sí. #F0C se expande a #FF00CC automáticamente, igual que lo hacen los navegadores. La forma abreviada solo funciona cuando cada par tiene dos dígitos iguales, y por eso no todos los colores tienen una.
¿Qué relación de contraste necesito para pasar los controles de accesibilidad?
Al menos 4.5:1 para el texto normal y 3:1 para el texto grande (24px, o 19px en negrita) para cumplir con WCAG AA, que es el nivel que citan la mayoría de los requisitos legales de accesibilidad. AAA pide 7:1 en el texto normal.
¿Conviene usar HSL u OKLCH?
OKLCH si solo necesitas los navegadores actuales y estás armando una paleta desde cero: valores iguales de luminosidad se ven realmente igual de brillantes en todos los tonos, algo que HSL no puede garantizar. HSL si necesitas soporte para navegadores viejos o estás editando una paleta que ya existe.
¿Por qué los tonos claros y oscuros se ven disparejos?
Porque se generan recorriendo la luminosidad de HSL, y la luminosidad de HSL no coincide con el brillo percibido. Los pasos son matemáticamente parejos pero visualmente algo irregulares alrededor de los amarillos y los azules. Ajustar a ojo algunos pasos sueltos es práctica normal.
Última actualización 19 de septiembre de 2026