Conversor de colores (HEX, RGB, HSL)

Los flujos de trabajo de diseño y desarrollo combinan varias formas de describir el mismo color en pantalla. HEX (#RRGGBB) es compacto en CSS y paneles de inspección Figma. RGB enumera los canales rojo, verde y azul del 0 al 255, el idioma nativo de los monitores y las API de lienzo. HSL expresa el tono en una rueda de 0 a 360°, la saturación como de 0 a 100 % de viveza y la luminosidad como de 0 a 100 % de brillo, lo que a muchos diseñadores les resulta más fácil al ajustar los tintes sin que el tono se desvíe.

Los tres formatos de esta herramienta se asignan a la misma gama sRGB cuando se convierten correctamente. HEX y RGB son inversas exactas con una precisión de 8 bits. HSL utiliza matemáticas de punto flotante internamente; Después de la conversión de ida y vuelta, es posible que vea que los valores del canal difieren en un paso, lo cual es normal en los flujos de trabajo de edición HSL.

Cambie el control segmentado de entrada entre HEX y RGB dependiendo de lo que proporcione su transferencia. En modo HEX, escriba con o sin hash: #3B82F6 y 3B82F6 funcionan, al igual que la taquigrafía de tres dígitos #3BF ampliada a #33BBFF. En modo RGB, ingrese los canales por separado; la herramienta genera HEX en mayúsculas más una cadena CSS rgb() y un desglose HSL.

Ejemplo resuelto con el campo HEX predeterminado #3B82F6: rojo = 0x3B = 59, verde = 0x82 = 130, azul = 0xF6 = 246. El resumen muestra RGB(59, 130, 246), un azul saturado común en las paletas de la interfaz de usuario de Tailwind. HSL aterriza cerca de 217° de tono, 91% de saturación, 60% de luminosidad. Cambie al modo RGB con esos valores de canal y obtendrá el mismo HEX.

HSL es útil al crear tokens de diseño: aumenta la luminosidad para que #3B82F6 esté en estado flotante sin elegir un nuevo tono. Baja saturación para fondos apagados. Para temas programáticos, muchos equipos almacenan HSL en propiedades personalizadas de CSS porque la sintaxis alfa `hsl(217 91% 60% / 0.5)` se lee claramente.

Los errores comunes incluyen asumir que HEX incluye alfa (aquí no se admite #RRGGBBAA de ocho dígitos), mezclar 0–1 RGB normalizado de algunas API de gráficos sin multiplicar por 255 y comparar muestras Pantone impresas con sRGB hexadecimal en una pantalla no calibrada. Los colores web son sRGB de luz emitida; la conversión de impresión CMYK necesita un perfil separado.

La taquigrafía HEX de tres dígitos duplica cada mordisco: #ABC se convierte en #AABBCC. Los caracteres no válidos o la longitud incorrecta devuelven un título de guión que solicita un color válido como #3B82F6. Los colores CSS con nombre (rebeccapurple, cornflowerblue) no se analizan; primero conviértalos a HEX en DevTools y luego péguelos aquí.

Límites: solo sRGB opaco; no CMYK, Lab, Display-P3 ni alfa hexadecimal de ocho dígitos. La simulación daltónica y la comprobación del contraste pertenecen a la calculadora de relación de contraste. Las pantallas WCG pueden reproducir azules saturados de manera diferente a la vista previa sRGB en monitores estándar.