digtools
🎨
color converter,

Color Converter & Palette

Convierte al instante HEX, RGB, HSL, HSV, CMYK.Incluye generación de paletas y comprobación de contraste.

Conversión en Tiempo Real
Soporta 5 formatos
🎨
Paletas de Colores
Generación automática
Contraste WCAG
Validación de contraste

Selector de Color

217°
90%
60%
1.00

Códigos de Color

/* CSS Variables */
--color-primary: #3b82f6;
--color-primary-rgb: 59, 130, 246;
--color-primary-hsl: 217, 90%, 60%;

Paleta de Colores


Relación de Contraste

Texto Blanco Aa

Ratio: -

AA AAA

Texto Negro Aa

Ratio: -

AA AAA

Colores Guardados

Guarda colores usando ⭐ (Máx 20)

about,

Acerca del Convertidor de Colores

El Convertidor de Códigos de Color y Generador de Paletas es una herramienta en línea gratuita que convierte instantáneamente entre cinco formatos principales de color: HEX, RGB, HSL, HSV y CMYK. Cuenta con un selector de colores intuitivo y genera automáticamente paletas de colores como colores complementarios y análogos según su selección.

También incluye un verificador de relación de contraste WCAG incorporado, un estándar esencial para la accesibilidad web, lo que le permite determinar instantáneamente si el texto blanco o negro es adecuado para el color de fondo elegido. Los códigos generados se pueden copiar con un solo clic y también se pueden exportar como variables CSS, mejorando significativamente la eficiencia del desarrollo para diseñadores web e ingenieros frontend.

how to,

Cómo usar

PASO 1

Seleccionar o Introducir Color

Haga clic en el área de degradado del selector de color para seleccionar un color, o ajuste los controles deslizantes de Tono y Alfa. Alternativamente, puede introducir directamente un código de color en los campos HEX o RGB.

PASO 2

Copiar Códigos de Conversión

Cuando cambie el color mediante cualquier método, todos los formatos de color (HEX, RGB, HSL, HSV, CMYK) se actualizan en tiempo real. Haga clic en el botón "Copiar" junto a cada elemento para guardarlo en su portapapeles. También puede copiar las variables CSS de una vez.

PASO 3

Comprobar Paleta y Contraste

Cambie a la pestaña "Paleta de Colores" en la parte inferior para ver variaciones de color como complementarias y monocromáticas. En la sección "Relación de Contraste", se determina automáticamente la legibilidad del texto blanco/negro sobre el color de fondo seleccionado.

glossary,

Glosario de Colores

HEX (Código de Color Hexadecimal)
El formato de especificación de color más utilizado en diseño web. Se expresa en 6 dígitos como "#RRGGBB" (o 3 dígitos "#RGB"), especificando la intensidad de Rojo (R), Verde (G) y Azul (B) en hexadecimal (00-FF). Al incluir la transparencia, se escribe en 8 dígitos como "#RRGGBBAA", y es ampliamente soportado en CSS y HTML.
RGB / RGBA
Un modelo de color aditivo basado en los colores primarios de la luz (Rojo, Verde, Azul). Basado en el principio de generación de color de las pantallas, cada color se representa mediante un valor de 0 a 255. En CSS, se escribe como "rgb(255, 0, 0)", y con "rgba", se puede agregar un valor alfa (transparencia) de 0.0 a 1.0 al final.
HSL
Un modelo que representa el color con tres atributos: Tono (Hue), Saturación (Saturation) y Luminosidad (Lightness). Dado que es fácil de ajustar intuitivamente, como "cambiar el tono de color" o "hacerlo más oscuro", es muy adecuado para construir sistemas de diseño utilizando CSS (función hsl) y cambios dinámicos de temas.
CMYK
Un modelo de color sustractivo que utiliza cuatro colores: Cian, Magenta, Amarillo y Clave (Negro). Es un formato de tinta utilizado principalmente en la industria de la impresión, y los valores CMYK en un navegador son valores teóricos aproximados, por lo que son necesarios ajustes a través de perfiles para la impresión real.
Relación de Contraste (WCAG)
La relación de la luminancia relativa entre un color de fondo y un color de texto, definida por las Pautas de Accesibilidad Web. Para garantizar que todos los usuarios puedan leer el texto, se recomienda una relación de "4.5:1 (nivel AA)" o superior para el texto normal, y "3:1" o superior para texto grande.
faq,

Preguntas Frecuentes

Q.¿Son precisos los resultados de conversión CMYK para impresión?
Los valores CMYK calculados en el navegador son valores teóricos aproximados. Los colores impresos reales pueden variar según el perfil ICC de su impresora y las características de la tinta. Para obtener datos CMYK precisos para impresión, convierta y verifique utilizando software de gestión de color como Adobe Illustrator o Photoshop.
Q.¿La herramienta admite la conversión de alfa (transparencia)?
Sí. Al ajustar el control deslizante "Alfa" en el selector de color o ingresar directamente el valor alfa en el código, se generarán correctamente los códigos HEX (#RRGGBBAA), RGBA y HSLA. Esto es ideal para implementaciones modernas de UI web que requieren transparencia.
Q.¿Qué es la función "Copiar Vars CSS"?
Esta función genera el color seleccionado como propiedades personalizadas CSS (Variables CSS). Genera formatos como --color-primary: #3b82f6;, junto con valores separados por comas para RGB y HSL, lo que facilita enormemente la configuración de Tailwind CSS o temas dinámicos.
Q.¿Se guardan mis datos de color ingresados en un servidor?
No. Esta herramienta funciona completamente en el lado del cliente (dentro de tu navegador). Ninguno de sus códigos de color o paletas generadas se transmite o guarda en servidores externos. La función "Favoritos" también guarda colores estrictamente en el almacenamiento local de su navegador, garantizando su privacidad.
use cases,

Casos de uso

🎨

Diseño Web y Programación

Convierta por lotes códigos HEX especificados en herramientas de diseño como Figma o XD a formatos RGB o HSL para el desarrollo. Simplifique la construcción de temas modernos utilizando variables CSS.

📱

Mejora de la Accesibilidad

Compruebe instantáneamente si la combinación del color de fondo del sitio y el color del texto cumple con los estándares de relación de contraste WCAG (AA/AAA) durante la programación, logrando una interfaz de usuario más legible.

📊

Revisión del Esquema de Color

Genere automáticamente paletas relacionadas, como colores complementarios o análogos, basándose en los colores de marca corporativa. Útil para considerar combinaciones de colores en presentaciones y diseño gráfico.

🔍

Guía para Datos de Impresión

Convierta los colores utilizados en la web en valores CMYK para utilizarlos como referencia de valores aproximados al implementar materiales impresos como folletos y tarjetas de presentación.

Enviar comentarios

Déjenos saber su opinión para ayudarnos a mejorar la herramienta.

Descargo de Responsabilidad

Las herramientas proporcionadas en este sitio son de uso completamente gratuito, pero utilícelas bajo su propio riesgo. No ofrecemos garantías sobre la precisión, integridad o seguridad de los resultados de cálculo, resultados de conversión o datos generados. Tenga en cuenta que el operador no asume ninguna responsabilidad por los daños o problemas causados por el uso de estas herramientas. La mayoría de las herramientas procesan archivos y cálculos localmente en su navegador, lo que significa que los datos ingresados no se envían ni se almacenan en nuestros servidores.