Conversor de colores
Convierte colores entre HEX, RGB y HSL con vista previa en vivo y copia en un clic.
HEX (#4f46e5) y RGB (79, 70, 229) son dos formas de escribir el mismo color: HEX es compacto y es el habitual en CSS; RGB es explícito y se lee mejor en las herramientas de diseño. Esta página muestra además el HSL, el formato pensado para ajustar un color a ojo.
Respuestas rápidas
¿A qué equivale #FF5733 en RGB y en HSL?
A rgb(255, 87, 51) y a hsl(11, 100%, 60%): FF es 255 en decimal, 57 es 87 y 33 es 51.
Es un naranja rojizo muy saturado, muy usado como color de botones y llamadas a la acción.
¿Cómo paso el color índigo #4F46E5 a RGB?
Da rgb(79, 70, 229) —4F = 79, 46 = 70, E5 = 229— y en HSL es hsl(243, 75%, 59%).
Es el color de ejemplo de esta página: al abrirla, la vista previa muestra exactamente ese tono.
¿Qué significa un HEX de 3 dígitos como #F00?
Es la forma abreviada de #FF0000: cada dígito se duplica, así que #F00 y rgb(255, 0, 0) son el mismo rojo.
Esta herramienta trabaja siempre con la forma completa de 6 dígitos, que es la que aceptan todos los navegadores y editores.
Cómo se usa
- Escribe un código HEX o los valores RGB: el otro formato se actualiza en vivo, junto con el equivalente HSL.
- Mira la vista previa al instante en la franja de color.
- Pulsa «Color aleatorio» para inspirarte o «Copiar HEX» para llevarte el código.
Acerca de esta herramienta
En #RRGGBB, cada pareja de dígitos hexadecimales es un canal: #FF5733 significa rojo = FF (255), verde = 57 (87) y azul = 33 (51). Convertir de HEX a RGB es pasar de base 16 a base 10 tres veces, y al revés, de base 10 a base 16 rellenando con ceros hasta dos dígitos.
El HSL es la tercera vista, la humana: tono (0–360°, la posición en la rueda de color), saturación (0–100 %, de gris a vivo) y luminosidad (0–100 %, de negro a blanco). Por eso resulta tan cómodo para variantes: «un poco más claro» es solo subir la luminosidad, mientras que en RGB habría que recalcular los tres canales. Todo se convierte al instante en tu navegador, sin subir nada.
Preguntas frecuentes
¿Qué diferencia hay entre HEX y RGB?
Ninguna de significado: #FF0000 y rgb(255, 0, 0) son el mismo rojo. HEX es más corto; RGB se lee mejor de un vistazo.
¿Para qué sirve el HSL si ya tengo HEX y RGB?
Para crear variantes sin calculadora: mantén el tono y la saturación y sube la luminosidad para el estado hover, o bájala para un tono más oscuro del mismo color.
¿Por qué se ven códigos HEX de 3 y de 6 dígitos?
El de 3 es una abreviatura en la que cada dígito vale doble: #F00 = #FF0000. Aquí se usa siempre la forma de 6.
¿El color se verá igual en todas las pantallas?
Los números son exactos en cualquier pantalla, pero cada monitor renderiza con ligeras diferencias de brillo y gama; por eso la vista previa ayuda, sin sustituir una prueba en el dispositivo final.
¿Se sube algo a algún servidor?
No: la conversión se hace entera en tu navegador.
Más herramientas en español
Generador de hash
Genera hashes SHA-256, SHA-512, SHA-384, SHA-1 y MD5 al instante, también de archivos, sin subir nada.
Formateador JSON
Formatea, minifica y valida JSON con un clic, con mensajes de error claros en español.
Decodificador JWT
Decodifica un token JWT sin la clave: mira su cabecera y su carga útil, con exp e iat como fechas legibles.
Generador de slugs
Convierte cualquier título en un slug limpio para URL: sin acentos, sin espacios y listo para pegar.
OCR: imagen a texto
Extrae el texto de fotos y capturas de pantalla directamente en tu navegador, sin subir la imagen a ningún servidor.
Color Converter (HEX ↔ RGB)
Convert HEX to RGB and back, with live preview.