Conversor de color
Introduce un código de color hexadecimal para ver sus equivalentes en RGB y HSL con los valores individuales de los canales rojo, verde y azul.
Cómo usar este convertidor de color
- Introduce el código de color hexadecimal
Escribe un código hexadecimal de 6 dígitos en el campo de código de color Hex (ej. FF6B35 o 00FF88). Omite el símbolo #.
- Lee los valores RGB
Los resultados de los canales Rojo, Verde y Azul muestran los valores de 0 a 255 para cada componente.
- Consulta el resultado HSL
Revisa el resultado HSL para el tono (0–360°), la saturación y la luminosidad; útil para realizar ajustes de color.
Cómo funciona este convertidor de color
Esta herramienta convierte un código de color hexadecimal en representaciones RGB (rojo, verde, azul) y HSL (tono, saturación, luminosidad). Cada par hexadecimal se asigna a un valor de canal de 8 bits (0–255), y la conversión HSL utiliza matemáticas estándar de espacio de color.
R = hex[0:2] → decimal; G = hex[2:4] → decimal; B = hex[4:6] → decimal Hex #FF6B35 → RGB(255, 107, 53) → HSL(16, 100%, 60%).
Hex 000000 → RGB(0, 0, 0) → HSL(0, 0%, 0%) — negro puro.
Hex FFFFFF → RGB(255, 255, 255) → HSL(0, 0%, 100%) — blanco puro. Hex 808080 → RGB(128, 128, 128) → HSL(0, 0%, 50%) — gris medio.
- ✓ La entrada es un código de color hexadecimal válido de 6 dígitos.
- ✓ El canal alfa no es compatible en esta versión.
- La conversión CMYK requiere un perfil de color y no está incluida aquí.
Entender los modelos de color
HEX, RGB y HSL son formas diferentes de describir el mismo color. HEX codifica RGB como una cadena hexadecimal de 6 dígitos: cada par de caracteres es un canal de 8 bits (0–255). RGB expresa los mismos valores como tres números, los colores primarios aditivos que emiten las pantallas. HSL (Tono, Saturación, Luminosidad) es un modelo cilíndrico: el tono es el ángulo en la rueda de colores (0° rojo, 120° verde, 240° azul), la saturación es la intensidad del color y la luminosidad es el brillo. Los diseñadores suelen preferir HSL al ajustar colores mediante programación: cambiar solo la luminosidad oscurece o aclara sin variar el tono, y ajustar la saturación modifica la intensidad.
Casos de uso para desarrolladores en la conversión de colores
Los desarrolladores convierten colores al crear sistemas de diseño, implementar temas, generar paletas de colores y depurar CSS. Los tokens de diseño suelen almacenar colores en hexadecimal; convertirlos a RGB o HSL permite realizar cálculos en tiempo de ejecución, como superposiciones de opacidad o comprobaciones de contraste de accesibilidad. Los selectores de temas pueden necesitar derivar variantes más claras u oscuras de un color base usando HSL. Las herramientas de accesibilidad automatizadas convierten colores para calcular los ratios de luminancia y contraste. Al depurar errores de diseño o de temas, ver un valor hexadecimal como RGB o HSL ayuda a identificar qué canal falla. La conversión de colores también se utiliza en la visualización de datos, bibliotecas de gráficos y personalización dinámica de la interfaz de usuario.
Preguntas frecuentes
¿Puedo introducir un código hexadecimal de 3 dígitos?
Actualmente, esta herramienta requiere un código de 6 dígitos. Para abreviaturas de 3 dígitos como F60, amplíelo primero a FF6600.
¿Qué es HSL?
HSL significa Hue (Matiz), Saturation (Saturación) y Lightness (Luminosidad). Es una forma alternativa de describir colores que algunos diseñadores consideran más intuitiva que el RGB.