Conversor de Códigos de Color (Todos los Formatos)

Bienvenido al Conversor de Códigos de Color (Todos los Formatos), una herramienta gratuita en línea que convierte cualquier valor de color a todos los formatos comunes a la vez. Pega un código HEX, un triplete RGB, una definición HSL o HSV, un cuarteto CMYK o incluso un nombre de color de CSS, y obtén instantáneamente los valores equivalentes, una muestra de vista previa en vivo, la verificación del contraste de accesibilidad WCAG y explora una paleta de diseñador con colores complementarios, triádicos, análogos, tintes y matices.

¿Por qué utilizar un conversor de color todo en uno?

La mayoría de los conversores de color en línea solo funcionan en una dirección (HEX a RGB o RGB a CMYK), lo que te obliga a encadenar múltiples herramientas cuando necesitas una visión completa. Este conversor acepta todos los formatos comunes en un solo campo, detecta automáticamente el formato que has escrito y devuelve los cinco formatos a la vez con una vista previa en vivo, ahorrándote varios pasos al trabajar entre la web, dispositivos móviles, impresión y herramientas de diseño.

Formatos de entrada admitidos

¿Cuál es la diferencia entre los modelos de color HSL y HSV?

Tanto HSL como HSV describen un color a través de tres canales intuitivos —Tono, Saturación y un tercer valor relacionado con la luminosidad—, pero difieren en ese tercer canal.

• HSL — Tono, Saturación, Luminosidad (Hue, Saturation, Lightness): la luminosidad varía desde el 0% (negro puro) pasando por el 50% (la versión más viva del tono) hasta el 100% (blanco puro). Se prefiere HSL en CSS porque hace que aclarar u oscurecer un color sea simétrico y predecible.
• HSV / HSB — Tono, Saturación, Valor (Brillo) (Hue, Saturation, Value/Brightness): el valor varía desde el 0% (negro puro) hasta el 100% (la versión más plena y saturada del tono). HSV es el modelo que hay detrás de los selectores de color en Photoshop, Figma y la mayoría de las herramientas de diseño de escritorio.

Por ejemplo, un rojo totalmente saturado es hsl(0, 100%, 50%) en HSL, pero hsv(0, 100%, 100%) en HSV. Es el mismo color en dos modelos mentales diferentes, ambos útiles según si piensas como autor de CSS o como pintor.

¿Por qué mis valores CMYK se ven ligeramente diferentes a los del software de impresión?

RGB es un modelo aditivo utilizado por las pantallas, mientras que CMYK es un modelo sustractivo utilizado por las impresoras. La conversión matemática que realiza esta herramienta es una aproximación rápida que no incluye ningún perfil de color ICC, límites de cobertura de tinta o ajustes específicos del papel. Para trabajos de impresión de producción, confía siempre en el perfil CMYK con gestión de color de tu software de diseño (como US Web Coated SWOP v2 o Coated FOGRA39). Utiliza este conversor como una referencia rápida cuando simplemente necesites un cuarteto CMYK que sea "suficientemente cercano" para las primeras conversaciones de diseño.

¿Cómo funciona la verificación de contraste WCAG?

Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen una relación de contraste entre dos colores basada en su luminancia relativa, un modelo de brillo perceptivo que da más peso al verde que al rojo, y más peso al rojo que al azul. La relación va de 1:1 (sin contraste alguno) a 21:1 (negro puro sobre blanco puro).

• AAA — relación ≥ 7:1, cumple con el nivel de accesibilidad más estricto para el texto del cuerpo
• AA — relación ≥ 4.5:1, el mínimo para el texto del cuerpo en la mayoría de las normativas
• AA Large — relación ≥ 3:1, suficiente para texto grande (18pt+ o 14pt negrita) y elementos de interfaz gráfica
• Fail (Falla) — relación < 3:1, no utilices esta combinación para texto

La herramienta calcula el contraste con respecto al blanco puro y al negro puro, y luego destaca la mejor opción como color de texto predeterminado cuando este tono se utiliza como fondo.

¿El conversor genera una paleta de colores?

Sí. Después de cada conversión, la herramienta crea una paleta de diseñador a partir del mismo tono, que incluye:

• Complementario — el color directamente opuesto en la rueda (rotación de tono de 180°), útil para acentos de alto contraste
• Triádico — dos colores espaciados uniformemente a 120°, equilibrados y vibrantes
• Análogos — tonos vecinos a ±30°, útiles para gradientes y fondos armoniosos
• Tintes — tres variaciones más claras (mismo tono, mayor luminosidad)
• Matices — tres variaciones más oscuras (mismo tono, menor luminosidad)

