Conversor de colores
Convierte cualquier color entre HEX, RGB, HSL y HSV. Usa el selector o escribe en cualquier campo — los demás se actualizan en vivo. Incluye un verificador de contraste WCAG para pares accesibles.
Útil para traducir colores de design systems, elegir pares accesibles de texto/fondo y unificar valores entre herramientas.
Verificador de contraste WCAG
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
Umbrales WCAG
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
El ratio se calcula a partir de la luminancia relativa según WCAG 2.1, usando los canales sRGB linealizados y los pesos 0.2126·R + 0.7152·G + 0.0722·B.
Notas sobre formatos
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
Preguntas frecuentes
¿Por qué HSL y HSV no coinciden exactamente con mis valores de Photoshop / Figma?
Redondeo. Hue, saturation y lightness son continuos; las herramientas los redondean de forma distinta. Una diferencia de 1° en hue o 1% en saturation es esperable y visualmente idéntica.
¿El verificador de contraste incluye el alfa (transparencia)?
No. Los ratios WCAG asumen colores totalmente opacos. Si tienes un primer plano semitransparente, mézclalo antes contra el fondo y verifica el color opaco resultante.
¿Qué pasa con APCA, el nuevo algoritmo de contraste?
APCA es candidato a reemplazar el ratio WCAG 2.x en WCAG 3.0 (aún en borrador). Para trabajo en producción hoy, el ratio WCAG 2.1 es lo que comprueban los auditores y Lighthouse.
¿Se envía algo a un servidor?
No. Toda la conversión y la matemática de contraste corren en tu navegador.