Convertir colores entre HEX, RGB y HSL online — conversor gratuito
El flujo de trabajo entre diseño y desarrollo frecuentemente implica convertir el mismo color entre diferentes formatos: el diseñador entrega un HEX en el dossier de marca, el desarrollador necesita el HSL para las custom properties CSS, y el sistema de email marketing solo acepta RGB decimal. Hacer estas conversiones manualmente es tedioso y propenso a errores. WikiPlus Selector de Color convierte cualquier color entre HEX, RGB y HSL en tiempo real: introduces el valor en cualquier campo y los demás se actualizan automáticamente.
Cuándo usar HEX en lugar de RGB o HSL
HEX es el formato más habitual en CSS por tradición y por su compacidad (6 caracteres contra 10-15 de RGB o HSL). Es el estándar en las guías de color de marca, en los archivos de diseño de Figma, Sketch y Adobe XD, y en la comunicación visual entre equipos. Su desventaja es la dificultad para crear variaciones sistemáticas: ¿cómo hago este color un 15 % más claro en HEX? No es intuitivo. Para eso, convierte a HSL primero (con WikiPlus), aumenta el valor L en 15 puntos, y reconvierte a HEX si es necesario. RGB decimal es preferible en contextos de programación donde necesitas manipular los canales numéricamente, o en CSS cuando necesitas transparency (rgba(R,G,B,0.5)).
HSL para crear paletas de color coherentes
HSL es el formato más poderoso para crear paletas de color sistemáticas. Fijando el hue (H) y la saturación (S) y variando solo la lightness (L), obtienes una escala de tonos del mismo color: L=95 es casi blanco, L=50 es el color puro, L=15 es casi negro. Esta propiedad hace que los sistemas de diseño modernos (Tailwind, Radix Colors, shadcn/ui) usen HSL como base de sus escalas de color. Para crear una paleta de 9 tonos para tu proyecto: elige el H y S de tu color de marca con WikiPlus, fija esos valores, y genera los tonos variando L en pasos de 10 desde 95 hasta 5.
Conversión de colores para sistemas de diseño
Los sistemas de diseño modernos definen los colores como variables CSS usando custom properties. La sintaxis más flexible combina HSL con custom properties: --color-primary-h: 220; --color-primary-s: 70%; --color-primary-l: 45%; y luego hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)) en los componentes. Este sistema permite modificar toda la paleta cambiando solo los valores base. WikiPlus es la herramienta para obtener los valores H, S y L del color de marca en HEX que te entregó el diseñador, para poder definir las variables CSS.
Colores seguros para pantalla y para impresión
Los monitores usan el espacio de color sRGB, que cubre un subconjunto del espectro visible. Las pantallas HDR modernas y las pantallas Display P3 (iPhones, MacBooks Pro) pueden mostrar colores más saturados fuera del gamut sRGB. CSS Color Level 4 permite especificar colores en el gamut Display P3 con color(display-p3 R G B). Para impresión, el espacio de color CMYK es el estándar; los colores RGB se convierten a CMYK con cierta pérdida ya que los gamuts no son perfectamente equivalentes. WikiPlus trabaja en el espacio sRGB, que es el correcto para diseño web y pantallas estándar.
Preguntas frecuentes
- ¿La conversión entre HEX y RGB es exacta?
- Sí. La conversión entre HEX y RGB es matemáticamente exacta: un HEX de 6 dígitos se puede convertir a RGB decimal sin ninguna pérdida de información, y viceversa. La conversión a HSL implica un cálculo trigonométrico que puede introducir decimales de redondeo, pero para todos los usos prácticos en diseño web la precisión es suficiente.
- ¿Qué son los colores HEX de 3 dígitos como #FFF?
- Los colores HEX de 3 dígitos son una abreviación de HEX de 6 dígitos donde cada dígito se duplica: #FFF es equivalente a #FFFFFF (blanco), #000 equivale a #000000 (negro), #1AF equivale a #11AAFF. Solo es posible cuando ambos dígitos de cada par son iguales. WikiPlus acepta tanto la forma corta de 3 dígitos como la larga de 6 dígitos como input.
- ¿Puedo especificar colores en oklch o display-p3 con WikiPlus?
- WikiPlus trabaja con los formatos de color estándar más utilizados: HEX, RGB y HSL en el espacio sRGB. Los formatos más recientes como oklch, oklab y color(display-p3) de CSS Color Level 4 no están actualmente soportados. Para convertir entre oklch y sRGB, usa herramientas especializadas como oklch.com o el módulo color de npm.