HEX vs RGB vs HSL vs OKLCH — Kapan Setiap Format Warna CSS Benar-Benar Masuk Akal

Buka basis kode apa pun yang ditulis oleh seseorang yang belajar CSS dari W3Schools pada tahun 2011, dan Anda akan menemukan dinding dari #rrggbb nilai. HEX ada di mana-mana — bukan karena itu adalah format terbaik untuk pekerjaan tersebut, tetapi karena itu adalah format yang digunakan dalam setiap tutorial dan picker warna saat kebanyakan dari kita pertama kali mempelajari CSS. Ini masih berfungsi. Ini tidak akan pergi. Namun pada tahun 2026, menggunakan HEX untuk semuanya sama seperti menulis JavaScript tanpa const karena Anda belajar dari sebuah postingan blog tahun 2009.

Ada empat format warna yang perlu diketahui: HEX, RGB, HSL, dan OKLCH. Setiap format tersebut tepat digunakan dalam situasi tertentu — dan salah dalam situasi lain. Berikut adalah kapan harus menggunakan format mana.

HEX (#rrggbb / #rrggbbaa)

HEX mengkodekan warna sebagai pasangan angka heksadesimal: dua untuk merah, dua untuk hijau, dua untuk biru. #ff5733 diterjemahkan menjadi rgb(255, 87, 51) — warna oranye-merah. Tanpa picker warna yang terbuka, Anda tidak bisa membaca nilai tersebut; Anda hanya perlu tahu itu.

Ada singkatan: #f53 mengembangkan menjadi #ff5533. Ini hanya berlaku ketika kedua angka dalam setiap pasangan sama. Transparansi adalah pasangan keempat: #ff5733cc — di mana cc adalah saluran alpha. Sekitar 80% kecerahan untuk mereka yang menghitung di rumah (0xCC / 0xFF ≈ 0.8). Benar-benar valid, tetapi tidak dapat dibaca.

Kapan HEX tepat

• Token desain dari Figma atau Sketch. Desainer mengunggah HEX. Anda menempelkan HEX. Itu adalah alur kerja. Jangan melawan hal ini.
• Di mana nilai tersebut statis dan alat visual mengendalikannya. Jika picker warna di VS Code atau DevTools browser yang menghasilkan nilai tersebut, HEX cukup baik.
• Integrasi pihak ketiga yang hanya menerima input HEX.

Kapan HEX adalah pilihan yang salah

• Mengubah warna secara programatis — Anda tidak dapat melakukan perhitungan secara masuk akal pada #ff5733
• Mengungkapkan hubungan tonal — tidak ada cara yang intuitif untuk mendapatkan variasi lebih terang atau lebih gelap
• Membangun sistem desain dengan token semantik

RGB / RGBA

RGB menyatakan saluran merah, hijau, biru dalam bilangan desimal biasa. rgb(255, 87, 51) adalah warna oranye-merah yang sama seperti #ff5733, tetapi nilai saluran setidaknya dapat dibaca secara manusia. Sintaksis modern CSS Color Level 4 menghilangkan koma: rgb(255 87 51). Transparansi dinyatakan dengan tanda garis: rgb(255 87 51 / 50%). Format lama rgba(255, 87, 51, 0.5) masih berfungsi — browser belum menghapusnya dan tidak akan melakukannya.

Kapan RGB tepat

• Pengelolaan warna dalam JavaScript. Ketika Anda perlu menyesuaikan kecerahan dengan menggabungkan dengan warna putih: Anda dapat melakukan perhitungan langsung pada nilai saluran.
• Canvas dan WebGL. API-nya beroperasi dengan bilangan bulat 0–255 atau bilangan desimal 0–1. RGB langsung berhubungan dengan apa yang diharapkan oleh pipeline piksel bawah.
• Ketika Anda mendapatkan nilai saluran dari sensor perangkat keras atau library gambar dan Anda tidak perlu mengonversinya.

Kapan RGB adalah pilihan yang salah

• Membuat skema warna — tidak ada model mental visual untuk apa yang terlihat saat penyesuaian kecil pada RGB
• Pengaturan mode gelap — Anda harus menghitung kembali ketiga saluran untuk mengubah kecerahan

HSL (Warna / Kehadiran / Keberadaan)

HSL adalah format warna pertama yang memetakan cara manusia memahami warna. Warna adalah sudut pada roda warna (0–360°), kehadiran mengontrol seberapa hidup warna tersebut (0% = abu-abu, 100% = murni), dan keberadaan mengontrol seberapa terang warna tersebut (0% = hitam, 100% = putih). hsl(14 100% 60%) adalah warna oranye-merah yang sama.

Keuntungan praktis: jika Anda ingin variasi lebih gelap dari warna, kurangi nilai keberadaan. Versi yang lebih lembut? Kurangi kehadiran. Anda dapat menghasilkan palet tonal lengkap dari satu nilai warna. Inilah sebabnya sistem properti CSS yang dibangun berdasarkan HSL sangat umum:

:root {
  --brand-hue: 14;
  --brand-saturation: 100%;

  --brand-400: hsl(var(--brand-hue) var(--brand-saturation) 70%);
  --brand-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --brand-600: hsl(var(--brand-hue) var(--brand-saturation) 50%);
  --brand-700: hsl(var(--brand-hue) var(--brand-saturation) 40%);
}

Transparansi bekerja sama seperti yang lain: hsl(14 100% 60% / 50%).

Ada satu keterbatasan nyata terhadap HSL: skala keberadaannya tidak berperilaku secara persepsi. Dua warna dengan nilai L yang sama bisa terlihat sangat berbeda dalam kecerahan — coba hsl(60 100% 50%) (kuning) dan hsl(240 100% 50%) (biru) di samping. Warna kuning terlihat jauh lebih terang, meskipun keduanya memiliki L=50%. Ini penting untuk desain yang aksesibel dan terutama untuk gradien warna.

Kapan HSL tepat

• Sistem warna dan token desain. Polanya dengan satu warna di atas sangat ergonomis dan mudah dibaca.
• Pengaturan mode gelap. Tukar nilai L, tetapkan semua yang lain. Ini bekerja secara bersih.
• Tint dan shade dalam properti CSS kustom — kasus penggunaan yang dirancang untuknya.

OKLCH — Pengganti Modern

OKLCH adalah apa yang seharusnya menjadi HSL. Ini menggambarkan warna dalam tiga nilai: Keberadaan (0–1), Kehadiran (seperti kehadiran, sekitar 0–0.4), dan Warna (0–360°). oklch(0.65 0.18 28) sekitar warna oranye-merah yang sama.

Perbedaan utama dari HSL adalah keberadaan persepsi. Dalam OKLCH, dua warna dengan nilai L yang sama benar-benar terlihat sama terang bagi mata manusia. Warna kuning pada L=0.65 dan biru pada L=0.65 akan terlihat memiliki kecerahan yang sama — berbeda dengan HSL di mana kuning dominan. Ini penting dalam dua cara tertentu:

• Desain yang aksesibel. Ketika Anda menghitung rasio kontras berdasarkan nilai L, ini mencerminkan apa yang dipersepsikan pengguna — bukan hanya apa yang dikatakan matematika.
• Gradien. Gradien HSL dari biru ke kuning melewati zona abu-abu yang kotor di tengah. Gradien yang sama dalam OKLCH tetap hidup karena langkah-langkah tengah tetap memiliki kecerahan yang konsisten.

Dukungan browser pada tahun 2023: semua browser modern (Chrome 111+, Firefox 113+, Safari 15.4+). Tidak ada dukungan IE11 — dan tidak ada yang mengembangkan kode baru pada tahun 2026 yang menargetkan IE11.

Tailwind v4 memindahkan seluruh palet warna ke OKLCH. Ini bukan detail implementasi kecil — ini adalah sinyal dari kerangka kerja CSS yang paling banyak digunakan bahwa ini adalah arah yang benar untuk sistem warna.

Jika Anda sedang membangun atau menguji gradien HSL atau OKLCH, fitur Pembuat Gradien CSS di IO Tools mendukung format ini secara langsung — berguna untuk melihat perbedaan kualitas gradien secara samping.

Kapan OKLCH tepat

• Sistem desain baru yang dibangun dari awal. Jika Anda menentukan token warna Anda saat ini, OKLCH memberikan keberadaan persepsi yang HSL tidak miliki.
• Antarmuka dengan banyak gradien. Perbedaan kualitas gradien terlihat dan bermakna.
• Palet warna yang aksesibel di mana Anda perlu rasio kontras untuk mencerminkan persepsi visual yang sebenarnya.

Warna yang Sama dalam Keempat Format

Berikut ini rgb(255, 87, 51) — warna oranye-merah hangat — diungkapkan dalam setiap format, dengan variasi transparansi 50%:

Format	Warna Solid	50% Transparan
HEKSAGON	#ff5733	#ff573380
Bahasa Inggris: RGB	rgb(255 87 51)	rgb(255 87 51 / 50%)
Bahasa Inggris HSL	hsl(14 100% 60%)	hsl(14 100% 60% / 50%)
OKLCH	oklch(0.65 0.18 28)	oklch(0.65 0.18 28 / 50%)

Perhatikan mana yang ingin Anda ubah secara manual jika Anda perlu membuat warna 20% lebih gelap. HEX: Anda akan membuka picker warna. RGB: Anda akan melakukan perhitungan pada tiga nilai. HSL: ubah nilai L dari 60% menjadi 40%. OKLCH: ubah nilai L dari 0.65 menjadi 0.45. Versi HSL dan OKLCH secara langsung menyampaikan niat tersebut.

Jalur Pindah Praktis

Jangan mengubah nilai HEX yang sudah ada. Mereka bekerja, tidak rusak, dan ROI dari perubahan tersebut hampir nol. Biarkan saja.

Untuk pekerjaan baru, terapkan aturan berikut:

• Warna statis dari desainer atau alat desain → HEX. Tempel apa yang diberikan Figma. Tidak perlu konversi.
• Warna yang dimanipulasi dalam JavaScript, atau dikirim ke canvas/WebGL → RGB. Perhitungan berbasis saluran berjalan dengan lancar.
• Properti CSS kustom dan token desain baru → HSL atau OKLCH. Anda ingin kemampuan untuk menghasilkan tinta dan bayangan tanpa menghitung tiga nilai terpisah.
• Sistem desain baru dari awal, atau pekerjaan yang banyak gradien → OKLCH. Keberadaan persepsi ini layak dengan kecilnya kemiringan belajar untuk nilai Kehadiran.

Polanya konkret untuk properti CSS dalam proyek baru:

:root {
  /* Define the base in OKLCH */
  --brand: oklch(0.65 0.18 28);

  /* Derive tonal variants by adjusting L */
  --brand-light: oklch(0.78 0.14 28);
  --brand-dark:  oklch(0.48 0.20 28);
  --brand-muted: oklch(0.65 0.08 28);

  /* Transparency with the slash syntax */
  --brand-ghost: oklch(0.65 0.18 28 / 15%);
}

Ini mudah dibaca, dapat diedit tanpa alat, dan menghasilkan gradien yang lebih baik dibandingkan pendekatan HSL yang setara.

Intinya

HEX tidak salah — itu hanya khusus. Ini dioptimalkan untuk nilai yang diperoleh dari alat visual dan ditempelkan ke kode, bukan untuk nilai yang dipikirkan atau dimanipulasi. RGB berguna ketika Anda perlu berinteraksi dengan API JavaScript atau canvas. HSL masih merupakan pilihan yang kuat untuk token desain jika Anda bekerja dalam kode yang sudah ada. OKLCH adalah tempat yang ingin Anda tuju untuk sistem desain baru.

Hambatan dalam menerapkan HSL atau OKLCH lebih rendah daripada yang terlihat. Anda tidak perlu memindahkan apa pun — cukup mulai menggunakan mereka untuk set token berikutnya yang Anda tulis. Fitur Pemilih Warna di IO Tools menunjukkan warna di semua format secara bersamaan, yang merupakan referensi yang berguna saat Anda mengonversi nilai HEX yang ada ke HSL atau OKLCH untuk token baru.

Anda mungkin juga menyukai