Selector y Convertidor de Color – HEX ⇄ RGB ⇄ HSL ⇄ CMYK + Contraste WCAG y Armonías

Loading…

Acerca de Selector y Convertidor de Color en Línea

Suelta una imagen, pega un color o usa la rueda para capturar colores con precisión de píxel. La herramienta ejecuta un análisis completo en el cliente: normaliza tu HEX, calcula RGB/HSL/HSV/CMYK, convierte a XYZ/LAB/LCH, calcula luminancia y contraste WCAG, y genera paletas armónicas. Luego puedes copiar cualquier formato como token listo para CSS o usar las armonías para construir un sistema de diseño cohesivo.

Lo Que Este Selector de Color Puede Hacer

Muestrear colores de imágenes* o comenzar desde una rueda de color precisa o entrada HEX/RGB
Conversiones avanzadas: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
Verificador de contraste WCAG integrado contra #000000 y #FFFFFF usando luminancia relativa
Sugerencias de HEX seguros para web y abreviados cuando sea aplicable
Armonías de color: complementario, triádico, tetrádico, análogo, monocromático (calculado mediante rotación de tono)
Vista previa de luminancia y brillo percibido para anticipar problemas de contraste
Coincidencia aproximada tipo Pantone basada en la distancia RGB más cercana (con conjunto de datos en caché)
El análisis se ejecuta en el lado del cliente; solo se usan datos mínimos cuando se habilita la búsqueda opcional de Pantone

🔧 Cómo Usar el Selector de Color for color-picker

1. Elige o selecciona un color base

Pega un valor HEX, escribe RGB/HSL o usa el selector para tomar un color de una imagen o la rueda. La herramienta lo normaliza internamente a un valor HEX seguro.

2. Ajusta fino del tono y luminosidad

Ajusta tono, saturación y luminosidad hasta que la muestra se vea correcta. Una vista previa grande muestra el color en superficies claras y oscuras para contexto.

3. Lee y copia los formatos que necesites

Copia HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB y LCH en un clic. Úsalos para variables CSS, tokens de diseño o notas de entrega.

4. Verifica el contraste WCAG

Ve las proporciones de contraste versus #000000 y #FFFFFF basadas en luminancia sRGB. Usa los resultados para decidir rápidamente si un color funciona para texto de cuerpo, títulos grandes o elementos de UI.

5. Genera armonías y construye una paleta

Explora colores complementarios, triádicos, tetrádicos, análogos y monocromáticos generados mediante rotación de tono. Añade tus favoritos a una paleta/historial y expórtalos como tokens.

Detalles Técnicos

Manejo de Entrada y Normalización

La herramienta acepta códigos de color hexadecimales y los convierte en un HEX normalizado de 6 dígitos como referencia interna.

