Convertidor de color

¿Qué es el convertidor de color?

El convertidor de color es una herramienta online para pasar colores entre HEX, RGB y HSL en tiempo real. Resulta útil cuando trabajas con diseño web, prototipos de interfaz, hojas de estilo CSS y sistemas de diseño que necesitan mantener el mismo color en varios formatos sin rehacer cálculos a mano.

Solo tienes que introducir un valor o elegir un color con el selector visual para ver al instante su equivalencia en los demás formatos. Además, puedes copiar cada salida o el código CSS listo para pegar, revisar colores recientes y reutilizar una base cromática coherente en proyectos de frontend, branding y accesibilidad.

Cuándo conviene usar este convertidor

• Desarrollo web – Pasar colores de una maqueta a HEX, RGB o HSL para variables CSS, estilos inline y componentes de interfaz
• Diseño UI/UX – Ajustar brillo o saturación sin perder el matiz base al preparar estados hover, fondos o botones
• Sistemas de diseño y branding – Documentar el mismo color de marca en varios formatos para equipos de diseño y frontend
• Accesibilidad – Revisar valores exactos antes de calcular contraste entre texto y fondo según WCAG
• Trabajo entre herramientas – Mantener consistencia entre Figma, Photoshop, Illustrator y el código final
• Presentaciones y materiales visuales – Copiar rápidamente colores para slides, piezas comerciales y documentos compartidos

Funciones principales

• Conversión en tiempo real – Introduce un valor en HEX, RGB o HSL y las demás salidas se actualizan al momento, sin pulsar un botón extra.
• Selector visual integrado – Elige un color desde el navegador y comprueba enseguida cómo queda antes de copiar el código.
• Copia directa por formato – Copia el valor exacto en HEX, RGB u HSL, o llévate el fragmento CSS preparado para pegar en tu stylesheet.
• Historial de colores recientes – Los últimos colores se guardan localmente en el navegador para reutilizarlos durante una sesión de diseño o revisión.
• Color aleatorio para explorar ideas – Genera variaciones rápidas cuando necesitas inspiración para una paleta o un estado visual.
• Entradas fáciles de validar – Los campos controlan rangos válidos para RGB y HSL, y aceptan HEX largo o abreviado para acelerar el trabajo.

Cómo usar el convertidor

1. Elige un punto de partida – Usa el selector de color o escribe directamente un valor HEX, RGB o HSL que ya conozcas.
2. Revisa la vista previa – Comprueba en el panel superior si el color corresponde a la tonalidad que necesitas.
3. Consulta los formatos equivalentes – El convertidor mostrará el mismo color en HEX, RGB y HSL para que elijas la salida más útil para tu flujo.
4. Copia y reutiliza – Pulsa el botón de copiar del formato que necesites o usa «Copiar CSS» para pegarlo directamente en el código.

Cómo leer HEX, RGB y HSL

HEX

HEX es el formato más habitual en la web y se escribe como #RRGGBB. Cada pareja representa la intensidad de rojo, verde y azul en hexadecimal, por eso encaja muy bien en hojas de estilo, design tokens y documentación de marca.

• Ejemplos: #D4AF37 para un dorado, #FF5733 para un naranja vivo y #3498DB para un azul intenso
• Forma abreviada: Cuando los pares se repiten, puedes resumir #FF0000 como #F00
• Cuándo usarlo: CSS, variables de diseño, snippets rápidos y comunicación entre equipos técnicos

RGB

RGB expresa la cantidad de rojo, verde y azul en una escala de 0 a 255. Es muy práctico cuando quieres interpretar un color por canales, automatizar ajustes desde JavaScript o comparar datos exportados desde herramientas de diseño.

• Ejemplos: rgb(212, 175, 55), rgb(255, 255, 255) y rgb(0, 0, 0)
• Lógica: 0 en todos los canales produce negro; 255 en todos produce blanco
• Cuándo usarlo: Animaciones, cálculos programáticos, canvas y efectos que dependen de los canales

HSL

HSL organiza el color por matiz, saturación y luminosidad. Suele ser el formato más cómodo cuando necesitas aclarar, oscurecer o desaturar un tono sin perder su familia cromática.

• Ejemplos: hsl(46, 67%, 52%) para dorado y hsl(0, 100%, 50%) para rojo puro
• Matiz (H): se mueve en una rueda de 0° a 360°
• Saturación (S): marca la intensidad del color de 0% a 100%
• Luminosidad (L): define si el color se acerca al negro, al tono puro o al blanco

Consejos para elegir y reutilizar colores

• Deriva variantes de marca con HSL – Mantén el mismo matiz y ajusta solo la luminosidad para crear estados hover, fondos suaves o contrastes secundarios.
• Guarda referencias frecuentes – Si estás revisando una landing o un sistema de componentes, usa el historial para comparar tonos sin volver a teclearlos.
• Valida contraste antes de publicar – Un color bonito no siempre es legible; comprueba la diferencia entre texto y fondo antes del QA final.
• Trabaja con el formato que necesita tu equipo – Diseño puede preferir HSL para explorar variaciones, mientras que frontend suele cerrar el trabajo en HEX o RGB.

Detalles

Los resultados del convertidor de color se calculan a partir de los valores que introduces y del formato desde el que partes.

Si el color forma parte de una guía de marca o de una auditoría de accesibilidad, conviene contrastarlo también con la referencia oficial del proyecto.

Preguntas frecuentes