Convertidor de colores gratuito y comprobador de contraste WCAG
Convierte HEX, RGB, HSL, HSV y CMYK al instante; luego comprueba el contraste WCAG 2.1 AA/AAA para texto e interfaz accesibles. Privado y gratis en tu navegador.
Texto normal de ejemplo — El rápido zorro marrón
Texto grande — Legible a 18 pt+
Primer plano
#1a73e8
Fondo
#ffffff
RGB / RGBA
HSL / HSLA
HSV
CMYK
Tonos y sombras
Comprobador de contraste WCAG
Relación de luminancia entre primer plano y fondo (colores opacos).
4.51:1
Referencia: negro (#000000) sobre blanco (#ffffff) es 21:1. El texto grande es aproximadamente 18 pt regular o 14 pt negrita. Los componentes de UI y gráficos necesitan al menos 3:1.
Cómo usar el convertidor de colores y el comprobador de contraste
- Elige o pega un color — usa el selector nativo, escribe un valor HEX (#RGB, #RRGGBB o #RRGGBBAA) o edita los campos RGB, HSL, HSV o CMYK. Todos los formatos se mantienen sincronizados.
- Cambia entre primer plano y fondo cuando compruebes la accesibilidad. La vista previa en vivo muestra texto normal y grande sobre tu par de colores.
- Lee la relación de contraste WCAG y las insignias Aprobado/Fallo para texto AA/AAA normal y grande, y el umbral 3:1 de UI / no texto.
- Copia valores listos para CSS con un clic — HEX, rgb(), hsl(), HSV o CMYK.
- Explora tonos y sombras en la franja bajo el convertidor, o genera un color aleatorio primero y conviértelo aquí.
Acerca de este convertidor de colores gratuito
Diseñadores y desarrolladores traducen colores constantemente entre HEX, RGB, HSL, HSV y CMYK — y aún deben preguntarse si el par es legible. Convertidores y herramientas de contraste separados ralentizan ese flujo.
Este convertidor de colores y comprobador de contraste WCAG reúne ambas tareas en una sola página. Edita cualquier formato y el resto se actualiza en vivo. Comprueba umbrales AA/AAA para texto normal y grande, más el requisito WCAG 2.1 de UI no textual (3:1). Todo se ejecuta en el cliente, así que tus experimentos de paleta nunca salen del navegador.
Combínalo con el selector de color aleatorio para inspirarte, el redimensionador y recortador de imágenes al extraer colores de recursos, o el convertidor de unidades para cálculos del design system.
Referencia rápida HEX, RGB, HSL, HSV y CMYK
| Formato | Uso típico | Ejemplo |
|---|---|---|
| HEX | CSS, herramientas de diseño, tokens de marca | #1a73e8 |
| RGB / RGBA | Renderizado web, superposiciones alfa, canvas | rgb(26, 115, 232) |
| HSL / HSLA | Temas, aclarar/oscurecer, design systems | hsl(214.5, 82%, 51%) |
| HSV | Selectores de color, herramientas creativas, ediciones por valor | hsv(214.5, 88.8%, 91%) |
| CMYK | Entrega aproximada a impresión (depende del dispositivo) | cmyk(88.8%, 50.4%, 0%, 9%) |
Los valores CMYK aquí son una aproximación estándar RGB↔CMYK de referencia — los flujos de impresión calibrados siguen necesitando perfiles ICC y pruebas de prensa.
Preguntas frecuentes (FAQ)
¿Cómo convierto hexadecimal a RGB?
Pega un código hex como #1a73e8 (3, 6 u 8 dígitos con alfa). La herramienta muestra rgb(R, G, B) al instante y mantiene HSL, HSV y CMYK sincronizados para que copies cualquier formato para CSS.
¿Cómo convierto RGB a hexadecimal?
Introduce valores de rojo, verde y azul de 0–255 (y alfa opcional). Obtendrás un código hex de seis dígitos — u ocho si hay alfa — más valores HSL, HSV y CMYK coincidentes.
¿Qué relación de contraste necesito para WCAG AA y AAA?
WCAG 2.1 AA exige 4,5:1 para texto normal y 3:1 para texto grande (18 pt+ o 14 pt negrita) y componentes de UI. AAA exige 7:1 para texto normal y 4,5:1 para texto grande. Este comprobador muestra Aprobado/Fallo en cada umbral.
¿Qué es una relación de contraste WCAG?
Una relación de contraste WCAG mide la diferencia de luminancia entre colores de primer plano y fondo, de 1:1 (idénticos) a 21:1 (negro sobre blanco). Ratios más altos facilitan la lectura a personas con baja visión.
¿Puedo convertir HEX a HSL o CMYK?
Sí. Edita cualquier campo y HEX, RGB, HSL, HSV y CMYK se actualizan juntos. HSL es ideal para tokens CSS; CMYK es una entrega aproximada útil para impresión.
¿Sirve como comprobador de color accesible para UI e iconos?
Sí. Además de las comprobaciones AA/AAA de texto, evalúa el requisito WCAG 2.1 3:1 de contraste de UI no textual (bordes, iconos y gráficos) para que los colores interactivos no queden de lado.
¿Se suben mis datos de color a un servidor?
No. Las conversiones de color y los cálculos de contraste se ejecutan por completo en tu navegador con JavaScript. No se envía nada a los servidores de ToolGenie.
¿Por qué usar un convertidor de colores y comprobador de contraste juntos?
En el handoff de diseño a menudo necesitas «¿cuál es el valor CSS?» y «¿este par pasa AA?». Una página gratuita del lado del cliente evita saltar entre convertidores y herramientas de contraste separados.
Consejos para elecciones de color accesibles
- No dependas solo del color. Combina el contraste con iconos, etiquetas o patrones para que el significado resista el daltonismo y los modos de alto contraste.
- Prefiere AA para el texto del cuerpo (4,5:1) y apunta a AAA (7:1) en superficies de lectura larga cuando puedas.
- Comprueba la cromática de UI por separado — iconos, bordes y anillos de foco necesitan al menos 3:1 respecto a los colores adyacentes.
- Usa HSL para ajustes sistemáticos. Sube o baja la luminosidad manteniendo tono y saturación para acercarte a un ratio aprobado sin abandonar el tono de marca.
- Verifica en ambos temas. Un par que aprueba sobre blanco puede fallar sobre fondos oscuros — intercambia FG/BG y vuelve a comprobar.
- ¿Necesitas texto de relleno mientras pruebas tamaños? Prueba el generador de lorem ipsum o normaliza nombres de tokens con el convertidor de mayúsculas y minúsculas.