Konverter OKLCH dan pembuat palet
Ubah antara OKLCH, hex, RGB, dan HSL, lalu bangun gradasi warna yang tetap rata secara persepsi karena kecerahan dan kroma dipertahankan saat ronanya digeser. Warna di luar sRGB dipetakan dengan menurunkan kroma, bukan memangkas kanal — bedanya ada pada apakah ungu Anda tetap ungu.
Kenapa kecerahan di OKLCH punya arti
Di HSL, mengubah rona pada kecerahan yang sama mengubah seberapa terang warnanya terlihat: kuning pada 50% terbaca jauh lebih terang daripada biru pada 50%, dan karena itu gradasi HSL tampak timpang betapapun cermat Anda menatanya. OKLab dikalibrasi dengan data persepsi, jadi sumbu kecerahannya mengikuti apa yang dilaporkan mata. Kunci L dan C, putar H, dan setiap petak warna membawa bobot visual yang sama — itulah alasan utama membangun palet di sini alih-alih di HSL.
Pemetaan gamut itulah yang menentukan
Banyak nilai OKLCH tidak punya padanan di sRGB, dan perbaikan naifnya adalah memaksa tiap kanal masuk kembali ke rentangnya. Cara itu menggeser rona secara kasatmata: ungu pekat yang dipangkas kanal demi kanal melenceng ke biru. Menurunkan kroma sambil menahan kecerahan dan rona membuat warnanya tetap terlihat seperti warna aslinya, dan hanya membuang kejenuhan yang memang tak sanggup ditampilkan layar. Halaman ini memakai algoritme CSS Color 4 — pencarian biner pada kroma, lalu menerima hasil pemangkasan begitu selisihnya dengan warna hasil penurunan kroma nyaris tak terlihat.
Dicocokkan dengan acuan
Konversinya dibandingkan dengan implementasi independen pada kisi empat ribu warna: kecerahan dan kroma cocok sampai sepersejuta, rona sampai sepersepuluh ribu derajat, dan setiap nilai hex kembali persis sama setelah bolak-balik dikonversi. Pemetaan gamut diperiksa dengan cara yang sama terhadap empat ratus delapan puluh warna di luar gamut dan, pada kasus terburuk, meleset kurang dari satu bagian dalam 255. Pembaca yang terbiasa dengan OKLCH akan langsung sadar bila matriksnya keliru, jadi rasanya pantas menyebutkan bagaimana semuanya diperiksa.
Memakai keluarannya
Properti kustomnya ditulis dalam OKLCH dengan nilai hex di sebelahnya sebagai komentar, karena itulah pasangan yang Anda butuhkan saat review: nilai yang dikirim build Anda dan nilai yang bisa ditempel ke mana saja. Semua peramban yang dipakai sekarang memahami sintaks OKLCH; kalau Anda masih mendukung peramban yang tidak, komentar itulah cadangannya.
Pertanyaan Umum
Mengapa kroma dibatasi hingga 0,4?
Karena tidak ada yang mendekatinya di sRGB. Warna paling jenuh di sRGB adalah biru, sekitar 0,313, dan penggesernya sengaja melewati itu supaya Anda bisa melihat apa yang keluar gamut dan bagaimana ia dipetakan kembali.
Apa itu perbedaan terkecil yang masih terlihat di sini?
Delta E sebesar 0,02 di OKLab, ambang yang dipakai CSS Color 4. Di bawah itu, pemangkasan dan penurunan kroma tidak bisa dibedakan, jadi algoritmenya memilih warna hasil pemangkasan dan mempertahankan kroma ekstranya.
Apakah mendukung P3 atau Rec2020?
Belum. Semuanya di sini menyasar sRGB, dan itulah arti peringatan gamut tadi. Gamut yang lebih luas butuh warna primer tersendiri dan satu set matriks tambahan.
Apakah ada yang dikirim ke mana pun?
Tidak. Semua konversinya berjalan di halaman ini.
Dibuat oleh tim GO AI. Kalkulator CSS clamp() · Pemeriksa kontras WCAG · Semua alat gratis