Konverter HEX ke OKLCH

Apa Itu Konverter HEX ke OKLCH?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

Fitur Utama

Alternatif Konverter HEX ke OKLCH

Contoh HEX ke OKLCH

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

Konversi HEX → OKLCH yang Umum (Tailwind v4)

Tabel referensi dari 10 mid-shade palet default Tailwind v4 populer dengan ekuivalen HEX dan OKLCH-nya. Nilai cocok dengan presisi palet yang diterbitkan Tailwind v4 (tiga desimal pada L dan C, bilangan bulat atau satu desimal pada H).

Cara Menggunakan Konverter HEX ke OKLCH

1. 1

   Tempel kode hex ke bidang HEX

   Jatuhkan nilai hex apa pun ke input HEX — dengan atau tanpa `#` di depan, dalam singkatan 3 digit (`#F73`), bentuk lengkap 6 digit (`#3b82f6`), singkatan alpha 4 digit (`#F738`), atau bentuk lengkap alpha 8 digit (`#FF573380`). Parser menormalkan kelima bentuk input ke warna internal yang sama sebelum menurunkan OKLCH. Kapitalisasi tidak penting (`#3b82f6` dan `#3B82F6` diurai secara identik). Karakter tidak valid atau jumlah digit yang salah menghasilkan error inline yang tenang; hex yang valid memperbarui setiap bidang format lainnya secara waktu nyata, termasuk OKLCH.

2. 2

   Baca triple OKLCH dari bidang OKLCH

   Bidang OKLCH memunculkan nilai dalam bentuk modern CSS Color 4: `oklch(0.629 0.193 263.4)` untuk warna opak, `oklch(0.629 0.193 263.4 / 0.5)` untuk yang membawa alpha. L dibulatkan menjadi tiga desimal (cocok dengan presisi terbit Tailwind v4), C menjadi tiga desimal, H menjadi satu derajat desimal. Source-of-truth OKLCH internal alat berarti presisi float yang mendasarinya dipertahankan di setiap bidang lainnya — round-trip kembali ke hex tetap bit-stabil, tidak seperti konverter warisan pivot-HSL yang melayang satu atau dua derajat per round-trip.

3. 3

   Klik Salin untuk mengambil string OKLCH

   Setiap kartu format memiliki tombol Salin di sebelah kanan. Satu klik dan nilai mendarat di clipboard Anda — label tombol sebentar berkedip "Disalin!" sehingga Anda tahu. String yang disalin adalah sintaks kanonik CSS Color 4 (`oklch(0.629 0.193 263.4)`), siap dijatuhkan ke blok `@theme` Tailwind v4 atau definisi variabel-CSS shadcn/ui. Untuk output spesifik-platform (properti kustom CSS, token Tailwind v4, SwiftUI, Compose, Flutter), gunakan bagian Salin sebagai kode di bawah pemilih — snippet itu memancarkan format yang diharapkan setiap platform secara native.

4. 4

   Periksa lencana gamut Display P3 / Rec.2020

   Tiga lencana gamut (sRGB, Display P3, Rec.2020) menunjukkan apakah warna saat ini berada di dalam rentang yang dapat direproduksi setiap ruang. Jika lencana sRGB berubah merah tetapi P3 hijau, warnanya adalah OKLCH gamut-luas yang akan di-render dengan saturasi penuh pada perangkat keras Apple (iPhone, iPad, MacBook dari 2017+) tetapi mengalami penurunan saturasi pada monitor 24-bit warisan. Tombol **Snap ke sRGB** menggunakan reduksi-chroma biner (algoritma informatif CSS Color 4 §13) untuk mengecilkan warna ke dalam sRGB sambil mempertahankan L dan H, menghasilkan fallback hex yang dapat Anda kirim melalui `@supports not (color: oklch(0 0 0))`.

5. 5

   Juga terlihat: RGB, HSL, OKLAB, HSV, HWB, CMYK, nama warna

   Hex yang sama yang Anda tempel juga menyalakan delapan bidang format lainnya — RGB untuk panggilan canvas dan perangkat keras, HSL untuk variabel CSS warisan, OKLAB untuk matematika palet dan matriks buta warna, HSV dan HWB untuk alur kerja pemilih warna desainer, CMYK untuk estimasi cetak, dan nama warna CSS terdekat untuk prosa dokumentasi. Anda tidak pernah terkunci hanya pada hex → OKLCH. Pemilih (kotak SL + slider rona + slider alpha) menggerakkan kesembilan secara bersamaan, dan pada peramban Chromium tombol EyeDropper mengambil sampel piksel mana pun di layar, termasuk di luar peramban.

