Harmonizátor OKLCH

Rotace odstínu a krok světlosti v perceptivně uniformním prostoru OKLCH – stejná pravidla harmonie, ale palety vypadají jednoduše lépe než HSL. Každý odvozený vzorek lze nezávisle ladit s živým kontrastem WCAG.

#2b9d8f

Základníoproti bílé 3.3 · oproti černé 6.3

L · 63%C · 0.101H · 183°

#957abc

H +120°oproti bílé 3.6 · oproti černé 5.8

L · 63%C · 0.101H · 303°

#b47b44

H +240°oproti bílé 3.6 · oproti černé 5.9

L · 63%C · 0.101H · 63°

Exportovat

Otevřít v paletě

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

Generujte harmonie OKLCH ve třech krocích

Percepčně uniformní harmonie s živým kontrastem a mapováním gamu v každém kroku.

01
Základ a pravidlo
Zadejte nebo náhodně vyberte HEX, poté vyberte komplementární, split-komplementární, triadickou, tetradickou, analogickou nebo monochromatickou.
02
Doladění
Každý odvozený vzorek má posuvníky L/C/H v prostoru OKLCH; hodnoty mimo gamu se mapují na nejbližší zobrazitelnou barvu.
03
Exportovat
Sledujte živý kontrast s bílou/černou, zkopírujte CSS proměnné nebo JSON, nebo odešlete celou sadu na paletovou desku.

FAQ Harmonizéru

Tři běžné otázky o harmoniích OKLCH.

Jak se harmonie OKLCH liší od harmonie založené na barevném kolečku?: V modelu HSL není „rovnoměrná světlost“ vnímavě rovnoměrná – otočené žluté barvy oslňují a modré ztrácejí lesk. OKLCH je vnímavě uniformní, takže rotace odstínu skutečně zachovává světlost a sytost, což vytváří přirozeně vyvážené palety.
Co když se posuvník dostane mimo barevný rozsah obrazovky?: Prostor OKLCH je větší než sRGB. Hodnoty mimo barevný rozsah jsou automaticky mapovány na nejbližší zobrazitelnou barvu, takže zobrazený HEX kód můžete přímo použít.
Jak použít výsledek v mém projektu?: Zkopírujte CSS proměnné :root nebo JSON z exportní oblasti, nebo otevřete sadu na paletové desce pro uzamčení, opětovné generování a export PNG/ASE a další formáty.

Po získání výsledku

Pokračujte odsud a využijte barvy v praxi.

Barevné kolo

Přetáhněte kolo pro výběr základní barvy, získejte šest harmonických schémat v reálném čase, otevřete v desce nebo exportujte PNG.

Editor OKLCH

Upravte L / C / H v percepčně uniformním prostoru OKLCH s živým náhledem a výstupem oklch() / HEX / RGB.

Sémantická paleta pro UI

Zadejte jednu značkovou barvu a získejte primární / sekundární / úspěch / varování / nebezpečí – export jako konfigurace Tailwind a CSS proměnné.

Paletová deska

Mezerník pro náhodné generování, zamykání, přetahování pro změnu pořadí, sdílení přes URL – vše, co paletová deska má dělat.

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

Generujte harmonie OKLCH ve třech krocích

Percepčně uniformní harmonie s živým kontrastem a mapováním gamu v každém kroku.

Základ a pravidlo

Zadejte nebo náhodně vyberte HEX, poté vyberte komplementární, split-komplementární, triadickou, tetradickou, analogickou nebo monochromatickou.

Doladění

Každý odvozený vzorek má posuvníky L/C/H v prostoru OKLCH; hodnoty mimo gamu se mapují na nejbližší zobrazitelnou barvu.

Exportovat

Sledujte živý kontrast s bílou/černou, zkopírujte CSS proměnné nebo JSON, nebo odešlete celou sadu na paletovou desku.

FAQ Harmonizéru

Tři běžné otázky o harmoniích OKLCH.

Jak se harmonie OKLCH liší od harmonie založené na barevném kolečku?

V modelu HSL není „rovnoměrná světlost“ vnímavě rovnoměrná – otočené žluté barvy oslňují a modré ztrácejí lesk. OKLCH je vnímavě uniformní, takže rotace odstínu skutečně zachovává světlost a sytost, což vytváří přirozeně vyvážené palety.

Co když se posuvník dostane mimo barevný rozsah obrazovky?

Prostor OKLCH je větší než sRGB. Hodnoty mimo barevný rozsah jsou automaticky mapovány na nejbližší zobrazitelnou barvu, takže zobrazený HEX kód můžete přímo použít.

Jak použít výsledek v mém projektu?

Zkopírujte CSS proměnné :root nebo JSON z exportní oblasti, nebo otevřete sadu na paletové desce pro uzamčení, opětovné generování a export PNG/ASE a další formáty.