🎨
← Kembali ke Panduan

Fungsi Warna CSS Modern: rgba(), hsl(), oklch(), dan Selanjutnya

· Tag: css, color-functions, oklch, modern-css, web-development, rgba, hsl

Fungsi Warna CSS Modern: rgba(), hsl(), oklch(), dan Selanjutnya

Fungsi warna CSS telah berkembang secara dramatis. Apa yang dulunya merupakan pilihan antara hex, rgb(), dan hsl() kini menjadi ekosistem ruang warna dan fungsi manipulasi yang kaya yang memberikan kontrol belum pernah terjadi sebelumnya kepada pengembang atas representasi warna, interpolasi, dan aksesibilitas.

Panduan ini mencakup setiap fungsi warna CSS utama yang tersedia pada tahun 2026, dari yang sudah dikenal hingga yang paling mutakhir.

RGB dan RGBA: Kuda Pekerja

Fungsi rgb() mendefinisikan warna menggunakan model warna aditif merah-hijau-biru. Ini telah menjadi bagian dari CSS sejak CSS1 dan didukung di setiap browser yang pernah dibuat.

/* Sintaks lama dengan pemisah koma */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* Sintaks modern dengan pemisah spasi (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);

/* Nilai persentase */
color: rgb(100% 0% 0%);

Perubahan Penting dalam RGB Modern

CSS Color Level 4 memperkenalkan dua peningkatan penting:

  1. Dipisahkan spasi alih-alih koma — Fungsi rgb() sekarang menerima nilai yang dipisahkan oleh spasi atau garis miring
  2. Sintaks alpha terpadu — Alias rgba() sudah tidak digunakan lagi (tapi masih didukung). rgb() sekarang secara native menerima saluran alpha

Sintaks modern ini didukung di semua browser yang dirilis sejak tahun 2020. Untuk proyek baru, gunakan sintaks modern dan lewati alias rgba() sepenuhnya.

Saluran RGB

Setiap saluran RGB menerima:

  • Bilangan bulat dari 0 hingga 255
  • Persentase dari 0% hingga 100%
  • Kata kunci none untuk saluran yang hilang (CSS Color Level 4)

Kata kunci none berguna saat menginterpolasi warna — ini memberi tahu browser untuk tidak menginterpolasi saluran tertentu tersebut.

HSL dan HSLA: Kontrol Warna yang Intuitif

HSL adalah singkatan dari Hue, Saturation, Lightness. Ini menggunakan sistem koordinat silinder yang secara alami sesuai dengan cara manusia berpikir tentang warna.

/* H adalah sudut hue (0-360), S adalah saturasi (0-100%), L adalah kecerahan (0-100%) */
color: hsl(0 100% 50%);        /* Merah murni */
color: hsl(0 100% 50% / 0.5);  /* Merah pada opasitas 50% */

/* Sudut hue dengan unit */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);

Referensi Sudut Hue

| Hue | Warna | Hex | |-----|---------|----------| | 0 | Merah | #FF0000 | | 30 | Oranye | #FF8000 | | 60 | Kuning | #FFFF00 | | 120 | Hijau | #00FF00 | | 180 | Cyan | #00FFFF | | 240 | Biru | #0000FF | | 300 | Magenta | #FF00FF |

HSL adalah pilihan terbaik untuk menghasilkan palet warna secara terprogram karena hanya mengubah saluran kecerahan atau saturasi menciptakan varian visual yang konsisten.

HWB: Mencampur dengan Putih dan Hitam

HWB (Hue, Whiteness, Blackness) adalah alternatif yang lebih intuitif untuk HSL. Anda memilih hue, lalu menambahkan keputihan dan kehitaman untuk membuat tints dan shades.

color: hwb(0 0% 0%);    /* Merah murni */
color: hwb(0 40% 0%);   /* Merah tint (ditambahkan putih) */
color: hwb(0 0% 40%);   /* Merah shade (ditambahkan hitam) */
color: hwb(0 20% 20%);  /* Tone (putih + hitam) */

HWB lebih sederhana daripada HSL untuk satu kasus penggunaan spesifik: membuat variasi tint dan shade dari warna merek. Anda tidak perlu memikirkan kurva saturasi — cukup tambahkan putih atau hitam.

Dukungan browser: HWB didukung di semua browser modern (Chrome 101+, Firefox 96+, Safari 15+).

LAB dan LCH: Ruang Seragam Secara Perseptual

LAB (Lightness, A-axis, B-axis) dan LCH (Lightness, Chroma, Hue) adalah ruang warna yang seragam secara perseptual. Ini berarti jarak Euclidean antara dua nilai warna sesuai dengan perbedaan visual yang dipersepsikan — sesuatu yang tidak dapat dilakukan RGB dan HSL.

color: lab(50% 50 0);        /* Merah sedang */
color: lch(50% 50 0);        /* Warna yang sama dalam bentuk silinder */

Mengapa keseragaman perseptual penting:

  • Gradien — Interpolasi di LAB atau LCH menghasilkan transisi yang halus dan alami tanpa "zona kusam" yang dihasilkan oleh gradien RGB
  • Pengukuran perbedaan warna — Delta E (ukuran perbedaan perseptual) bermakna di ruang LAB
  • Aksesibilitas — Keseragaman perseptual membantu memprediksi bagaimana warna akan dipersepsikan oleh pengguna dengan defisiensi penglihatan warna

Keterbatasan: LAB dan LCH dapat menghasilkan warna di luar gamut sRGB. Warna-warna ini akan dipotong saat ditampilkan di layar sRGB tetapi dapat diakses di layar gamut lebar (DCI-P3, Rec. 2020).

