Konverter Warna — HEX, RGB, HSL & OKLCH

Apa Itu Konverter Warna?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
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 matrix), 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;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Fitur Utama

Perbandingan Alternatif Konverter Warna

Contoh Konversi Warna

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

Cara Menggunakan Konverter Warna

1. 1

   Tempel atau ketik warna apa pun dalam format apa pun

   Setiap satu dari 9 bidang format (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Named) dapat diedit langsung — tidak ada tombol "Konversi" untuk diklik. Tempel hex dari Figma, ketik nilai `oklch()` dari config Tailwind, jatuhkan `hsl()` dari stylesheet lama, atau bahkan ketik nama warna CSS seperti `tomato`. Alat ini mengurai secara inkremental saat Anda mengetik, sehingga nilai yang setengah-diketik tidak akan menghancurkan yang lain hingga Anda mengomit format yang valid. Input yang tidak valid mendapat error inline yang tenang; input yang valid memperbarui seluruh grid.

2. 2

   Semua 9 format diperbarui secara instan

   Source-of-truth internal adalah OKLCH (seragam perseptual, tidak terbatas-gamut), dan setiap format lainnya diturunkan darinya pada setiap penekanan tombol. Bidang yang sedang Anda ketik mempertahankan posisi kursornya tidak tersentuh — hanya *delapan* bidang lainnya yang di-render ulang. Ini berarti Anda dapat mengedit kanal L OKLCH secara langsung dan menyaksikan hex, RGB, HSL, dan CMYK semua bergeser secara waktu nyata tanpa kehilangan kursor Anda. Matematika konversi berjalan sepenuhnya di JavaScript menggunakan primitif OKLAB yang sama yang dikirim di peramban modern.

3. 3

   Gunakan pemilih untuk eksplorasi visual

   Di bawah grid format adalah kotak saturasi-lightness (seret di mana saja untuk mengatur S+L untuk rona saat ini), slider rona (seret untuk berputar di sekitar roda warna), dan slider alpha (seret untuk mengatur transparansi). Pada peramban berbasis Chromium (Chrome, Edge, Brave) tombol **Eyedropper** mengaktifkan `EyeDropper` API native — klik di mana saja di layar, termasuk di luar jendela peramban, untuk mengambil sampel warna piksel itu. Safari dan Firefox belum mengirim API, sehingga tombolnya disembunyikan di peramban itu dan kotak SL + slider rona tetap menjadi pemilih utama.

4. 4

   Periksa gamut dan kontras dalam sekilas

   Tiga lencana gamut (**sRGB**, **Display P3**, **Rec2020**) menunjukkan apakah warna saat ini berada di dalam rentang yang dapat direproduksi setiap ruang — berguna ketika Anda bekerja di OKLCH dan ingin tahu layar mana yang akan merender nilai secara akurat. Baris kontras menunjukkan rasio WCAG 2.1 terhadap putih dan hitam, ditambah skor APCA Lc (metrik WCAG 3 berpandangan-ke-depan). Lencana lulus / gagal (AA, AAA) muncul inline. Jika warna di luar gamut sRGB, tombol **Snap ke sRGB** mengecilkan chroma hingga pas.

5. 5

   Salin dalam sintaks native platform Anda

   Setiap dari 9 bidang format memiliki tombol **Salin** sendiri — satu klik, nilai mendarat di clipboard Anda, label sebentar beralih ke "Disalin!" sehingga Anda tahu. Di bawah pemilih, bagian **Salin sebagai kode** menghasilkan snippet siap-tempel untuk lima platform: properti kustom CSS, token `@theme` Tailwind v4, literal SwiftUI `Color(red:green:blue:)`, konstanta Jetpack Compose `Color(0xFF...)`, dan Flutter `Color(0xFF...)`. Hash URL (`#hex=...` atau `#oklch=...`) juga diperbarui sehingga Anda dapat membagikan tautan langsung ke warna yang persis.

Kesalahan Konversi Warna yang Umum

Asumsikan palet HSL seragam secara perseptual:
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
Di layar ini tampak berjarak tidak rata.

Gunakan OKLCH untuk ramp seragam-perseptual:
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
Di layar ini tampak berjarak rata.

