Conversor de color

Convierte entre HEX, RGB, HSL

Vista previa

HEX

#0ea5e9

RGB

rgb(14, 165, 233)

HSL

hsl(199, 89%, 48%)

Tailwind arbitrary

[#0EA5E9]

Editar RGB

Editar HSL

H (0-360)

S (%)

L (%)

Cómo funciona

Conversor de color — Convierte entre HEX, RGB, HSL. Todo el procesamiento ocurre en tu navegador — sin subida, sin registro, sin email. Gratis para siempre.

Última actualización: 2026-05-06

Editor's note

Lo usamos en los traspasos de diseño más que para cualquier otra cosa. Los diseñadores piensan en tono, saturación y luminosidad: dicen cosas como "un toque más cálido" o "baja la saturación un punto". Los desarrolladores piensan en HEX, porque eso es lo que acaba en la hoja de estilos. Ese desencuentro se come una cantidad deprimente de Slack. Así que pusimos HEX, RGB y HSL en el mismo panel con una muestra en vivo, porque la manera más rápida de zanjar "¿es este el verde azulado correcto?" es apuntar al color juntos.

La salida en valor arbitrario de Tailwind es la parte que no esperábamos usar tanto como la usamos. Empezó como una pequeña comodidad —copiar bg-[#1F2937] de un golpe— y se convirtió silenciosamente en nuestra forma por defecto de enviar tonos puntuales que no merecen una entrada en el config. Nos resistimos a añadir una función de paleta curada: la curaduría de paletas es un problema de diseño real y esta herramienta no es donde se resuelve; aquí solo convertimos lo que ya elegiste.

Acerca de Conversor de color

El Convertidor de Color transforma cualquier valor cromático entre las representaciones HEX, RGB y HSL y previsualiza el resultado lado a lado. También genera una cadena de "valor arbitrario" de Tailwind lista para pegar en una className. La conversión HEX a RGB es una de las tareas más repetidas en front-end y esta herramienta elimina el paso de la calculadora.

Los diseñadores la usan para llevar colores de marca de Figma a CSS, los desarrolladores para depurar un tono inesperado y los revisores de accesibilidad para verificar que un color se lee correctamente expresándolo en HSL y ajustando la luminosidad.

Todo ocurre en tu navegador. Tu paleta, tus colores corporativos y tus prototipos nunca tocan un servidor remoto.

Cómo usar Conversor de color

Haz clic en la muestra de color para abrir el selector del sistema operativo, o escribe un valor HEX directamente.
Usa los campos numéricos de RGB para afinar los canales rojo, verde y azul (de 0 a 255 cada uno).
Cambia al editor HSL para ajustar el tono (0-360), la saturación y la luminosidad: útil cuando quieres una variante un poco más oscura o cálida.
Observa el panel de Previsualización para ver el color renderizado a tamaño completo en tiempo real.
Pulsa los botones de copiar junto a HEX, RGB, HSL o el valor arbitrario de Tailwind para enviarlo al portapapeles.

Casos de uso comunes

Convertir un color de marca del HEX que entrega el diseñador al formato rgb() que espera tu solución CSS-in-JS.
Generar clases arbitrarias de Tailwind como bg-[#1f2937] sin salir del navegador.
Afinar el estado hover de un botón retocando la luminosidad en HSL y manteniendo el tono constante.
Verificar que el código hex de un correo de un stakeholder coincide con el color real que tenía en mente.
Construir una variante en modo oscuro leyendo el HSL de un color claro y reduciendo su luminosidad.

Consejos y errores comunes

HSL es mucho más intuitivo que RGB para ajustar brillo o saturación: edita HSL cuando quieras un "azul un poco más oscuro".
Los códigos hex pueden tener 3 o 6 dígitos. La forma de 3 (#abc) se expande a #aabbcc, así que #f00 y #ff0000 son idénticos.
Al pegar desde Figma cuidado con los bytes alfa al final (por ejemplo #1f2937FF). Quita el alfa antes de pegar si tu herramienta espera hex opaco.
Para chequeos de accesibilidad, genera dos valores HSL y compara las diferencias de luminosidad: un mínimo del 50% en L es una regla segura para texto corrido.

Preguntas frecuentes

¿Qué espacios de color están soportados?

HEX, RGB y HSL. También generamos un formato 'Tailwind arbitrary value' que puedes pegar directamente en class names.

¿Puedo guardar una paleta?

Aún no. Por ahora, usa los botones de copiar para enviar cada valor al portapapeles. Guardar paletas está en el roadmap.

¿Se manejan los canales alfa?

Actualmente no. Nos centramos en colores opacos; el soporte de HEX-A y RGBA está planificado.

¿Por qué RGB(255, 0, 0) y HSL(0, 100%, 50%) producen el mismo color?

Describen el mismo punto del espacio de color desde ejes distintos. RGB define proporciones de mezcla de los primarios de luz; HSL describe tono, saturación y luminosidad. Ambos llevan al rojo puro.

¿Puedo pegar un nombre de color como "crimson" o "rebeccapurple"?

Directamente no. Los navegadores asocian unos 140 nombres CSS a valores hex concretos: busca el nombre en tu editor y pega aquí su equivalente hex.

¿Cómo es la salida del valor arbitrario de Tailwind?

Algo como [#1F2937]. Envuélvelo en cualquier clase de Tailwind como text-[#1F2937], bg-[#1F2937] o border-[#1F2937] para usar el color exacto sin tener que extender tailwind.config.js.