Kesalahan HEX / OKLCH yang Umum

Atur C OKLCH = 0,3 mengharapkan "saturasi 30%":
oklch(0.7 0.3 250) → mungkin melampaui gamut sRGB untuk biru
Warna gamut luas di-render dengan saturasi rendah pada layar warisan.

Perlakukan C sebagai chroma absolut, periksa lencana gamut:
oklch(0.7 0.15 250) → nyaman di sRGB untuk pasangan L+H ini
Gunakan lencana untuk menemukan C maks yang muat di gamut target.

Salin persentase L HSL ke OKLCH secara langsung:
hsl(220 50% 30%) diport sebagai oklch(0.30 0.10 220)
Kedua warna tampak berbeda secara nyata dalam kecerahan.

Turunkan kembali OKLCH dari hex asli, jangan port HSL:
hex sumber → konversi OKLCH → oklch(0.34 0.08 254)
L perseptual tetap benar; palet terasa merata.

Kirim oklch(0.7 0.4 30) tanpa memeriksa gamut sRGB:
Layar P3 merender merah jenuh; layar sRGB merender pudar
Warna brand tampak tidak konsisten di perangkat keras pengguna.

Periksa lencana gamut sRGB, Snap ke sRGB jika perlu, lapisi dengan @supports:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
Perangkat keras P3 mendapat nilai gamut-luas; perangkat keras sRGB mendapat fallback yang di-snap.

Definisikan warna brand hanya di OKLCH:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 dan iOS Safari lama tidak merender warna sama sekali.

Lapisi dengan @supports untuk fallback yang anggun:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
Peramban modern mendapat OKLCH; peramban warisan mendapat fallback hex.

Substitusi lch() untuk oklch() mengharapkan hasil yang sama:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — warna yang sama sekali berbeda
Disalin-tempel lintas ruang, nilainya diam-diam salah.

Pilih satu ruang dan tetap di dalamnya:
oklch(0.629 0.193 263.4) untuk sistem desain modern
atau lch(60% 50 240) — tetapi jangan tukar nama fungsi tanpa konversi ulang

Siapa yang Menggunakan HEX ke OKLCH

Developer Frontend Bermigrasi ke Token OKLCH Tailwind v4

Tailwind v4 menstandardisasi OKLCH untuk palet defaultnya pada Januari 2025. Memigrasikan codebase v3 dengan warna brand berbasis-hex berarti mengonversi setiap hex ke OKLCH dan menjatuhkan hasilnya ke blok `@theme` yang baru. Tempel setiap hex di sini, salin nilai `oklch()`, definisikan `--color-primary: oklch(0.629 0.193 263.4)` dan teman-temannya. Lencana gamut langsung menandai warna apa pun yang melampaui sRGB sehingga Anda dapat memutuskan apakah akan mempertahankan nilai gamut-luas untuk pengguna Display P3 atau snap ke sRGB.

Pembuat Tema shadcn/ui Membangun Palet Kustom

Tema variabel-CSS shadcn/ui menggunakan OKLCH untuk setiap token (`--background`, `--foreground`, `--primary`, dst.). Tema kustom diturunkan dari hex brand dasar dengan mengonversi ke OKLCH dan kemudian menyapu L untuk varian terang/gelap. Tempel hex brand, baca triple OKLCH, bangun sisa tema dengan menstep L sambil menahan C dan H tetap. Cocok dengan alur kerja kanonik shadcn dengan persis.

Pembuat Sistem-Desain Menghasilkan Ramp yang Merata Secara Perseptual

Hasilkan ramp 50/100/200/.../900 dengan menstep kanal L dalam kenaikan OKLCH yang sama sambil menahan C dan H tetap. Jarak visual antara stop yang berdekatan tampak identik di setiap rona — apa yang sebenarnya dibutuhkan palet warna brand. Tailwind v4 menggunakan persis konstruksi ini untuk palet defaultnya, dan shadcn/ui mencerminkannya. Tempel setiap hex brand, baca OKLCH, hasilkan ramp secara algoritmik atau melalui panel Tints/Shades/Tones di bawah pemilih.

