Conversor de Colores
Convierte entre HEX, RGB, HSL y HSV al instante. Paleta de matices, colores relacionados y contraste WCAG. 100% en el navegador.
#A78BFA
rgb(167, 139, 250) · hsl(255°, 92%, 76%)
--color: #a78bfa;Texto sobre blanco
2.72:1
Texto sobre negro
7.72:1
AA = 4.5:1 texto normal · AAA = 7:1 texto normal (WCAG 2.1)
¿Cómo usar el conversor de colores?
- 1
Introduce un color
Escribe directamente un código HEX en el campo de texto (con o sin #), mueve cualquier slider de RGB, HSL o HSV, haz clic en el icono de paleta para abrir el selector de color nativo del navegador, o pulsa 🎲 para generar un color aleatorio.
- 2
Explora todos los formatos simultáneamente
En cuanto introduces o cambias un color, todos los formatos se actualizan al instante: HEX, RGB con sus componentes R/G/B, HSL con matiz/saturación/luminosidad, HSV con matiz/saturación/valor, y la variable CSS lista para copiar.
- 3
Usa la paleta de matices y colores relacionados
La paleta de matices muestra 9 variaciones del color actual variando la luminosidad del 10% al 90%. Haz clic en cualquier matiz para cargarlo. Los colores relacionados muestran análogos (±30°), complementario (+180°) y triádico (+120°) — clic en cualquiera para seleccionarlo.
- 4
Verifica el contraste WCAG y copia el valor
El panel de contraste WCAG 2.1 muestra el ratio de contraste del color sobre fondo blanco y negro, indicando si cumple los niveles AA (4.5:1) y AAA (7:1) para texto normal. Usa los botones de copiar (ícono ⎘) en cada sección para copiar el valor formateado al portapapeles.
Preguntas frecuentes
¿Cuál es la diferencia entre HSL y HSV?
Ambos usan el mismo componente de Matiz (H, 0–360°) para representar el color del espectro. La diferencia está en los otros dos componentes: HSL usa Saturación (pureza) y Luminosidad (donde 50% es el color puro, 0% negro y 100% blanco), mientras que HSV usa Saturación y Valor (donde 100% es el color puro con máximo brillo, 0% negro). HSL es más intuitivo para CSS; HSV es más común en software de diseño como Photoshop.
¿Qué significa el ratio de contraste WCAG?
El ratio de contraste mide la diferencia de luminosidad entre el texto y el fondo, según la fórmula de las WCAG (Web Content Accessibility Guidelines). Un ratio de 4.5:1 o superior cumple el nivel AA (texto normal), y 7:1 o superior cumple el nivel AAA. Estos umbrales garantizan que las personas con baja visión o daltonismo puedan leer el contenido correctamente. El color blanco tiene luminancia 1.0 y el negro 0.0.
¿Cómo se calcula la luminancia relativa?
La luminancia relativa se calcula a partir de los componentes RGB linealizados: L = 0.2126·R + 0.7152·G + 0.0722·B, donde cada componente se linealiza con la función gamma: v ≤ 0.03928 → v/12.92, en caso contrario → ((v+0.055)/1.055)^2.4. Los pesos reflejan la sensibilidad del ojo humano a cada color: el verde aporta el 71.5% de la luminancia percibida, el rojo el 21.3% y el azul solo el 7.2%.
¿Por qué el Matiz (H) no cambia cuando la Saturación es 0?
Cuando la Saturación es 0%, el color es un gris neutro independientemente del matiz. Matemáticamente, convertir un gris a HSL da H=0° de forma arbitraria. Para evitar que el matiz 'salte' al mover la saturación de vuelta hacia arriba, el conversor recuerda el último matiz significativo y lo muestra cuando S=0. Así, si tenías H=200° y bajas S a 0%, al volver a subir S recuperas H=200°.
¿Los colores análogos y complementarios usan el mismo brillo que el original?
Sí, los colores relacionados usan exactamente la misma Saturación y Luminosidad que el color actual, variando únicamente el Matiz. El análogo izquierdo usa H−30°, el análogo derecho H+30°, el complementario H+180° y el triádico H+120°. Esto permite comparar la armonía real entre colores. Si el color original tiene poca saturación, los colores relacionados también la tendrán, mostrándose como tonos grises similares.
Integra el conversor en tu web
Puedes embeber este conversor de colores en cualquier web con un iframe. Es gratuito, funciona sin conexión y no requiere JavaScript adicional.
Iframe (integración directa):
<iframe src="https://miguelacm.es/embed/color-converter" width="100%" height="800" style="border:none;border-radius:12px;" title="Conversor de Colores — miguelacm.es" loading="lazy"></iframe>Enlace con atribución:
<a href="https://miguelacm.es/es/tools/color-converter" target="_blank" rel="noopener">Conversor de colores gratis por MACM</a>