Herramienta #23 · CSS 100% Client-Side

Conversor de Colores HEX / RGB / HSL / CMYK

Convierte colores con precisión matemática instantánea entre los principales formatos web e impresión con análisis de contraste WCAG y paletas derivadas.

Muestra de Color

#FF7043 rgb(255, 112, 67)

Accesibilidad WCAG 2.1

Sobre Fondo Blanco2.74:1

Falla AA

Sobre Fondo Negro7.65:1

Pasa AA (4.5:1)

Formatos Sincronizados

HEX (Hexadecimal)

RGB (Rojo, Verde, Azul)

HSL (Matiz, Saturación, Luminosidad)

HSV (Matiz, Saturación, Valor)

CMYK (Impresión)

Armonías de Color

Complementario

Análogos

Triádica

Tetrádica

Escalas de Tintes y Sombras

Tintes (Aclarados)

#FF8661

#FF9D80

#FFB9A3

#FFD0C2

#FFE8E0

Sombras (Oscurecidos)

#FF470F

#D63200

#A32600

#6B1900

#330C00

Cómo Usar el Conversor de Colores

Sigue estos sencillos pasos para convertir y validar tus colores para interfaces accesibles.

Introduce el código en cualquier formato

Escribe tu color en HEX (#FF7043), valores numéricos RGB o usa el selector visual para elegirlo con el cuentagotas.

Visualiza la conversión y accesibilidad

Todos los formatos se calculan al vuelo y se evalúa el ratio de contraste WCAG 2.1 para textos legibles.

Copia o explora armonías

Copia el formato exacto que requiera tu CSS o haz clic sobre cualquier color de la paleta armónica para cargarlo de inmediato.

Diferencias entre Espacios de Color Web

HEX y RGB representan colores mediante síntesis aditiva de luz para pantallas. HSL describe el color de manera más intuitiva para diseñadores (tono, saturación y brillo). CMYK se basa en síntesis sustractiva de tintas para imprenta.

Preguntas Frecuentes sobre Conversión de Colores

Las pantallas emiten luz (RGB) mientras que el papel absorbe luz (CMYK). La conversión matemática aquí utilizada es el estándar digital sRGB/CMYK euclídeo, ideal para diseño web y referencias de preprensa.

Mide la diferencia de luminancia entre el texto y el fondo. El nivel AA exige al menos 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA exige 7:1.

Sí. Cualquier muestra de color en las paletas complementarias o escalas de tintes es interactiva; al hacer clic sobre ella se convierte en el color activo.

No. Toda la matemática de color y análisis de contraste se realiza 100% en local en tu navegador con latencia cero.