Kirim output CMYK kami langsung ke press:
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
Hasil cetak mungkin terlihat keruh atau terlalu jenuh.

Kirim hex asli ke penyedia cetak:
hex #FF6347 → biarkan percetakan ICC-konversi terhadap press mereka
Hasil cetak cocok dengan warna layar jauh lebih dekat.

Pura-pura Lc 60 = WCAG 4.5:1:
APCA Lc 60 → "ini lulus AA"
Rasio WCAG 2 untuk pasangan yang sama mungkin 3.8:1 (gagal AA).

Periksa kedua metrik secara independen:
Rasio WCAG 2 ≥ 4.5:1 untuk kepatuhan teks badan AA, DAN
APCA |Lc| ≥ 75 untuk keterbacaan dunia-nyata.
Keduanya harus lulus, bukan satu menggantikan yang lain.

Step L HSL untuk shade:
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
90% tampak pudar; 30% tampak jauh lebih gelap daripada selisih ke 60%.

Step L OKLCH untuk shade:
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Setiap langkah tampak seperti selisih visual yang sama.

Salin hex 8 digit ke parser warisan:
#FF573380 → parser memotong → #FF5733 (tanpa alpha)
Transparansi 50% diam-diam hilang.

Verifikasi target mendukung hex 8 digit, atau gunakan rgba():
untuk CSS modern: #FF573380 (hex 8 digit)
untuk dukungan warisan: rgba(255, 87, 51, 0.5) (selalu didukung)
Sintaks alpha eksplisit menghindari pemotongan diam-diam.

Snap setiap warna OKLCH ke sRGB secara default:
oklch(0.7 0.25 30) → snap → oklch(0.7 0.18 30)
Layar P3 kehilangan saturasi 30%+ tanpa alasan.

Periksa lencana Display P3 terlebih dahulu:
jika muat-P3: pertahankan nilai gamut-luas, tambahkan fallback sRGB melalui @supports
jika melampaui P3: lalu snap ke sRGB
Biarkan perangkat keras gamut-luas melakukan pekerjaannya.

Siapa yang Menggunakan Alat Ini

Developer Frontend Bermigrasi ke Token OKLCH Tailwind v4

Tailwind v4 menstandardisasi OKLCH untuk palet defaultnya pada 2024. Memigrasikan sistem desain lama berbasis-HSL atau berbasis-hex berarti mengonversi ratusan warna brand ke OKLCH. Tempel setiap hex, salin output OKLCH, jatuhkan ke blok `@theme`. Lencana gamut langsung menandai warna apa pun yang melampaui sRGB sehingga Anda dapat memutuskan apakah akan mempertahankan nilai gamut-lebih-lebar untuk layar Display P3.

Desainer Menerjemahkan Warna Figma ke iOS / Android

Figma mengekspor hex secara default, tetapi iOS menginginkan literal SwiftUI `Color(red:green:blue:)` dan Android menginginkan konstanta Jetpack Compose `Color(0xFF...)`. Tempel hex Figma sekali, salin snippet SwiftUI untuk insinyur iOS dan snippet Compose untuk insinyur Android — keduanya sudah dalam sintaks yang persis diharapkan setiap platform, dengan hex asli dipertahankan dalam komentar untuk keterlacakan.

Desainer Menyiapkan Proof Cetak (Aproksimasi CMYK)

Ketika warna brand harus muncul di kartu nama yang dicetak, aproksimasi CMYK memberikan estimasi cepat untuk dibagikan dengan percetakan sebelum konversi ICC yang tepat. Tempel hex brand, salin persentase CMYK, kirim ke percetakan untuk penawaran harga cepat — lalu serahkan kepada konversi sadar-profil-ICC milik percetakan untuk pencocokan warna akhir terhadap press tertentu.

Insinyur Aksesibilitas Memverifikasi WCAG dan APCA

WCAG 2.1 adalah standar regulasi (ADA, EAA, Section 508) hari ini; APCA Lc adalah penerus WCAG 3 yang diusulkan. Kedua metrik ditampilkan berdampingan berarti seorang desainer dapat memverifikasi warna teks-badan mencapai 4,5:1 WCAG terhadap putih, lalu memeriksa-kewarasan bahwa ia juga melewati APCA Lc 75, dalam satu layar — tanpa berpindah antara dua kalkulator terpisah.

