Selector y convertidor de color hexadecimal (RGB, HSL, HSV, CMYK, OKLCH)
Convierta cualquier color a HEX, RGB, HSL, HSV, CMYK y OKLCH, compruebe el contraste, copie muestras de armonía y exporte CSS o JSON, directamente en su navegador.
Introduzca hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() o un nombre de color CSS. Los valores no válidos conservan la última conversión correcta.
Nombre CSS más cercano: royalblue
Conversiones
Sobre fondo blanco
3.68:1
Cumple WCAG AA (solo texto grande)
Sobre fondo negro
5.71:1
Cumple WCAG AA (texto normal)
Exportar muestras
Elija o pegue cualquier formato de color, conviértalo a HEX, RGB, HSL, HSV, CMYK y OKLCH, compruebe el contraste WCAG, genere muestras de armonía, copie valores y exporte CSS o JSON. Gratis, rápido y funciona íntegramente en su navegador.
Cómo utilizar este selector de color
Escriba o pegue cualquier formato de color admitido, ajuste la opacidad o use el selector nativo. La página convierte al instante a HEX, RGB, HSL, HSV, CMYK y OKLCH, muestra el contraste WCAG sobre blanco y negro, genera muestras de armonía y una tira de tinte/sombra, y mantiene todo listo para copiar. Comparta su configuración con la URL: el estado se guarda en la cadena de consulta.
Referencia HEX, RGB, HSL, HSV, CMYK y OKLCH
Hex es una codificación RGB compacta. RGB describe los canales rojo/verde/azul. HSL expresa tono, saturación y luminosidad; HSV usa tono, saturación y valor (brillo). CMYK modela porcentajes de tinta de impresión. OKLCH es un espacio de color CSS perceptualmente uniforme. Esta herramienta usa cálculos deterministas en su navegador, sin cargas ni API externas.
Complementario, análogo, triádico, complementario dividido, tetrádico y monocromático
El complementario rota el tono 180°. El análogo avanza el tono en ángulos fijos alrededor de la base. El triádico usa desplazamientos de 120°. El complementario dividido añade dos tonos cerca del complemento. El tetrádico usa desplazamientos rectangulares de 90°. El monocromático mantiene el tono y varía la luminosidad. Los controles de cantidad se aplican a los modos análogo y monocromático.
Variables CSS y exportación JSON
La exportación produce propiedades personalizadas :root con nombres estables (por ejemplo --color-base, --color-analogous-1) y JSON con baseHex, alpha, namedColor, modo de armonía, ratios de contraste y listas de muestras para scripts o tokens de diseño.
Comprobador de contraste WCAG
El ratio de contraste se calcula a partir de la luminancia relativa según WCAG 2.x. AA exige 4,5:1 para texto normal y 3:1 para texto grande; AAA exige 7:1. Use las vistas previas al elegir colores de texto o de interfaz sobre fondos claros u oscuros.
Preguntas frecuentes
¿Qué formatos de color puedo introducir?
Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() y todos los nombres de color CSS estándar como cornflowerblue o rebeccapurple.
¿#ABC se expande a seis dígitos?
Sí. El hexadecimal de tres dígitos se expande por par de dígitos, por lo que #ABC se convierte en #AABBCC.
¿Qué pasa si mi color no es válido?
Verá un error en línea. El último color válido permanece en las filas de conversión, el selector y las exportaciones hasta que introduzca de nuevo un valor válido.
¿Cómo funciona el comprobador de contraste WCAG?
Calcula el ratio de contraste entre su color y el blanco o negro puro usando la luminancia relativa. Los resultados indican si el color cumple los umbrales AA o AAA para texto normal o grande.
¿Cómo se calculan los colores de armonía?
Son deterministas: complementario es un desplazamiento de tono de 180°; análogo usa pasos de tono fijos; triádico usa desplazamientos de 120°; complementario dividido usa tonos cerca del complemento; tetrádico usa desplazamientos rectangulares de 90°; monocromático varía la luminosidad manteniendo tono y saturación de la base.
¿Qué contiene la exportación JSON?
Claves estables: baseHex, alpha, namedColor, harmony, harmonyCount cuando corresponda, harmonySwatches, tintShadeStrip, stripCount y ratios de contraste, adecuadas para herramientas o documentación.
¿Puedo compartir mis colores?
Sí. La URL se actualiza con hex, alpha, modo de armonía, recuentos y tamaño de tira para que pueda guardar o compartir una configuración exacta.