Insinyur Aksesibilitas Memverifikasi Kontras di Ruang OKLCH

WCAG 2.1 dan APCA kontras keduanya melaporkan terhadap warna sRGB yang diselesaikan, bukan triple OKLCH — tetapi mengetahui L OKLCH dari warna brand membuat penyetelan kontras dapat diprediksi: tingkatkan L sebesar 0,1 untuk lulus AA terhadap putih, turunkan L sebesar 0,1 untuk lulus AA terhadap hitam. Tampilan OKLCH + WCAG + APCA bersamaan membuat hubungan itu terlihat. Tempel hex brand, saksikan lencana kontras, sesuaikan L di OKLCH (lebih dapat diprediksi daripada HSL) hingga pasangan lulus kedua metrik.

Web Dev Membangun Token Warna Gamut-Luas untuk Layar Modern

Kebanyakan perangkat Apple sejak 2017 (dan banyak perangkat Android modern) merender Display P3 secara native. Mendefinisikan warna aksen brand di OKLCH memungkinkan Anda mengalamatkan merah dan hijau jenuh khusus-P3 yang tidak dapat dikodekan kode hex mana pun. Tempel hex yang ada untuk membaca OKLCH-nya, lalu dorong kanal C melewati langit-langit sRGB untuk mengklaim saturasi P3 ekstra. Lencana gamut mengonfirmasi nilai baru cocok dengan P3 (dan fallback dengan anggun pada layar hanya-sRGB melalui kompresi chroma peramban).

Pendidik Mengajarkan Lightness Perseptual-vs-Geometris

Tampilan bersamaan OKLCH + HSL membuat perbedaan antara lightness perseptual dan geometris menjadi jelas. Tempel hijau jenuh dan biru jenuh pada L=50% HSL yang sama; nilai L OKLCH berbeda secara nyata karena OKLCH mengukur kecerahan perseptual yang sebenarnya. Seret slider rona HSL dan saksikan L OKLCH bergoyang sementara Anda menahan L HSL konstan — kurvanya adalah kekhasan gamma yang divisualisasikan. Demonstrasi siap-kelas tentang mengapa sistem desain bermigrasi ke OKLCH.

Pemelihara Open-Source Memodernisasi Dokumentasi Token

Dokumen sistem-desain yang lebih tua biasanya mencantumkan warna brand hanya sebagai kode hex. Memodernisasi ke OKLCH berarti menunjukkan warna yang sama di kedua ruang — hex untuk kompatibilitas blok-kode, OKLCH untuk tabel spek dan definisi token modern. Tempel setiap hex, salin output OKLCH, perbarui dokumen. Hash URL yang dapat dibagikan juga memungkinkan kontributor menautkan ke warna persis yang sedang dibahas dalam isu GitHub tanpa ambiguitas.

Matematika & Pipeline HEX ke OKLCH

HEX → OKLCH Adalah Pipeline 7-Langkah

Konversi merutekan melalui lima representasi perantara: hex → integer sRGB → sRGB ternormalisasi (0-1) → linear-sRGB (gamma-decoded) → CIE XYZ D65 → OKLAB → OKLCH. Setiap langkah adalah matriks atau fungsi piecewise yang terdefinisi dengan baik dari sumber utama. Alat menjalankan pipeline penuh pada setiap penekanan tombol; matematikanya cukup cepat (mikrodetik) sehingga tidak diperlukan debouncing. Memunculkan tuple RGB perantara di samping OKLCH berarti Anda dapat men-debug nilai OKLCH yang tidak diharapkan dengan memeriksa kanal RGB.

Fungsi Gamma CSS Color 4 §11.2

Konversi sRGB → linear-sRGB menggunakan fungsi piecewise CSS Color 4 §11.2: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. Bentuk piecewise (dengan segmen linear kecil di dekat nol) menghindari ketidakstabilan numerik dari bentuk eksponen-murni pada warna yang sangat gelap. Ini adalah fungsi yang sama yang digunakan profil ICC untuk mengkodekan sRGB dan fungsi yang sama yang digunakan peramban secara internal saat merender kode hex. Invers untuk OKLCH → hex menerapkan fungsi yang sama secara terbalik: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

Matriks CSS Color 4 §15.1: linear-sRGB ↔ XYZ D65

