Pasar formatos de color en frontend
Cambia un HEX del diseño por sus valores RGB, HSL o CMYK de referencia.
Cargando…
Guide
La herramienta de color usa colord con sus complementos de CMYK, accesibilidad y mezcla para interpretar valores CSS y mostrar HEX, RGB, HSL, HSV y CMYK, además de generar 10 escalas hacia el blanco y 10 hacia el negro. Incluye un comprobador de contraste entre primer plano y fondo y, cuando el navegador lo admite, la toma de color en pantalla con EyeDropper.
Actualizado el 2026-09-102 min read
rgb(), hsl() o por nombre, o usa el selector de color nativo.| Entrada | Salida | Explicación |
|---|---|---|
#6366f1 |
HEX/RGB/HSL/HSV/CMYK | el mismo color en varios formatos |
| Texto negro + fondo blanco | 21:1 | contraste alto |
| Color CSS no válido | mensaje de error | no intenta adivinar una corrección |
colord; no es un analizador completo de todas las funciones de color futuras de los navegadores.colord.tints(10) / shades(10), no equivalen a la paleta fija de un sistema de diseño concreto.Cambia un HEX del diseño por sus valores RGB, HSL o CMYK de referencia.
Introduce el color de marca y el del fondo para confirmar si cumplen el contraste AA/AAA.
Porque el navegador actual no tiene la API EyeDropper y el botón se desactiva; puedes usar las herramientas de desarrollo del navegador o un entorno que sí la soporte.
Aquí solo se hace una conversión matemática entre representaciones de color: no hay gestión ICC, ni papel, ni configuración de impresoras.
Los cálculos de color se hacen en tu navegador; EyeDropper solo devuelve un único valor de color cuando el usuario lo invoca y no sube el contenido de la pantalla.
Actualizado el 2026-09-10
Conversión entre HEX, RGB, HSL, HSV y CMYK, generación de escalas, comprobación de contraste y cuentagotas en pantalla
Esta herramienta no está traducida por completo; parte del contenido usa el idioma de origen o uno de reserva.
Compatible con cualquier formato de color CSS: HEX, rgb(), hsl(), nombres de colores, etc.
Nota: tomar un color de la pantalla requiere un navegador compatible con la EyeDropper API (Chrome / Edge 95+)
| HEX | #6366f1 | |
| RGB | rgb(99, 102, 241) | |
| HSL | hsl(239, 84%, 67%) | |
| HSV | hsv(239, 59%, 95%) | |
| CMYK | cmyk(59%, 58%, 0%, 5%) |
10 niveles hacia el blanco (tints) y 10 hacia el negro (shades); hacer clic en una muestra para copiar
Evalúa la legibilidad del texto sobre el fondo según WCAG 2.0
Se considera texto grande el de ≥18 pt (unos 24 px) o ≥14 pt en negrita