Pendidik Mengajarkan Konsep Ruang-Warna

Tampilan sembilan-bidang yang bersamaan membuat hubungan ruang-warna terlihat. Ketik nilai OKLCH, saksikan HSL melayang karena L berarti hal yang berbeda di setiap ruang. Seret slider rona dan saksikan hex, RGB, dan CMYK semua diperbarui. Tunjukkan lencana gamut berubah merah saat Anda mendorong chroma melewati sRGB. Alat ini adalah demo kelas-nya sendiri untuk kursus grafis tingkat-kuliah atau HCI.

Manajer Brand Menemukan Nama Warna CSS Terdekat

Ketika salinan pemasaran mengatakan "aksen berwarna tomato" tetapi hex brand sebenarnya adalah `#FF6347`, bidang Named mengembalikan `tomato (exact)` karena itu adalah hal yang persis diselesaikan `tomato` di spesifikasi CSS. Untuk hex yang nyaris-meleset, bidang mengembalikan nama warna terdekat dengan jarak ΔE di OKLAB — berguna untuk dokumentasi, prosa, dan penamaan warna kasual.

Web Dev Mengonversi Palet HEX Warisan ke OKLCH

Situs yang lebih tua mungkin memiliki palet brand 50-warna yang didefinisikan dalam properti kustom CSS sebagai kode hex. Memodernisasi ke OKLCH memungkinkan tim brand mengekspresikan ramp yang sama dalam ruang yang seragam-perseptual. Tempel setiap hex, salin output OKLCH, tukar ke definisi variabel. Panel Tints/Shades di bawah memverifikasi ramp yang dihasilkan merata secara visual sebelum mengirim.

Pemelihara Open-Source Mendokumentasikan Token Desain

Dokumentasi token desain biasanya perlu menunjukkan warna yang sama dalam beberapa sintaks — hex untuk blok kode CSS, OKLCH untuk tabel spesifikasi, nama warna untuk menyebutkan dalam prosa. Tampilan bidang-bersamaan memungkinkan seorang pemelihara menyalin masing-masing dalam satu kali jalan alih-alih menjalankan tiga konversi terpisah. Hash URL yang dapat dibagikan juga memungkinkan kontributor menautkan ke warna yang persis sedang dibahas dalam isu GitHub.

Matematika & Algoritma Konversi Warna

OKLCH sebagai Source-of-Truth Internal

Alat menahan nilai warna kanonik sebagai triple OKLCH secara internal. Setiap bidang yang dapat diedit menurunkan nilai tampilannya dari triple itu pada setiap penekanan tombol; setiap edit pengguna memperbarui triple terlebih dahulu, lalu memicu render ulang dari delapan bidang lainnya. Ini menghilangkan pergeseran float per-langkah yang menyusahkan konverter yang menggunakan HSL atau sRGB sebagai pivot. Pilihan OKLCH di atas OKLAB disengaja — bentuk polar mempertahankan Hue sebagai sumbu yang stabil, sehingga menyeret slider rona tidak secara tidak sengaja melintasi-fade melalui abu-abu. Per makalah 2020 Björn Ottosson, keseragaman perseptual OKLAB adalah argumen terkuat untuk memperlakukannya sebagai lingua franca matematika warna modern.

Sumber Matriks (W3C CSS Color 4 + Ottosson 2020)

Setiap matriks konversi dalam basis kode dikutip ke sumber primernya. Fungsi gamma piecewise sRGB ↔ linear-sRGB adalah W3C CSS Color 4 §11.2 (`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`). Matriks 3×3 linear-sRGB ↔ CIE XYZ D65 adalah CSS Color 4 §15.1. Matriks XYZ D65 ↔ LMS dan langkah akar-kubik OKLAB berasal dari implementasi referensi `https://bottosson.github.io/posts/oklab/` Ottosson, persis seperti yang dipublikasikan. Tidak ada matriks yang dihitung ulang atau diturunkan ulang — menyalinnya apa adanya menjaga output identik dengan vektor referensi spesifikasi.

Rumus CMYK Naif dan Peringatan ICC

