Selector de colores (HEX, RGB, HSL, OKLCH)
Elige un color en el cuadrado de saturación y brillo o escribe HEX, RGB, HSL u OKLCH. Todos los formatos se sincronizan, con escala de tintes, cuentagotas (Chromium) y paletas exportables a CSS y JSON.
Cómo elegir y exportar colores
1. Arrastra por el cuadrado y el control de matiz, o pega un valor HEX/RGB/HSL/OKLCH.
2. Lee HEX, RGB, HSL y OKLCH sincronizados en la barra.
3. Pulsa una sombra o una muestra de armonía para explorar colores relacionados.
4. Copia un valor, un enlace ?hex= o exporta variables CSS / JSON.
Ejemplos del selector de colores
Terracota de marca #8F665E
El selector HSV mantiene el matiz al oscurecer para hover. Exporta --color y --shade-* como variables CSS.
Paleta análoga para un dashboard
Elige Análogos para matices ±30° y ±60°. Copia la tira como custom properties para tarjetas y gráficos.
OKLCH para pasos uniformes
La rampa varía la claridad OKLCH, más uniforme que mezclar HEX con blanco. Usa oklch() en CSS moderno.
Cuándo usar esta herramienta
• Cuando eliges colores de UI y necesitas HEX, RGB, HSL y OKLCH a la vez.
• Cuando generas sombras hover/muted a partir de un matiz de marca.
• Cuando exportas una paleta pequeña (armonía + rampa) a variables CSS.
Armonías para paletas de UI
Los complementarios están a 180° — mucho contraste, úsalos con moderación en CTA. Los análogos (±30–60°) unifican un dashboard. Tríadas y tétradas dan más variedad; baja la saturación de los extras para que el primary lidere. Comprueba el texto con el verificador de contraste WCAG.
Preguntas frecuentes
¿HEX vs RGB vs HSL vs OKLCH?
HEX y RGB son el mismo color sRGB. HSL sirve para ajustar matiz y luminosidad. OKLCH es perceptual: pasos L similares se ven más uniformes, y oklch() es CSS moderno válido.
¿El cuentagotas funciona en todos los navegadores?
La API EyeDropper está en Chromium (Chrome, Edge). En el resto, escribe un valor o usa el selector visual.
¿Puedo compartir un color?
Sí. La URL se actualiza con ?hex=RRGGBB. Copia el enlace para reabrir el mismo color.
¿Los colores se procesan en un servidor?
No. Conversión, armonías y exportación se ejecutan en local en el navegador.