Gira el matiz y ajusta la luminosidad en el espacio OKLCH perceptualmente uniforme — las mismas reglas de armonía, pero las paletas simplemente se ven mejor que en HSL. Cada muestra derivada se puede ajustar de forma independiente, con contraste WCAG en tiempo real.
:root {
--harmony-1: #2b9d8f;
--harmony-2: #957abc;
--harmony-3: #b47b44;
}[
{
"hex": "#2b9d8f",
"oklch": "oklch(63.0% 0.101 183.0)",
"role": "base"
},
{
"hex": "#957abc",
"oklch": "oklch(63.0% 0.101 303.0)",
"role": "harmony-2"
},
{
"hex": "#b47b44",
"oklch": "oklch(63.0% 0.101 63.0)",
"role": "harmony-3"
}
]Armonías perceptualmente uniformes con contraste en vivo y mapeo de gama en cada paso.
Escribe o aleatoriza un HEX, luego elige complementario, split-complementario, triádico, tetrádico, análogo o monocromático.
Cada muestra derivada tiene controles deslizantes L/C/H en el espacio OKLCH; los valores fuera de gama se mapean al color visualizable más cercano.
Observa el contraste con blanco/negro en vivo, copia variables CSS o JSON, o envía todo el conjunto al tablero de paletas.
Tres preguntas comunes sobre armonías OKLCH.
Continúa desde aquí y pon los colores a trabajar.
Arrastra la rueda para elegir un color base, obtén seis esquemas de armonía en vivo, ábrelo en el panel o exporta PNG.
Ajusta L / C / H en el espacio OKLCH perceptualmente uniforme con vista previa en vivo y salida oklch() / HEX / RGB.
Introduce un color de marca, obtén primario / secundario / éxito / advertencia / peligro — exportado como configuración Tailwind y variables CSS.
Barra espaciadora para aleatorizar, bloquear, arrastrar para reordenar, compartir por URL — todo lo que un panel de paletas debe hacer.