Matriks dari CSS Color 4 §15.1 mengonversi linear-sRGB ke CIE XYZ di bawah titik putih D65: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. Baris Y memberikan rumus luminansi sRGB. Matriksnya sama dengan yang digunakan di setiap pustaka manajemen-warna, termasuk ICC, Adobe Color Engine, dan pipeline open-source LCMS. Matriks invers untuk OKLCH → hex menerapkan invers §15.1.

Matriks OKLAB Ottosson 2020 dan Langkah Akar-Kubik

Konversi XYZ D65 → OKLAB menggunakan dua matriks dan langkah akar-kubik yang diterbitkan di makalah OKLAB 2020 karya Björn Ottosson. Matriks pertama mentransformasikan XYZ ke ruang respons-kerucut LMS (dimodelkan secara longgar pada sensitivitas kerucut L/M/S manusia). Akar-kubik setiap kanal untuk mengompres rentang dinamis secara non-linear (langkah-koreksi keseragaman-perseptual). Matriks kedua mentransformasikan LMS yang di-akar-kubik ke koordinat L/a/b OKLAB. Ketiga operasi menggunakan nilai persis yang diterbitkan di implementasi referensi makalah; tanpa derivasi ulang atau pembulatan. Invers untuk OKLCH → hex menerapkan matriks-matriks ini secara terbalik.

OKLAB ↔ OKLCH Adalah Cartesian-ke-Polar

