Color Converter & Palette
Convierte al instante HEX, RGB, HSL, HSV, CMYK.
Incluye generación de paletas y comprobación de contraste.
Selector de Color
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: -
Texto Negro Aa
Ratio: -
Colores Guardados
Guarda colores usando ⭐ (Máx 20)
También te puede interesar
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.
Cómo usar
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.
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.
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.
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.
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.
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.
Los comentarios están temporalmente suspendidos
El servidor está ocupado o la protección contra spam está activa. Inténtelo más tarde.