Output CMYK kami menggunakan rumus buku teks standar: `K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K)` yang beroperasi pada nilai sRGB yang dinormalkan. Ini adalah aproksimasi yang disengaja. Akurasi cetak sungguhan memerlukan konversi profil ICC terhadap press tertentu, tinta (mis. US Web Coated SWOP v2, Fogra39, Japan Color 2011), dan kertas, yang dapat menggeser kanal sebesar 5-15%. Kami memunculkan bidang CMYK dengan penafian yang terlihat sehingga pengguna tidak mengirim nilai kami langsung ke press. Perlakukan output sebagai pemeriksaan kewarasan untuk penawaran, bukan deliverable.

Deteksi Gamut melalui Pemeriksaan Rentang-Kanal

Sebuah warna dianggap di-gamut untuk ruang target (sRGB, Display P3, Rec2020) jika setiap kanal berada 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. Ini menangkap kasus umum — warna OKLCH gamut-luas seperti `oklch(0.7 0.4 30)` melaporkan di-luar-sRGB tetapi di-P3, memberi tahu Anda layar mana yang akan merendernya secara akurat. Pemeriksaan berjalan pada setiap penekanan tombol.

Algoritma Snap Reduksi-Chroma

Snap ke sRGB menggunakan pencarian biner pada sumbu Chroma: tahan L dan H tetap pada nilai saat ini, cari C ∈ [0, currentC] untuk C terbesar yang konversi sRGB-nya tetap di-gamut. Pencarian berjalan paling banyak 30 iterasi (presisi ~10⁻⁹), yang lebih dari cukup untuk akurasi visual. Ini cocok dengan algoritma pemetaan-gamut informatif yang dijelaskan di CSS Color 4 §13 — mempertahankan lightness dan rona sementara mengurangi hanya chroma menjaga warna yang di-snap dikenali sebagai keluarga rona yang sama. Kami tidak meng-clip kanal RGB langsung karena itu mendistorsi rona secara mencolok (terutama di biru).

Matriks CVD Brettel + Machado

Simulasi buta warna menggunakan dua keluarga matriks yang dipublikasikan. Tiga dikromasi — protanopia, deuteranopia, tritanopia — menggunakan matriks Brettel-Viénot-Mollon 1997 yang beroperasi di RGB linear (decode gamma terlebih dahulu, terapkan matriks, encode gamma kembali). Tiga trikromasi anomalus — protanomaly, deuteranomaly, tritanomaly — menggunakan matriks Machado-Oliveira-Fernandes 2009 pada keparahan 0,66, yang sesuai dengan pasien trikromasi-anomalus tipikal. Achromatopsia dan achromatomaly parsial menggunakan bobot luminansi rec601 (`0.299R + 0.587G + 0.114B`) untuk proyeksi grayscale. Semua delapan simulasi di-render pada setiap perubahan warna.

WCAG 2 vs APCA: Mana Digunakan Kapan

WCAG 2.x (standar saat ini) menghitung rasio kontras simetris dari luminansi relatif: `(L1 + 0.05) / (L2 + 0.05)`, target 4,5:1 untuk teks badan normal dan 7:1 untuk AAA. Itu adalah lantai kepatuhan legal untuk audit aksesibilitas pada 2026. APCA (Accessible Perceptual Contrast Algorithm) adalah penerus WCAG 3 yang diusulkan — peka-polaritas (terang-di-gelap memberi skor berbeda dari gelap-di-terang), lebih berkorelasi dengan keterbacaan yang dipersepsikan manusia, target `|Lc| ≥ 75` untuk teks badan. Kedua metrik ditampilkan dalam satu baris memungkinkan desainer mencapai WCAG 2 untuk kepatuhan dan APCA untuk keterbacaan dunia-nyata tanpa berpindah antara dua kalkulator terpisah.

Praktik Terbaik untuk Konversi Warna

Lebih Pilih OKLCH untuk Token Sistem-Desain; HEX untuk Warisan

Untuk setiap sistem desain baru yang dikirim pada 2025 atau setelahnya, 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 yang lebih lama melalui `@supports not (color: oklch(0 0 0))` atau PostCSS saat-build, tetapi jadikan OKLCH nilai kanonik di toko token Anda. Sistem warisan dengan ribuan variabel hex yang ada dapat tetap hex hingga migrasi yang direncanakan — jangan berpaling untuk kepentingannya sendiri.