Aspecto	Comportamiento	Notas
Normalización HEX	HEX de 3 y 6 dígitos, # inicial opcional	HEX corto (ej. #0f8) se expande a #00ff88; se eliminan caracteres no hexadecimales.
Soporte HEX8	RGBA mediante #RRGGBBAA	El canal alfa se convierte a 0–255 y se añade como el 4º byte.
Sugerencia web-safe	Ajustar al múltiplo de 51 más cercano por canal	Los valores se redondean al múltiplo más cercano de 51 (0, 51, 102, 153, 204, 255).
Sugerencia HEX abreviado	Solo cuando es comprimible	Se muestra cuando cada par de dígitos HEX se repite (ej. #112233 → #123).

Espacios de Color y Conversiones

Todos los cálculos se basan en sRGB con un blanco de referencia D65.

Espacio	Cálculo	Uso
RGB	Desde HEX normalizado (0–255 por canal)	Representación base para conversiones.
HSL / HSV	Transformaciones cilíndricas estándar desde sRGB	Utilizado para ediciones intuitivas y cálculos de armonía.
CMYK	Aproximación independiente del dispositivo	Calculado como 1−máx(R,G,B) con componentes 0–100%; no vinculado a perfiles ICC.
XYZ	sRGB linealizado → XYZ usando matriz D65	Espacio intermedio para LAB/LCH y análisis más profundo.
LAB	CIE Lab* desde XYZ	Espacio métrico perceptualmente más uniforme.
LCH	CIE LCh° desde LAB	Útil para ajustes de tono/croma/luminosidad y diseño de paletas perceptuales.

Luminancia y Contraste WCAG

El contraste se calcula usando la fórmula estándar de luminancia relativa WCAG.

Aspecto	Detalles	Notas
Luminancia relativa	Calculada a partir de sRGB linealizado (componente Y)	Utiliza coeficientes 0.2126R + 0.7152G + 0.0722B.
Relación de contraste	(L1 + 0.05) / (L2 + 0.05)	La herramienta reporta contraste vs #000000 y #FFFFFF.
Umbrales WCAG	AA/AAA para texto normal y grande	Umbrales típicos: 4.5:1 (AA normal), 3:1 (AA grande), 7:1 (AAA normal), 4.5:1 (AAA grande).

Armonías y Colores Derivados

Las armonías se generan como rotaciones simples de tono en HSL, preservando saturación y luminosidad.

Armonía	Regla	Ejemplo
Complementario	+180° de tono	Punto opuesto en la rueda de colores.
Triádico	±120° de tono	Tres colores equidistantes.
Tetrádico	+90°, +180°, +270° de tono	Cuatro colores formando un rectángulo en la rueda.
Análogo	−30° / +30° de tono	Vecinos alrededor del color base.
Monocromático	Aclarar/oscurecer en L	Versiones más claras y oscuras del mismo tono.

Coincidencia Similar a Pantone (Aproximada)

Cuando el conjunto de datos Pantone está disponible, la herramienta calcula la coincidencia más cercana en el espacio RGB.

Aspecto	Comportamiento	Notas
Carga del conjunto de datos	Carga en caché + asíncrona mediante getPantoneColors / getPantoneColorsCached	La interfaz puede mostrar una coincidencia al instante cuando la caché está caliente, o después de una breve carga asíncrona.
Métrica de coincidencia	Distancia euclidiana al cuadrado en RGB (0–255)	Aproximación rápida y sencilla; no es una métrica perceptual ΔE*.
Salida	ID y nombre similar a Pantone	Se muestra solo como guía; no es un mapeo oficial de Pantone.

Rendimiento y Privacidad

Las conversiones, luminancia, contraste y armonías se calculan completamente en el lado del cliente. La búsqueda de Pantone puede consultar un conjunto de datos local o remoto según la configuración, pero los colores en bruto permanecen como cadenas HEX simples a menos que los compartas o exportes explícitamente.

Casos de Uso Populares

UI/UX y Front-End

Crea pares accesibles de primer plano/fondo para botones, enlaces y texto.
Exporta variables CSS y tokens de diseño directamente desde los colores elegidos.
Verifica el contraste para modos claro/oscuro antes de implementar un conmutador de temas.

/* Tokens de color CSS */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Branding e Identidad Visual

Deriva una paleta de primario/secundario/accesorios a partir de un solo color principal.
Explora opciones complementarias o triádicas para un logotipo o línea de productos.
Obtén nombres aproximados similares a Pantone antes de preparar una guía de marca.

Visualización de Datos y Paneles

Define colores de series que permanezcan distinguibles tanto en fondos claros como oscuros.
Usa LAB/LCH para diseñar paletas con pasos perceptuales controlados.
Verifica rápidamente si los colores del gráfico cumplen con las expectativas de contraste en la leyenda y etiquetas.

❓ Frequently Asked Questions

¿Cuál es la diferencia entre HEX, RGB, HSL y HSV?

HEX es solo una forma compacta de escribir valores RGB en base 16. RGB describe los componentes rojo/verde/azul en sRGB. HSL y HSV son modelos cilíndricos más intuitivos: H es el tono en la rueda de colores, S es la saturación, y L/V controla el brillo o la luminosidad.

¿Por qué los valores CMYK parecen aproximados?

La salida real CMYK depende de los perfiles de impresora, tinta, papel y calibración. Esta herramienta muestra una aproximación independiente del dispositivo que es útil para decisiones de diseño tempranas, pero el trabajo de impresión final debe verificarse con los perfiles ICC de su proveedor de impresión.

¿Para qué son útiles LAB y LCH?

LAB y LCH son más uniformes perceptualmente que el RGB en bruto. Los pasos numéricos iguales en L o C tienden a verse más consistentes para el ojo, lo que los hace ideales para generar tintes, sombras y paletas equilibradas o para medir la distancia visual entre colores.

¿Cómo se calcula el contraste?

Calculamos la luminancia relativa a partir de sRGB usando la fórmula WCAG, luego derivamos la relación de contraste (L1 + 0.05) / (L2 + 0.05). El resultado se compara con umbrales comunes como 4.5:1 (AA texto normal) y 7:1 (AAA texto normal).

¿Son exactos los nombres de Pantone?

No. Cualquier etiqueta similar a Pantone es una coincidencia aproximada del vecino más cercano en el espacio RGB y se proporciona solo como guía. Para trabajos críticos de producción, valida siempre con las bibliotecas y herramientas oficiales de Pantone.

¿Almacenan mis imágenes o colores?

Los cálculos de color (formatos, contraste, armonías) se realizan en el lado del cliente. Dependiendo de la configuración, las cargas de imágenes y los conjuntos de datos de Pantone pueden involucrar un servidor, pero la herramienta está diseñada para procesamiento transitorio, no para almacenamiento a largo plazo. Para activos altamente confidenciales, prefiere herramientas locales/sin conexión.

Pro Tips

Best Practice

Siempre previsualiza los colores en superficies claras y oscuras; la saturación y el contraste percibidos pueden cambiar drásticamente según el contexto.

Best Practice

Usa LAB o LCH al generar tintes y sombras para que los cambios de brillo se perciban más uniformes para el ojo humano.

Best Practice

Verifica el contraste AA/AAA para todos los estados interactivos (hover, activo, deshabilitado), no solo para el color predeterminado del botón.

Best Practice

Exporta variables CSS o tokens de diseño desde la pestaña de formatos para mantener los colores consistentes en todos tus componentes.

Best Practice

Al muestrear de imágenes, promedia un área pequeña en lugar de un solo píxel para reducir el ruido de la compresión y el antialiasing.