Konverter OKLCH dan pembuat palet
Ubah antara OKLCH, heks, RGB, dan HSL, lalu bangun tanjakan yang tetap rata secara persepsi karena kecerahan dan kroma dipertahankan saat rona berputar. 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 tetap mengubah seberapa terang warnanya terlihat: kuning pada 50% terbaca jauh lebih terang daripada biru pada 50%, dan karena itu tanjakan HSL tampak timpang betapapun cermat Anda menatanya. OKLab disesuaikan dengan data persepsi, jadi sumbu kecerahannya mengikuti apa yang dilaporkan mata. Kunci L dan C, putar H, dan setiap petak membawa bobot visual yang sama — itulah seluruh alasan membangun palet di sini alih-alih di HSL.
Pemetaan gamut itulah yang menentukan
Banyak nilai OKLCH tak punya padanan di sRGB, dan perbaikan naifnya adalah menjejalkan tiap kanal kembali ke rentang. 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 dikenali sebagai dirinya, dan hanya mengambil kejenuhan yang memang tak sanggup ditampilkan layar. Halaman ini memakai algoritme CSS Color 4 — pencarian biner pada kroma, lalu menerima hasil pemangkasan begitu ia berada dalam beda yang nyaris tak terlihat dari warna yang telah diturunkan.
Diperiksa terhadap acuan
Konversinya dibandingkan dengan implementasi independen di atas kisi empat ribu warna: kecerahan dan kroma cocok sampai sepersejuta, rona sampai sepersepuluh ribu derajat, dan setiap nilai heks kembali persis sama. 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 OKLCH akan menyadari matriks yang keliru, jadi rasanya pantas menyebutkan bagaimana ia diperiksa.
Memakai keluarannya
Properti kustomnya ditulis dalam OKLCH dengan heks di sebelahnya sebagai komentar, karena itulah pasangan yang Anda inginkan saat peninjauan: nilai yang dikirim build Anda dan nilai yang bisa ditempel ke mana saja. Semua peramban yang dipakai sekarang memahami sintaks OKLCH; kalau Anda masih menopang satu yang tidak, komentar itulah cadangannya.
Pertanyaan Umum
Kenapa kroma dibatasi 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 beda yang nyaris tak terlihat di sini?
Delta E sebesar 0,02 di OKLab, ambang yang dipakai CSS Color 4. Di bawah itu, pemangkasan dan penurunan kroma tak terbedakan, jadi algoritmenya mengambil warna terpangkas dan menyimpan kroma tambahannya.
Apakah mendukung P3 atau Rec2020?
Belum. Semua di sini menyasar sRGB, dan itulah arti peringatan gamutnya. Gamut yang lebih luas butuh primer sendiri dan satu set matriks lagi.
Apakah ada dari ini yang dikirim ke mana pun?
Tidak. Semua konversinya berjalan di halaman ini.
Dibuat oleh tim GO AI. Kalkulator CSS clamp() · Semua perkakas gratis