Perlakukan Output CMYK sebagai Aproksimasi, Konfirmasi dengan Penyedia Cetak

Angka CMYK yang dimunculkan alat ini adalah rumus naif berbasis-sRGB, bukan konversi profil-ICC. Gunakan untuk penawaran perkiraan dan komp internal. Sebelum run cetak nyata, kirim hex asli (bukan aproksimasi CMYK) ke penyedia cetak dan biarkan mereka menjalankan konversi ICC mereka sendiri terhadap press, tinta, dan kertas tertentu. Pergeseran kanal 5-15% dari konversi yang tepat dengan mudah dapat mengubah merah tajam menjadi oranye keruh jika aproksimasi dikirim langsung.

Gunakan APCA Lc untuk Aksesibilitas Berpandangan-ke-Depan

WCAG 2.x akan terus menjadi lantai regulasi selama beberapa tahun lagi, tetapi APCA adalah arah yang dituju standar. Untuk desain baru, capai `|Lc| ≥ 75` untuk teks badan dan `|Lc| ≥ 60` untuk teks besar di samping lantai WCAG 2.1. APCA menangkap masalah keterbacaan yang dilewatkan rasio simetris WCAG 2 — khususnya teks goresan-tipis pada latar belakang terang, di mana rasio WCAG terlihat baik tetapi teks sebenarnya menghilang pada jarak baca normal.

Jalankan Warna Gamut-Luas Melalui Pemeriksaan Gamut Display P3

Jika Anda menargetkan perangkat keras Apple modern (iPhone, iPad, MacBook dari 2017+) atau mengirim konten sadar-HDR, definisikan warna brand di OKLCH dan gunakan lencana Display P3 untuk memverifikasi bahwa mereka muat di P3 bahkan jika mereka melampaui sRGB. Warna gamut-lebih-lebar tampak terasa lebih jenuh pada layar P3 dan menurun dengan elegan melalui kompresi chroma yang diterapkan peramban pada layar sRGB-saja. Jangan pra-snap ke sRGB kecuali Anda tahu seluruh audiens Anda berada pada layar warisan.

Pilih Shade Seragam Perseptual melalui Tones OKLCH

Saat menghasilkan ramp 50/100/200/.../900 untuk warna brand, gunakan panel Tones: ia menstep L dalam kenaikan yang sama sambil menahan C dan H tetap. Hasilnya adalah ramp yang merata secara perseptual di mana selisih visual antara 400 dan 500 tampak identik dengan selisih antara 500 dan 600. Penyetelan-tangan ramp HSL untuk perataan yang sama adalah latihan multi-jam per warna; OKLCH memberikannya secara gratis.

Gunakan Eyedropper dengan Hemat untuk Pencocokan Warna Lintas-Tab

EyeDropper API (hanya-Chromium pada 2026) memungkinkan Anda mengklik di mana saja di layar — termasuk di luar peramban — untuk mengambil sampel warna piksel itu. Berguna untuk mencocokkan warna dari screenshot, bingkai video, atau UI aplikasi lain. Perlakukan hasil sebagai titik awal, bukan nilai akhir — render layar menerapkan manajemen warna yang mungkin berbeda dari file sumber. Untuk warna brand kanonik, selalu dapatkan hex dari sumber desain (Figma, Sketch, PDF panduan brand) alih-alih eyedroppering screenshot.

Bookmark URL dengan `#hex=...` untuk Keputusan Palet yang Dapat Dibagikan

Warna saat ini dikodekan ke hash URL sebagai `#hex=...` atau `#oklch=...` secara otomatis. Salin URL, tempel ke thread Slack atau isu GitHub, dan siapa pun yang membukanya mendarat pada warna yang persis sama. Berguna untuk thread tinjauan desain di mana "biru brand" perlu berarti satu triple OKLCH tertentu. Hash diperbarui pada setiap perubahan, sehingga URL di address bar Anda selalu adalah warna saat ini yang langsung — bookmark untuk kembali ke palet tertentu nanti.

Pertanyaan yang Sering Diajukan