Konverter Warna OKLCH

• Konversi OKLCH Instan: Konverter OKLCH memperbarui semua format keluaran pada setiap gerakan penggeser - tidak perlu menekan tombol. Sesuaikan Lightness, Chroma, dan Hue dan langsung dapatkan nilai HEX, RGB, HSL, dan OKLab. Contoh warna real-time menunjukkan dengan tepat bagaimana warna OKLCH akan muncul di layar.
• Ruang Warna yang Secara Persepsi Seragam: OKLCH adalah ruang warna yang secara persepsi seragam - langkah numerik yang sama menunjukkan perbedaan warna yang dirasakan sama, tidak seperti HSL atau RGB. Konverter OKLCH memudahkan penggunaan format CSS Color Level 4 modern ini untuk gradien yang lebih baik, skala warna, dan pilihan warna yang mudah diakses.
• 100% Pribadi - Tanpa Unggahan: Semua konversi terjadi secara lokal di browser Anda menggunakan JavaScript murni. Nilai warna Anda tidak pernah meninggalkan perangkat Anda dan tidak pernah dikirim ke server mana pun - aman untuk proyek klien dan sistem desain eksklusif.
• Gratis & Tanpa Batas: Konversi warna OKLCH tanpa batas tanpa pendaftaran, tanpa berlangganan, dan tanpa batasan penggunaan. Konverter OKLCH sepenuhnya gratis selamanya tanpa iklan yang memblokir antarmuka. Termasuk deteksi gamut dan saran dalam gamut terdekat.

• Pengembangan CSS Modern: Pengembang frontend menggunakan konverter OKLCH untuk membuat dan memverifikasi warna dalam CSS modern. Dengan oklch() yang kini didukung di semua browser utama, konverter OKLCH membantu Anda menulis kode warna yang lebih bersih dan mudah dipelihara menggunakan ruang warna yang seragam.
• Pembuatan Gradien Halus: OKLCH menghasilkan gradien yang jauh lebih halus dan akurat secara visual dibandingkan sRGB atau HSL. Gunakan konverter OKLCH untuk menemukan nilai kecerahan, kroma, dan rona yang tepat untuk penghentian gradien yang bertransisi secara alami tanpa titik tengah berlumpur.
• Skala Warna yang Dapat Diakses: Spesialis aksesibilitas menggunakan konverter OKLCH karena keseragaman persepsinya membuatnya ideal untuk menghasilkan skala warna yang dapat diakses. Langkah yang sama dalam kecerahan OKLCH sesuai dengan langkah kontras yang dirasakan sama, membuat jalur warna yang sesuai dengan WCAG lebih mudah dibuat.
• Token Warna Sistem Desain: Insinyur sistem desain menggunakan konverter OKLCH untuk menentukan token warna dengan cara yang bermakna secara persepsi. Ruang warna OKLCH memudahkan pembuatan skala warna sistematis di mana setiap langkah memiliki bobot visual yang konsisten di semua rona.
• Ilmu & Penelitian Warna: Para peneliti dan ilmuwan warna menggunakan konverter OKLCH untuk menjelajahi ruang warna OKLab/OKLCH. Alat ini memberikan nilai OKLab mentah bersama dengan format keluaran standar, sehingga berguna untuk memahami matematika ruang warna dan model persepsi.
• Migrasi Warisan ke CSS Modern: Saat memigrasikan sistem warna hex atau rgb() lama ke oklch() modern, gunakan konverter OKLCH untuk memahami nilai OKLCH yang setara. Ini membantu Anda membangun intuisi untuk ruang warna baru sambil secara bertahap mengadopsi sintaksis CSS Color Level 4.

OKLCH (Lightness-Chroma-Hue) adalah ruang warna modern yang diperkenalkan oleh Björn Ottosson pada tahun 2020. Ini adalah bagian dari CSS Color Level 4 dan dirancang agar terlihat seragam - artinya perubahan numerik yang sama pada nilai OKLCH menghasilkan persepsi perbedaan warna yang sama. Ini merupakan peningkatan yang signifikan dibandingkan ruang warna lama seperti HSL dan sRGB, yang persepsinya tidak seragam dan dapat menghasilkan hasil visual yang tidak konsisten saat menginterpolasi warna.

