Convertidor de Colores

About Convertidor de Colores

La conversión de formato de color es una de las microtareas más frecuentes en el desarrollo web y el diseño UI/UX, y es sorprendentemente complicada de hacer con precisión a mano. HEX, RGB y HSL representan los mismos colores pero en sistemas de números completamente diferentes, y la conversión entre ellos requiere trigonometría en el caso de RGB a HSL. Sin embargo, cada herramienta en el flujo de trabajo de diseño y desarrollo tiene su propio formato preferido: las hojas de estilo CSS usan códigos HEX (#ff6b35), las herramientas de diseño como Figma y Adobe XD usan RGB (rgb(255, 107, 53)), y la manipulación programática de colores (oscurecer un botón al pasar el cursor, generar paletas de colores, calcular ratios de contraste) es mucho más natural en HSL porque el tono, la saturación y la luminosidad son perceptivamente significativos. HEX (notación de color hexadecimal) codifica R, G y B como dos dígitos hexadecimales cada uno: #RRGGBB. Los valores van de #000000 (negro) a #ffffff (blanco). RGB (Rojo, Verde, Azul) expresa los mismos valores como números decimales de 0 a 255. HSL (Tono, Saturación, Luminosidad) describe un color por su posición en la rueda de colores (0°–360°), su saturación (0%–100%) y su luminosidad percibida (0%–100%). HSL es especialmente útil para hacer ajustes de familia de colores: para obtener una versión más oscura de un color, simplemente reduce el valor L; para desaturarlo, reduce S; para cambiar la familia de tono, ajusta H. Este convertidor de colores online gratuito acepta cualquier valor HEX, RGB o HSL y muestra instantáneamente el equivalente en los tres formatos, además de una vista previa de muestra de color en vivo para que puedas ver el color mientras trabajas con los números. También acepta colores CSS con nombre (tomato, steelblue, goldenrod, etc.). Toda la conversión se ejecuta localmente en tu navegador sin necesidad de servidor.

How to Use Convertidor de Colores

1. Introduce un Valor de Color: Escribe un código HEX (con o sin el prefijo #), un valor RGB, un valor HSL o un color CSS con nombre en el campo de entrada. El convertidor detecta el formato automáticamente.
2. Ve Todos los Formatos Equivalentes: Los tres equivalentes de formato (HEX, RGB, HSL) se muestran simultáneamente junto con una muestra de color en vivo. Edita cualquier campo para ajustar el color.
3. Copia el Formato que Necesitas: Haz clic en el botón de copia junto al formato que necesitas: HEX para CSS, RGB para herramientas de diseño, HSL para manipulación programática, y pégalo directamente en tu trabajo.

Key Features

• HEX ↔ RGB ↔ HSL — Todas las Direcciones: Introduce cualquier color en HEX (#rrggbb), RGB (r, g, b como valores 0–255) o HSL (h en grados, s y l como porcentajes) y ve los tres formatos simultáneamente. Edita cualquier campo y todos los demás se actualizan al instante.
• Vista Previa de Muestra de Color en Vivo: Una muestra de color en tiempo real muestra el color real mientras introduces o editas valores. Esencial para verificar que el número que escribiste coincide con el color que pretendías.
• Soporte de Colores CSS con Nombre: Escribe cualquier color CSS con nombre (por ejemplo, 'tomato', 'steelblue', 'goldenrod', 'mediumseagreen') y el convertidor lo resuelve a sus equivalentes HEX, RGB y HSL.
• Copia con Un Clic: Copia cualquier valor de formato (HEX, cadena rgb() o cadena hsl()) a tu portapapeles con un solo clic, listo para pegarlo directamente en CSS, Tailwind, herramientas de diseño o documentación.
• Formato de Salida Listo para CSS: Los valores de salida están formateados como cadenas CSS válidas: #ff6b35, rgb(255, 107, 53) y hsl(18, 100%, 60%); pégalos directamente en tu hoja de estilos sin reformatear.
• 100% en el Navegador: Toda la conversión usa fórmulas matemáticas estándar implementadas en JavaScript. Sin solicitudes al servidor. Funciona sin conexión después de la carga inicial de la página.

Benefits

• Elimina las Matemáticas Manuales de Color: La conversión RGB a HSL requiere cálculo trigonométrico. La conversión HEX a RGB requiere conversión de base 16. Esta herramienta hace la conversión instantánea y exacta, eliminando el riesgo de errores de uno en uno en el cálculo manual.
• Combina Colores entre Herramientas de Diseño y Desarrollo: Figma, Sketch, Adobe XD, CSS y Tailwind CSS usan por defecto diferentes formatos de color. Tener conversión instantánea entre ellos elimina la fricción de cambio de formato al mover un color de una herramienta de diseño a una hoja de estilos.
• Comprende las Relaciones de Color con HSL: HSL hace visibles las relaciones de color en los números: dos colores con el mismo tono (H) están en la misma familia de colores. Ajusta L para crear variantes claras/oscuras. Ajusta S para desaturar. Esto es imposible de ver en HEX o RGB.
• Búsqueda Instantánea de Colores con Nombre: CSS tiene más de 140 colores con nombre, muchos de los cuales tienen nombres memorables pero valores HEX oscuros. Escribe el nombre para obtener sus valores numéricos de inmediato.

Supported Formats & Capabilities

• Entrada: HEX (#rrggbb o #rgb), RGB (0–255 cada canal), HSL (0–360°, 0–100%, 0–100%), colores CSS con nombre
• Salida: HEX, cadena CSS rgb(), cadena CSS hsl()

Common Problems & Solutions

Mi color HEX tiene 3 dígitos. ¿El convertidor maneja HEX abreviado?

Sí. El HEX abreviado (#f60 en lugar de #ff6600) es compatible. Cada dígito abreviado se expande duplicándolo: #f60 se expande a #ff6600.

¿Por qué mi conversión RGB a HSL muestra diferencias de redondeo respecto a otras herramientas?

El tono HSL se calcula usando trigonometría e implica una división que puede producir un redondeo de punto flotante ligeramente diferente. Las diferencias de 1° en el tono o 0,1% en la saturación/luminosidad entre herramientas son artefactos de redondeo normales, no errores.

¿Cómo convierto valores RGBA (con transparencia alfa)?

Este convertidor maneja los canales de color RGB/HSL estándar sin alfa. Para RGBA, añade el canal alfa por separado en tu CSS: rgba(255, 107, 53, 0.5). Los valores H/S/L del propio color no se ven afectados por el alfa.

Escribí un color CSS con nombre y obtuve un error. ¿Por qué?

La herramienta admite los más de 140 colores CSS con nombre definidos en la especificación CSS Color Level 4. Los nombres de color deben escribirse correctamente y sin comillas. Los errores tipográficos o los nombres de otros sistemas (por ejemplo, Pantone o RAL) no son reconocidos.

Pro Tips & Best Practices

• Al construir una paleta de colores, empieza en HSL. Elige el tono de tu marca (valor H), luego genera variantes claras/oscuras/saturadas/desaturadas variando sistemáticamente L y S mientras mantienes H constante. Esto produce una paleta perceptualmente coherente.
• Tailwind CSS v3+ admite valores arbitrarios en formato HEX directamente en las clases de utilidad: bg-[#ff6b35]. Usa este convertidor para obtener rápidamente el código HEX de cualquier color que quieras usar con Tailwind.
• Para la comprobación del ratio de contraste de accesibilidad WCAG, necesitas los valores RGB. Convierte aquí tus colores de primer plano y fondo a RGB, luego usa una calculadora de ratio de contraste para verificar que cumplen el mínimo de 4,5:1 para texto normal (WCAG AA).
• La función CSS hsl() es extremadamente útil para la temática: define tu color de marca como hsl(220, 90%, 55%), luego usa variables CSS con valores L y S modificados para estados de hover, estados desactivados y variantes de modo oscuro, todo permaneciendo dentro de la misma familia de tono.

Privacy & Data Security

Todos los cálculos de conversión de color se realizan completamente en tu navegador usando fórmulas matemáticas estándar (los algoritmos de la especificación CSS Color). No se transmiten datos a ningún servidor.

Frequently Asked Questions

¿Qué formatos de color admite este convertidor?

La herramienta convierte entre HEX (#rrggbb), RGB (rgb(r, g, b) con valores 0–255) y HSL (hsl(h, s%, l%)). Los colores CSS con nombre como 'tomato' o 'steelblue' también se aceptan como entrada.

¿HEX admite transparencia o alfa?

El HEX de 8 dígitos admite alfa (#rrggbbaa). Este convertidor maneja el HEX estándar de 6 dígitos. Para la transparencia, añade el canal alfa por separado en la notación CSS RGBA u HSLA.

¿Es este convertidor de color matemáticamente preciso?

Sí. Las conversiones HEX y RGB son exactas. La conversión HSL usa las fórmulas estándar de la especificación CSS Color. Las diferencias de redondeo menores (< 1°) en comparación con otras herramientas son un comportamiento normal de punto flotante.

¿Cuál es la diferencia entre HSL y HSB/HSV?

HSL (Tono, Saturación, Luminosidad) y HSB/HSV (Tono, Saturación, Brillo/Valor) son modelos de color diferentes. Con saturación completa, HSL tiene una gama media más clara que HSB. CSS usa HSL. Photoshop usa HSB. Este convertidor funciona con HSL.

¿Por qué los diseñadores prefieren HSL para la manipulación de colores?

HSL separa las tres dimensiones perceptivamente intuitivas del color: qué color es (H), cuán vívido es (S) y cuán claro u oscuro es (L). Esto hace que HSL sea ideal para ajustes programáticos como generar matices, sombras y familias de colores.

¿Cuántos colores CSS con nombre existen?

La especificación CSS Color Level 4 define 148 colores con nombre. Van desde los obvios (rojo, azul, verde) hasta los más inusuales (rebeccapurple, papayawhip, blanchedalmond).

¿Puedo convertir colores CMYK con esta herramienta?

No. Esta herramienta convierte entre HEX, RGB y HSL, los tres formatos usados en CSS y diseño web. CMYK se usa en el diseño de impresión (Pantone, impresión offset) y requiere un convertidor separado.

Related Utility Utilities