Qué hace el Convertidor de Color
Elige un color en cualquier formato estándar —HEX, RGB, HSL o HSV— y el Convertidor de Color de Microapp te muestra los valores equivalentes en los otros tres formatos, uno al lado del otro. Más una muestra de previsualización en vivo para que veas exactamente con qué color trabajas. Todo en tu navegador, al instante.
Diseñadores y desarrolladores necesitan traducir entre formatos constantemente: una guía de marca usa HEX, tu código quiere RGB con opacidad, un sistema de diseño usa tokens HSL, tu editor de imágenes exporta RGBA. Hacer conversiones a mano es tedioso y propenso a errores. Esta es la versión siempre correcta.
Cómo usarlo
- Escribe o pega un valor de color en cualquiera de los cuatro campos (HEX, RGB, HSL, HSV).
- Los otros tres campos se actualizan al instante con los equivalentes. La muestra previa enseña el color real.
- Usa el selector para elección visual: arrastra el cuadrado de color o el deslizador de matiz, y las cuatro salidas se actualizan en tiempo real.
- Pulsa "Copiar" junto a cualquier formato para llevarlo al portapapeles.
HEX:
#1B6B45RGB:
rgb(27, 107, 69)HSL:
hsl(150, 60%, 26%)HSV:
hsv(150, 75%, 42%)El mismo color en cuatro formatos. Usa el que encaje con tu herramienta.
Los cuatro formatos, explicados
HEX. Seis caracteres hexadecimales que representan rojo, verde y azul (dos por cada uno). #1B6B45 significa R=0x1B (27), G=0x6B (107), B=0x45 (69). El formato más común en diseño web: cada CSS está lleno de HEX. Los atajos de tres caracteres (#1B6) duplican cada carácter, pero solo funcionan con colores cuyos dígitos hex estén emparejados.
RGB. Tres enteros de 0 a 255 que representan los mismos rojo, verde y azul. rgb(27, 107, 69) es idéntico a #1B6B45: los mismos números en decimal. RGB tiene una variante con alfa, RGBA, para transparencia parcial: rgba(27, 107, 69, 0.5) es un verde semitransparente.
HSL. Matiz (0-360 grados en una rueda de color), Saturación (0-100% de intensidad) y Luminosidad (0-100%, de negro a blanco). hsl(150, 60%, 26%) significa un matiz verde-cian, moderadamente saturado, bastante oscuro. HSL es intuitivo para diseñadores: puedes ajustar "hacerlo más oscuro" bajando la Luminosidad sin afectar al matiz.
HSV. Matiz, Saturación y Valor (a veces llamado HSB). Similar a HSL, pero el Valor representa el brillo desde negro hasta el color puro, no de negro a blanco. HSV es lo que usan la mayoría de editores de imagen (Photoshop, Figma) en sus selectores de color.
Cuándo usar cada formato
| Usa este formato | Cuándo |
|---|---|
| HEX | CSS, guías de diseño, mensajes de Slack, cualquier lugar donde necesites una sola cadena corta |
| RGB / RGBA | Manipulación programática del color, transparencia parcial, animaciones CSS interpolando colores |
| HSL / HSLA | Generación de temas, paletas, aclarar u oscurecer programáticamente un color de marca |
| HSV | Editores de imagen, selectores de color, sitios donde "valor" encaja mejor con el brillo percibido |
Las sutilezas con las que tropiezan los diseñadores
La Luminosidad de HSL y el Valor de HSV NO son lo mismo. Dos colores con Luminosidad HSL del 50% pueden tener brillo muy distinto porque la Luminosidad en HSL es el punto medio entre negro y blanco. Un Valor HSV del 50% significa "la mitad de brillante que la versión pura saturada". Cuando automatices "hazlo un 20% más oscuro", usar HSL da resultados más uniformes entre matices que HSV.
HEX es sRGB por defecto. Cuando escribes #1B6B45, el navegador lo interpreta como sRGB. Las pantallas modernas suelen tener gamas de color más amplias (P3, AdobeRGB) y CSS ya admite especificarlas: color(display-p3 0.106 0.420 0.270). Para la mayoría del trabajo web, quédate con sRGB/HEX; para HDR o trabajo cercano a impresión, los formatos de gama ampliada importan.
El alfa (transparencia) no se aplica a HEX. Casi. El CSS moderno admite HEX de 8 caracteres con alfa en los últimos 2: #1B6B4580 es el verde de marca al 50% de alfa. Los navegadores antiguos ignoran los bytes alfa. RGBA y HSLA tienen un soporte más universal para transparencia.
Tropiezos habituales con colores
Olvidarse del # en HEX. CSS exige #1B6B45, no 1B6B45. El Convertidor de Microapp acepta ambos en la entrada, pero siempre devuelve el #.
Minúsculas vs mayúsculas en HEX. Funcionalmente idénticos (#1b6b45 = #1B6B45). La mayoría de sistemas de diseño estandarizan mayúsculas por legibilidad; a CSS le da igual.
Errores de redondeo al convertir. Pasar HSL → HEX → HSL puede producir un HSL ligeramente distinto por el redondeo a enteros (HEX son enteros; HSL son flotantes). El Convertidor de Microapp usa precisión alta internamente; deberías ver resultados consistentes, pero en código puedes ver deriva tras muchas idas y vueltas.
Herramientas relacionadas
Si solo necesitas convertir HEX a RGB, la herramienta más simple Hex a RGB es más rápida. Para encontrar el nombre de color más cercano a un HEX, el Buscador de Nombre de Color puede identificarlo. Para generar una paleta coordinada alrededor de un color base, mira el Generador de Paleta de Colores.