Putar hue dan tingkatkan lightness di ruang OKLCH yang seragam secara persepsi — aturan harmoni yang sama, namun palet terlihat lebih baik daripada HSL. Setiap sampel yang diturunkan dapat disesuaikan secara independen, dengan kontras WCAG secara langsung.
: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"
}
]Harmoni yang seragam secara persepsi dengan kontras langsung dan pemetaan gamut di setiap langkah.
Ketik atau acak HEX, lalu pilih komplementer, split-komplementer, triadik, tetradik, analog, atau monokromatik.
Setiap sampel turunan memiliki slider L/C/H di ruang OKLCH; nilai di luar gamut dipetakan ke warna terdekat yang dapat ditampilkan.
Lihat kontras vs-putih/hitam secara langsung, salin variabel CSS atau JSON, atau kirim seluruh set ke papan palet.
Tiga pertanyaan umum tentang harmoni OKLCH.
Lanjutkan dari sini dan gunakan warna-warna tersebut.
Seret roda untuk memilih dasar, dapatkan enam skema harmoni secara langsung, buka di papan atau ekspor PNG.
Sesuaikan L / C / H di ruang OKLCH yang seragam secara persepsi dengan pratinjau langsung dan output oklch() / HEX / RGB.
Masukkan satu warna merek, dapatkan primer / sekunder / sukses / peringatan / bahaya — diekspor sebagai konfigurasi Tailwind dan variabel CSS.
Spasi untuk acak, kunci, seret untuk mengatur ulang, bagikan melalui URL — semua yang seharusnya dilakukan papan palet.