Convertidor de Colores (HEX/RGB/HSL)
Convierte colores entre formatos HEX, RGB y HSL. Incluye selector de color visual y vista previa.
Cómo Usar
- Ingresa un valor de color en cualquier formato (HEX, RGB o HSL)
- Ve los valores convertidos en todos los demás formatos al instante
- Usa el selector de color para elegir un color visualmente
- Copia cualquier formato con el botón Copiar
Preguntas Frecuentes
-
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX usa notación hexadecimal (#FF5733). RGB define colores por valores Rojo, Verde, Azul (0-255). HSL define colores por Matiz (0-360), Saturación (0-100%) y Luminosidad (0-100%).
-
¿Qué formato de color debo usar en CSS?
Los tres formatos son válidos en CSS. HEX es el más compacto, RGB es intuitivo para mezclar colores, y HSL es ideal para crear variaciones de color ajustando la luminosidad o la saturación.
-
¿Soporta canal alfa/transparencia?
La versión actual convierte colores opacos. El soporte para canales alfa (RGBA, HSLA, HEX de 8 dígitos) está planificado para una actualización futura.
-
¿Puedo usar el selector de color en móvil?
Sí, la entrada de color usa el selector de color nativo en todos los dispositivos, incluidos los navegadores móviles.
Los sistemas de color en la web
El color en la web puede expresarse de múltiples maneras, y cada formato tiene su propio modelo matemático para describir el mismo fenómeno visual. Entender cuándo y por qué usar cada uno marca la diferencia entre un diseño intuitivo de mantener y uno difícil de escalar.
HEX: el formato más reconocible
El formato hexadecimal (#FF5733) es el más usado en diseño web por su compacidad. Cada par de dígitos hexadecimales representa la intensidad de uno de los tres canales de color: rojo (FF), verde (57) y azul (33), en un rango de 00 (mínimo) a FF (255, máximo).
Existe también una versión abreviada de tres dígitos (#F53) cuando ambos dígitos de cada canal son iguales (#FF5533 → #F53). Se usa ampliamente en hojas de estilo, paletas de diseño y en la comunicación entre diseñadores y desarrolladores.
Cuándo usarlo: al copiar colores de herramientas de diseño como Figma o Sketch, al definir colores en variables CSS, y cuando la brevedad importa.
RGB: el modelo de luz aditiva
RGB (rgb(255, 87, 51)) describe el color como la mezcla de luz roja, verde y azul. Es el modelo nativo de las pantallas digitales, ya que cada píxel está físicamente compuesto por subpíxeles de esos tres colores.
Los valores van de 0 a 255 por canal. rgb(0, 0, 0) es negro puro (sin luz), rgb(255, 255, 255) es blanco puro (luz máxima de los tres canales).
Cuándo usarlo: cuando necesitas manipular colores programáticamente (interpolación, mezcla, efectos dinámicos) o cuando trabajas con canvas y WebGL.
HSL: el modelo más intuitivo para diseñadores
HSL (hsl(12, 100%, 60%)) describe el color en términos humanos:
- Matiz (Hue): el "color" en sí, expresado como un ángulo en la rueda de color (0°–360°). 0° es rojo, 120° es verde, 240° es azul.
- Saturación (Saturation): qué tan vívido es el color (0% = gris, 100% = color puro).
- Luminosidad (Lightness): qué tan claro u oscuro es (0% = negro, 50% = color normal, 100% = blanco).
Cuándo usarlo: HSL brilla cuando necesitas crear variaciones de un mismo color. Para generar una paleta de tonos de azul, simplemente mantén el matiz fijo y varía la luminosidad. Esto es prácticamente imposible de hacer intuitivamente con HEX o RGB.
Comparación práctica
| Situación | Formato recomendado |
|---|---|
| Definir colores de marca | HEX |
| Animaciones y transiciones | RGB o HSL |
| Crear paletas de tonos | HSL |
| APIs y código heredado | RGB |
| Variables CSS para temas | HSL |
El canal alfa: transparencia
Los tres formatos admiten un cuarto canal para la transparencia: rgba(255, 87, 51, 0.5), hsla(12, 100%, 60%, 0.5) o el formato HEX de 8 dígitos #FF573380. El valor alfa va de 0 (completamente transparente) a 1 (completamente opaco) en RGB/HSL, o de 00 a FF en HEX.