Dukungan browser: Didukung di Chrome 111+, Firefox 113+, Safari 15+. Tidak ada dukungan IE atau Edge lama.

OKLAB dan OKLCH: Standar Perseptual Modern

OKLCH adalah versi LCH yang ditingkatkan yang dikembangkan oleh Bjorn Ottosson. Ini memperbaiki ketidakseragaman perseptual di LCH, terutama untuk hue biru. OKLCH telah menjadi ruang warna default yang direkomendasikan untuk proyek CSS baru pada tahun 2025-2026.

color: oklch(60% 0.2 30);
/* Lightness: 0-100%, Chroma: 0-~0.4, Hue: 0-360 */

Mengapa OKLCH adalah Ruang Warna Terbaik untuk CSS

  1. Keseragaman perseptual terbaik — Perubahan numerik yang sama menghasilkan perubahan visual yang sama di semua hue
  2. Kecerahan yang dapat diprediksi — Warna pada nilai kecerahan yang sama benar-benar terlihat sama terangnya
  3. Tidak ada gradien kusam — Interpolasi tetap bersih di seluruh rentang hue
  4. Aman sRGB secara default — Sebagian besar nilai OKLCH menghasilkan warna sRGB dalam gamut
  5. Saluran yang intuitif — Seperti HSL tetapi dengan akurasi perseptual yang sebenarnya

OKLCH dalam Praktik

/* Membuat skala warna yang seimbang dengan OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);

Perhatikan bahwa setiap langkah berubah sekitar nilai kecerahan yang sama (20 poin persentase). Karena OKLCH seragam secara perseptual, langkah-langkah ini tampak berjarak merata bagi mata manusia — sesuatu yang sulit dicapai dengan HSL.

Dukungan browser: OKLCH didukung di Chrome 111+, Firefox 113+, Safari 15.4+. Ini dengan cepat menjadi ruang warna modern yang paling direkomendasikan.

Color-Mix: Mencampur Warna di CSS

Fungsi color-mix() mencampur dua warna dalam ruang warna yang ditentukan:

/* Mencampur merah dan biru secara merata di sRGB */
color: color-mix(in srgb, red, blue);

/* 30% primer, 70% putih — sebuah tint */
color: color-mix(in oklch, var(--primary) 30%, white);

/* Mencampur dengan ruang warna perseptual untuk hasil yang halus */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));

Parameter in <color-space> memungkinkan Anda mengontrol ruang interpolasi. Untuk sebagian besar kasus, in oklch menghasilkan hasil visual terbaik.

Kasus penggunaan:

  • Membuat tints dan shades tanpa fungsi preprocessor
  • Membangun varian komponen dari satu token warna
  • Menghasilkan state hover dan active secara dinamis
  • Membuat efek seperti gradien dalam satu fungsi

Sintaks Warna Relatif: Memodifikasi Warna yang Ada

CSS Color Level 4 memungkinkan Anda menurunkan warna baru dari warna yang sudah ada dengan memodifikasi saluran individual:

--primary: #3366cc;

/* Menggunakan saluran OKLCH */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);

/* Menggunakan saluran HSL */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));

Kata kunci from <color> membongkar saluran warna sumber ke dalam saluran fungsi tujuan, yang kemudian dapat Anda sesuaikan dengan aritmatika.

Kata Kunci Saluran per Ruang Warna

Setiap ruang warna mengekspos kata kunci saluran tertentu:

| Ruang Warna | Kata Kunci | |-------------|----------------------------------| | rgb() | r, g, b, alpha | | hsl() | h, s, l, alpha | | hwb() | h, w, b, alpha | | lch() | l, c, h, alpha | | oklch() | l, c, h, alpha | | lab() | l, a, b, alpha | | oklab() | l, a, b, alpha |

Ringkasan Dukungan Browser (2026)

| Fungsi | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | rgb() / hsl() | Semua | Semua | Semua | Semua | | hwb() | 101+ | 96+ | 15+ | 101+ | | lab() / lch() | 111+ | 113+ | 15+ | 111+ | | oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ | | color-mix() | 111+ | 113+ | 16.2+ | 111+ | | Sintaks warna relatif | 111+ | 113+ | 16.2+ | 111+ |

Semua fungsi warna modern aman digunakan pada tahun 2026 untuk proyek yang tidak memerlukan dukungan Internet Explorer. Untuk kompatibilitas yang lebih luas, gunakan langkah build yang mengonversi sintaks modern ke hex atau rgb() lama.

Rekomendasi Praktis

  • Untuk proyek yang sudah ada — HSL tetap menjadi keseimbangan terbaik antara keterbacaan dan kemampuan
  • Untuk proyek baru — Gunakan OKLCH sebagai ruang warna utama Anda karena akurasi perseptualnya
  • Untuk gradien — Selalu interpolasi di OKLCH untuk menghindari transisi yang kusam
  • Untuk sistem desain — Simpan warna dasar di OKLCH, hasilkan varian dengan color-mix() atau sintaks relatif
  • Untuk canvas/WebGL — Tetap gunakan RGB, yang native untuk pipeline rendering

Kesimpulan

Fungsi warna CSS modern telah mengubah apa yang dapat Anda lakukan dengan warna di web. OKLCH menyediakan keseragaman perseptual yang membuat desain sistem warna dapat diprediksi. color-mix() dan sintaks warna relatif menghilangkan kebutuhan akan fungsi warna preprocessor. Bersama-sama, alat-alat ini memberi pengembang web kekuatan warna yang sama yang telah ditawarkan oleh alat desain selama bertahun-tahun — sekarang langsung di browser.

Gunakan konverter warna online gratis kami untuk mengonversi antara semua format warna CSS modern termasuk OKLCH, LAB, HWB, dan HEX/RGB/HSL klasik.