Haz clic en cualquier muestra de la paleta para cargarla instantáneamente en el conversor como un nuevo punto de partida, ideal para iterar rápidamente en el color de una marca, un conjunto de iconos o un tema de interfaz de usuario.

Cómo utilizar esta herramienta

1. Introduce o selecciona un color — escribe cualquier valor (HEX, RGB, HSL, HSV, CMYK o un nombre de color CSS) en el campo de entrada, o haz clic en la pequeña muestra de color para abrir el selector de color nativo de tu navegador.
2. Convertir — haz clic en el botón Convertir. La herramienta detecta automáticamente el formato que has proporcionado y calcula todos los demás formatos.
3. Copia lo que necesites — haz clic en cualquier botón de copia de un toque junto a un valor de formato. El botón mostrará brevemente una marca de verificación para confirmar que el valor está en tu portapapeles.
4. Verifica la accesibilidad — revisa las relaciones de contraste WCAG con respecto al blanco puro y al negro puro para confirmar si el color es legible como texto o fondo.
5. Explora la paleta — haz clic en cualquier muestra de la sección de paleta del diseñador para convertirla, ampliando tu exploración de diseño sin salir de la página.

Casos de uso prácticos

Para desarrolladores web

• Convierte un HEX de una composición de Figma a hsl() para usarlo con propiedades personalizadas de CSS y sistemas modernos de temas
• Genera valores rgba() para superposiciones translúcidas directamente desde el color HEX de una marca
• Verifica que el color de una marca cumpla con WCAG AA en fondos blancos antes del lanzamiento

Para diseñadores gráficos

• Traduce un color CSS de un sitio web a una aproximación CMYK para maquetas de impresión
• Crea una escala tonal (tintes y matices) a partir de un único tono inicial
• Encuentra un acento complementario o triádico sin salir del navegador

Para diseñadores de UI y productos

• Alterna entre HSV (el selector de Figma) y HSL (CSS) al documentar tokens de diseño
• Identifica automáticamente el mejor color de texto (negro frente a blanco) para cualquier fondo
• Guarda o comparte rápidamente un color convertido mediante la URL de la página de resultados

Consejos para mejores resultados

• Sé flexible con los separadores — el analizador acepta comas, espacios o barras diagonales dentro de los paréntesis, por lo que rgb(79 70 229) funciona igual de bien que rgb(79, 70, 229).
• Usa porcentajes cuando sea apropiado — rgb(31%, 27%, 90%) es válido; la herramienta convierte los porcentajes a 0–255 internamente.
• Prueba los nombres de colores de CSS — funcionan más de 140 nombres, incluidas las adiciones modernas como rebeccapurple.
• Observa las barras de canales — el desglose visual de los canales rojo/verde/azul y CMYK facilita ver qué tintas predominan en la versión de impresión del color.
• Trata el CMYK solo como una guía — abre el resultado en tu software de impresión con gestión de color para obtener el valor final preciso.

Preguntas frecuentes

¿Necesito incluir el símbolo # al introducir un valor HEX?

No. Se aceptan tanto #4f46e5 como 4f46e5. El # inicial es opcional.

¿Se admiten valores HEX de 4 y 8 dígitos (con alfa)?

El analizador los aceptará, pero el canal alfa se descarta durante la conversión porque RGB, HSL, HSV y CMYK en sus formas clásicas no llevan alfa. La herramienta se centra únicamente en la parte del color.

¿Puedo compartir o guardar como marcador un color convertido?

Sí. El formulario se envía mediante GET, por lo que la URL contiene el color que has convertido. Copia la URL de la página después de la conversión para compartir o guardar la página de resultados exacta.

¿Por qué algunos valores HEX se muestran en mayúsculas?

La salida normaliza el formato HEX a mayúsculas (ej. #4F46E5), que es la convención utilizada en muchas guías de diseño y estilo de marca. Puedes volver a pegarlo en minúsculas si lo prefieres, ambos son equivalentes.

¿Funciona en dispositivos móviles?

Sí. La interfaz es totalmente adaptativa y el formulario, la paleta y las tarjetas de contraste se reorganizan en diseños de una sola columna en pantallas más pequeñas para una experiencia táctil cómoda.

Recursos adicionales

• HSL y HSV - Wikipedia
• Modelo de color CMYK - Wikipedia
• Requisito de contraste (mínimo) WCAG 2.1