Konverter OKLCH mendukung pipeline OKLCH lengkap: mengkonversi antara OKLCH, OKLab (ruang koordinat persegi panjang yang mendasarinya), sRGB linier, dan format sRGB standar termasuk HEX, RGB, dan HSL. Semua konversi menggunakan matematika matriks eksak Ottosson tanpa perkiraan.

1. Sesuaikan penggeser OKLCH: Atur Lightness (L: 0-1), Chroma (C: 0-0.4+), dan Hue (H: 0-360°) menggunakan penggeser interaktif atau input numerik. Anda juga dapat mengklik chip warna sampel apa pun untuk langsung memuat nilai OKLCH yang telah ditetapkan sebelumnya. Transparansi alfa didukung untuk warna semi-transparan.
2. Konversi berjalan dalam waktu nyata: Saat Anda menyesuaikan penggeser apa pun, nilai OKLCH dikonversi melalui OKLab ke sRGB linier dan kemudian ke format HEX, RGB, dan HSL. Semua nilai diperbarui secara instan tanpa perlu menekan tombol. Contoh warna menunjukkan pratinjau visual dari warna yang dikonversi.
3. Pemeriksaan gamut dilakukan secara otomatis: Konverter OKLCH secara otomatis mendeteksi jika warna berada di luar gamut sRGB. Jika ya, peringatan akan ditampilkan bersama warna gamut terdekat yang dicapai dengan mengurangi kroma sambil menjaga kecerahan dan rona tetap konstan.
4. Menyalin nilai apa pun: Klik tombol Salin di samping baris keluaran atau kartu format mana pun untuk menyalin nilai spesifik tersebut, atau gunakan “Salin Semua Nilai” untuk menyalin data warna lengkap termasuk komponen mentah OKLab.

• Lightness (L): Berkisar dari 0 (hitam) hingga 1 (putih). Berbeda dengan HSL yang ringan, ringannya OKLCH sangat sesuai dengan persepsi manusia. Kecerahan 0,5 secara visual terlihat di tengah-tengah antara hitam dan putih, apa pun rona atau kromanya.
• Chroma (C): Mengontrol intensitas atau saturasi warna. Sebagian besar warna sRGB memiliki nilai kroma antara 0 dan 0,25, meskipun beberapa warna ungu tua dan sian dapat mencapai hingga 0,3. Nilai di atas 0,3 semakin besar kemungkinannya berada di luar kisaran sRGB. Maksimum teoretis untuk kroma OKLCH tidak terbatas.
• Hue (H): Sudut warna dari 0-360 derajat, cocok dengan sudut rona yang sama dengan OKLab. 0° = merah/merah muda, 90° = kuning, 180° = hijau, 270° = biru. Rona OKLCH secara persepsi seragam - langkah sudut yang sama menghasilkan perbedaan rona yang dirasakan sama.
• Alpha (A): Mengontrol transparansi dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya buram). Nilai alfa diteruskan melalui jalur konversi ke semua format keluaran, sehingga Anda dapat menggunakan warna yang dihasilkan dalam konteks CSS apa pun yang memerlukan transparansi.

OKLCH vs HSL: HSL tidak seragam secara persepsi - dua warna dengan kecerahan HSL yang sama dapat terlihat sangat berbeda kecerahannya (misalnya, kuning pada L=50% terlihat jauh lebih terang daripada biru pada L=50%). OKLCH memperbaiki masalah mendasar ini. HSL juga menghasilkan titik tengah berlumpur saat melakukan interpolasi antara dua warna, sementara gradien OKLCH mempertahankan saturasi dan kualitas visual yang konsisten.

OKLCH vs LCH: LCH (berbasis CIE L*a*b*) telah tersedia dalam CSS lebih lama tetapi memiliki kelemahan yang signifikan - dapat menghasilkan warna yang tidak valid saat mengukur linearitas rona. OKLCH dirancang khusus agar lebih kuat dan lebih mewakili cara sistem visual manusia memandang warna. Keduanya didukung dalam CSS modern, namun OKLCH adalah pilihan yang direkomendasikan untuk proyek baru.

OKLCH vs sRGB: sRGB adalah ruang warna standar untuk konten web tetapi bergantung pada perangkat dan tidak seragam secara persepsi. OKLCH adalah ruang warna yang tidak bergantung pada perangkat dan dapat mewakili warna di luar gamut sRGB (tampilan gamut lebar). Konverter OKLCH membantu Anda memahami kapan warna Anda melebihi sRGB dan menunjukkan alternatif in-gamut terdekat.