OKLCH-Harmoniseerder

Roteer tint en stap helderheid in de perceptueel uniforme OKLCH-ruimte — dezelfde harmonieregels, maar de paletten zien er gewoon beter uit dan met HSL. Elke afgeleide staal kan onafhankelijk worden afgestemd, met live WCAG-contrast.

#2b9d8f

Basiskleurvs wit 3.3 · vs zwart 6.3

L · 63%C · 0.101H · 183°

#957abc

H +120°vs wit 3.6 · vs zwart 5.8

L · 63%C · 0.101H · 303°

#b47b44

H +240°vs wit 3.6 · vs zwart 5.9

L · 63%C · 0.101H · 63°

Exporteren

Open in bord

: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"
  }
]

Genereer OKLCH-harmonieën in drie stappen

Perceptueel uniforme harmonieën met live contrast en gamutmapping bij elke stap.

01
Basis & regel
Typ of randomiseer een HEX, en kies vervolgens complementair, split-complementair, triadisch, tetradisch, analog of monochromatisch.
02
Fijn afstellen
Elke afgeleide staal heeft L/C/H-schuifregelaars in de OKLCH-ruimte; waarden buiten het gamut worden omgezet naar de dichtstbijzijnde weergeefbare kleur.
03
Exporteren
Bekijk het contrast met wit/zwart live, kopieer CSS-variabelen of JSON, of stuur de hele set naar het paletbord.

Harmonizer Veelgestelde Vragen

Drie veelgestelde vragen over OKLCH-harmonieën.

Hoe verschilt OKLCH-harmonie van wielgebaseerde harmonie?: In HSL is "gelijke helderheid" niet waarnemingsgelijk — gedraaide geel kleuren schitteren en blauw kleuren worden dof. OKLCH is waarnemingsuniform, dus kleurenrotatie behoudt daadwerkelijk helderheid en chroma, wat zorgt voor natuurlijk uitgebalanceerde paletten.
Wat als een schuifregelaar buiten het schermgamut terechtkomt?: De OKLCH-ruimte is groter dan sRGB. Waarden buiten het gamut worden automatisch toegewezen aan de dichtstbijzijnde weergavebare kleur, dus de hex die je ziet is de hex die je kunt gebruiken.
Hoe gebruik ik het resultaat in mijn project?: Kopieer de :root CSS-variabelen of JSON uit het exportgebied, of open de set in het paletbord om te vergrendelen, opnieuw te genereren en PNG/ASE en meer te exporteren.

Na het behalen van het resultaat

Ga verder vanaf hier en breng de kleuren in praktijk.

Kleurenwiel

Sleep het wiel om een basis te kiezen, ontvang zes harmonieschema's live, open in het bord of exporteer PNG.

OKLCH-editor

Stel L / C / H af in het perceptueel uniforme OKLCH-ruimte met live preview en oklch() / HEX / RGB-uitvoer.

Semantisch UI-palet

Voer één merkkleur in, ontvang primary / secondary / success / warning / danger — geëxporteerd als Tailwind-configuratie en CSS-variabelen.

Paletbord

Spatiebalk om te randomiseren, vergrendelen, slepen om opnieuw te ordenen, delen via URL — alles wat een paletbord zou moeten doen.

[ { "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" } ]

Genereer OKLCH-harmonieën in drie stappen

Perceptueel uniforme harmonieën met live contrast en gamutmapping bij elke stap.

Basis & regel

Typ of randomiseer een HEX, en kies vervolgens complementair, split-complementair, triadisch, tetradisch, analog of monochromatisch.

Fijn afstellen

Elke afgeleide staal heeft L/C/H-schuifregelaars in de OKLCH-ruimte; waarden buiten het gamut worden omgezet naar de dichtstbijzijnde weergeefbare kleur.

Exporteren

Bekijk het contrast met wit/zwart live, kopieer CSS-variabelen of JSON, of stuur de hele set naar het paletbord.

Harmonizer Veelgestelde Vragen

Drie veelgestelde vragen over OKLCH-harmonieën.

Hoe verschilt OKLCH-harmonie van wielgebaseerde harmonie?

In HSL is "gelijke helderheid" niet waarnemingsgelijk — gedraaide geel kleuren schitteren en blauw kleuren worden dof. OKLCH is waarnemingsuniform, dus kleurenrotatie behoudt daadwerkelijk helderheid en chroma, wat zorgt voor natuurlijk uitgebalanceerde paletten.

Wat als een schuifregelaar buiten het schermgamut terechtkomt?

De OKLCH-ruimte is groter dan sRGB. Waarden buiten het gamut worden automatisch toegewezen aan de dichtstbijzijnde weergavebare kleur, dus de hex die je ziet is de hex die je kunt gebruiken.

Hoe gebruik ik het resultaat in mijn project?

Kopieer de :root CSS-variabelen of JSON uit het exportgebied, of open de set in het paletbord om te vergrendelen, opnieuw te genereren en PNG/ASE en meer te exporteren.