Cómo usar el conversor de color
- Elige HEX, RGB o HSL como formato de origen.
- Introduce todos los canales: HEX admite 3 o 6 dígitos, RGB enteros de 0 a 255 y HSL un tono numérico con porcentajes de 0 a 100.
- Elige el destino y pulsa Convertir color. El código y la muestra aparecen juntos.
- Copia el resultado o intercambia los formatos. Editar cualquier campo borra el resultado anterior hasta convertir de nuevo.
Tres formas de describir el mismo color web
HEX y RGB codifican los canales de luz rojo, verde y azul. #3366FF equivale a 51, 102 y 255; #0F8 se expande a #00FF88. La salida HEX usa siempre seis dígitos en mayúsculas.
HSL usa tono, saturación y luminosidad. El tono recorre el círculo cromático, la saturación va de gris a color vivo y la luminosidad va de negro a blanco. Es práctico para ajustar colores relacionados.
Direcciones y fórmulas
HEX a RGB convierte cada par hexadecimal en 0–255; RGB a HEX hace la operación inversa. RGB a HSL normaliza los canales y obtiene máximo, mínimo, luminosidad, saturación y sector del tono. HSL a RGB calcula croma, sector y desplazamiento.
Se admiten HEX a RGB, RGB a HEX, HEX a HSL, HSL a HEX, RGB a HSL y HSL a RGB. HEX y HSL pasan internamente por el RGB equivalente.
Rangos, ciclo del tono y precisión
- HEX admite exactamente 3 o 6 dígitos y # opcional; no admite alfa, nombres ni expresiones CSS.
- RGB exige enteros de 0 a 255 y no recorta entradas inválidas.
- Saturación y luminosidad van de 0% a 100%. El tono es periódico: 420° equivale a 60° y −120° a 240°.
- RGB y HEX son enteros; HSL muestra hasta dos decimales. Negro, blanco y gris usan tono 0° cuando la saturación es 0%.
- La muestra no sustituye calibración de pantalla, perfiles de impresión ni una comprobación de contraste.
Usos y salida
- Pasa un token HEX a canales RGB para código o documentación.
- Convierte RGB a HSL antes de ajustar un estado hover, borde o fondo relacionado.
- Comprueba la muestra y copia un valor CSS; el cálculo es local y no envía el color a estadísticas.
- No crea paletas, no extrae colores de imágenes y no ofrece perfiles CMYK.
Direcciones de conversión HEX, RGB y HSL
Elige el par que coincide con el código disponible y el resultado necesario. Cada dirección muestra los nombres completos, la regla y un ejemplo de entrada a resultado.
HEX hexadecimal a RGB rojo, verde y azul
Separa el HEX de seis dígitos en pares y convierte cada par a un entero decimal. Ejemplo: #3366FF da 0x33 = 51, 0x66 = 102 y 0xFF = 255; resultado: rgb(51, 102, 255). #0F8 se amplía primero a #00FF88.
RGB rojo, verde y azul a HEX hexadecimal
Convierte cada canal entero de 0–255 en dos dígitos hexadecimales y únelos tras #. Ejemplo: rgb(255, 87, 51) produce FF, 57 y 33, es decir #FF5733. Los canales menores que 16 reciben un cero inicial.
HEX hexadecimal a HSL tono, saturación y luminosidad
Primero decodifica HEX a RGB, normaliza los canales y calcula HSL con el máximo, el mínimo y su diferencia. Ejemplo: #3366FF se convierte en hsl(225deg, 100%, 60%).
HSL tono, saturación y luminosidad a HEX hexadecimal
El tono elige el sector cromático; saturación y luminosidad generan RGB, que se redondea y codifica como HEX. Ejemplo: hsl(60deg, 100%, 50%) da #FFFF00. 420° da lo mismo porque el tono se repite cada 360°.
RGB rojo, verde y azul a HSL tono, saturación y luminosidad
Normaliza RGB, busca máximo y mínimo, usa su punto medio para luminosidad y la diferencia para saturación y tono. Ejemplo: rgb(128, 128, 128) da aproximadamente hsl(0deg, 0%, 50.2%); con saturación cero el tono no cambia el gris.
HSL tono, saturación y luminosidad a RGB rojo, verde y azul
Calcula el croma, colócalo en el sector del tono y añade el desplazamiento de luminosidad antes de escalar a 0–255. Ejemplo: hsl(240deg, 100%, 50%) da rgb(0, 0, 255). Los canales finales son enteros.
Ejemplos de conversión
Ejemplo 1: HEX a RGB y HSL
#3366FF produce rgb(51, 102, 255). Tras convertir, cambiar el destino a HSL muestra hsl(225deg, 100%, 60%) sin alterar el azul.
Ejemplo 2: ciclo HSL a HEX
H = 420, S = 100 y L = 50 equivale a 60°. El resultado es #FFFF00 o rgb(255, 255, 0): amarillo.
Preguntas frecuentes
¿Admite #RGB abreviado?
Sí. #0F8 se expande a #00FF88. No se admiten formatos alfa de cuatro u ocho dígitos.
¿Por qué el gris tiene tono 0°?
Con saturación 0% cualquier tono da el mismo gris; se usa 0° como valor estable.
¿Cuándo se actualiza al cambiar de formato?
Antes de convertir o después de editar, queda vacío. Tras una conversión correcta, cambiar solo el formato actualiza de inmediato.
¿El viaje de ida y vuelta conserva los decimales HSL?
Conserva el color mediante canales RGB enteros; los números HSL pueden variar ligeramente.
¿Sirve para impresión o contraste?
No. CMYK, calibración y contraste WCAG requieren herramientas y contexto separados.