Sumbu `a` dan `b` OKLAB membentuk bidang chroma yang tegak lurus terhadap sumbu L. OKLCH mengkodekan bidang itu secara polar: `C = sqrt(a² + b²)` (jarak Euclidean dari abu-abu), `H = atan2(b, a) * 180 / π` (sudut dalam derajat, dibungkus ke 0-360°). Invers: `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. Bentuk polar lebih disukai daripada OKLAB untuk penyimpanan token-desain karena Hue adalah sumbu yang stabil — memutar Hue tidak secara tidak sengaja cross-fade melalui abu-abu seperti memutar `a` atau `b` di OKLAB.

Deteksi Gamut via Pemeriksaan Rentang-Kanal

Sebuah warna dianggap dalam-gamut untuk ruang target (sRGB, Display P3, Rec.2020) jika setiap kanal jatuh di dalam `[-ε, 1 + ε]` setelah konversi ke primer ruang itu, di mana `ε = 1e-7` untuk menyerap noise presisi-float di sekitar batas. Lencana gamut untuk setiap ruang berubah merah ketika kanal mana pun melampaui rentang. OKLCH tidak terbatas-gamut — `oklch(0.7 0.4 30)` adalah koordinat yang valid tetapi dapat melampaui ruang byte 256-per-kanal sRGB. Pemeriksaan berjalan pada setiap penekanan tombol; dikombinasikan dengan Snap ke sRGB, ini menangkap jebakan adopsi yang paling umum (OKLCH gamut-luas tidak ditampilkan dengan benar pada layar warisan).

Reduksi-Chroma Biner Snap-ke-sRGB

Snap ke sRGB cocok dengan algoritma pemetaan-gamut informatif di CSS Color 4 §13: tahan L dan H tetap pada nilai saat ini, cari biner C ∈ [0, currentC] untuk C terbesar yang konversi sRGB-nya tetap dalam-gamut. Pencarian berjalan paling banyak 30 iterasi (presisi ~10⁻⁹), yang lebih dari cukup untuk akurasi visual. Mempertahankan L dan H berarti warna yang di-snap terbaca sebagai keluarga rona yang sama pada kecerahan yang sama — ia hanya kehilangan saturasi. Kami tidak memotong kanal RGB secara langsung karena itu mendistorsi rona secara nyata (terutama pada biru, yang terpotong ke arah ungu).

Praktik Terbaik untuk Alur Kerja HEX / OKLCH

Gunakan OKLCH sebagai Format Token Kanonik di Kode Baru

Untuk sistem desain apa pun yang dikirim pada 2025 atau lebih baru, definisikan warna brand dan ramp palet di OKLCH. Sumbu L memberikan ramp yang merata secara perseptual otomatis; sumbu Chroma dapat mengalamatkan warna gamut-luas yang tidak dapat dikodekan hex. Pertahankan fallback hex untuk peramban lama melalui `@supports not (color: oklch(0 0 0))` atau PostCSS saat-build, tetapi jadikan OKLCH source-of-truth di penyimpanan token Anda. Tailwind v4 dan shadcn/ui keduanya dikirim seperti ini; proyek baru dapat mengikuti jejak mereka tanpa gesekan.

Hasilkan Ramp dengan Menstep L, Menahan C dan H Konstan

Konstruksi ramp OKLCH kanonik: kunci C dan H, sapu L dalam kenaikan yang sama. Ramp 9-langkah `oklch(L 0.15 263)` untuk L = 0,1, 0,2, …, 0,9 menghasilkan jarak yang merata secara visual di setiap langkah. Inilah yang persis dilakukan Tailwind v4 secara internal. Jangan menyapu C bersama L kecuali Anda ingin intensitas kromatik ramp bervariasi secara sengaja (jarang). Jangan melayangkan H di seluruh langkah — bahkan pergeseran 5° membuat ramp terasa kacau.

Cocokkan Presisi Tailwind v4: 3 Desimal L+C, 1 Desimal H

Palet default Tailwind v4 menerbitkan nilai OKLCH dengan tiga tempat desimal pada L dan C, dan satu tempat desimal pada H — `oklch(0.629 0.193 263.4)` untuk blue-500. Mencocokkan presisi ini di token Anda sendiri berarti alur kerja tempel-ke-konfig menghasilkan nilai yang identik dengan yang dikirim Tailwind, dan alat diff tidak akan menandai perbedaan yang palsu. Pembulatan default alat mengikuti konvensi ini; copy-paste ke blok `@theme` adalah bit-eksak.

Jalankan OKLCH Gamut-Luas Melalui Pemeriksaan Gamut Display P3

Jika Anda menargetkan perangkat keras Apple modern (iPhone, iPad, MacBook dari 2017+) atau mengirim konten sadar-HDR, lencana gamut memungkinkan Anda mendorong C melewati langit-langit sRGB untuk mengklaim saturasi P3 ekstra. Kompresi chroma yang diterapkan peramban menjaga warna agar tidak terpotong pada layar hanya-sRGB. Jangan pra-snap ke sRGB secara default kecuali Anda tahu seluruh audiens Anda menggunakan layar warisan — itu kehilangan 30%+ saturasi yang dapat dirender perangkat keras P3.

Sediakan Fallback Hex via @supports untuk Peramban Pra-2023

Meskipun dukungan peramban evergreen untuk `oklch()` sekarang 94%+, ekor panjang (IE 11, Android Chrome lama, webview tersemat) masih membutuhkan fallback. Bungkus token di `@supports (color: oklch(0 0 0))` dan sediakan varian hex di cabang alternatif. Output Snap ke sRGB persis fallback itu — dihasilkan secara otomatis dari triple OKLCH saat ini dengan L dan H dipertahankan. Plugin PostCSS saat-build seperti `postcss-oklab-function` juga dapat menyisipkan aproksimasi sRGB pada waktu kompilasi.

Dokumentasikan OKLCH dan Hex Sumber di Token Anda

Ketika Anda mengirim variabel CSS seperti `--color-primary: oklch(0.629 0.193 263.4)`, sertakan komentar dengan hex sumber: `/* source: #3b82f6 (Tailwind blue-500) */`. Enam bulan kemudian, ketika seseorang perlu menurunkan shade terkait atau memeriksa nilai terhadap PDF panduan brand, hex sumber mempertahankan jejak provenans penuh. OKLCH saja bermakna tetapi lebih sulit dikenali dalam sekilas; hex sumber adalah pengenal yang akan dicari sebagian besar rekan tim terlebih dahulu.

Gunakan Hash URL untuk Berbagi Keputusan Warna Langsung

Setiap perubahan warna memperbarui hash URL sebagai `#hex=3b82f6` atau `#oklch=...` secara otomatis. Salin URL ke thread Slack atau isu GitHub dan siapa pun yang membukanya mendarat pada warna yang sama dengan triple OKLCH yang sama. Ini lebih andal daripada menempelkan string OKLCH di chat — penerima kadang salah ketik desimal atau membungkus presisi yang salah — dan memungkinkan thread review desain mereferensikan warna persis alih-alih "biru brand yang kita bahas Selasa." Hash tidak pernah ditransmisikan ke server.

Pertanyaan yang Sering Diajukan