CSS Relative Color Syntax

TL;DR: CSS Relative Color Syntax adalah fitur CSS modern yang membiarkan kamu menurunkan warna baru dari warna sumber langsung di stylesheet. Cukup tulis satu warna brand, lalu turunannya untuk hover, border, dan shadow ikut konsisten tanpa menulis ulang nilai HEX.

Apa itu CSS Relative Color Syntax?

Relative Color Syntax adalah ekspansi dari fungsi warna CSS, seperti rgb(), hsl(), oklch(), dan light-dark(). Sintaks ini menerima kata kunci from lalu memodifikasi satu atau beberapa channel. Contohnya oklch(from var(--brand) calc(l + 0.1) c h) memberikan versi lebih terang dari warna brand tanpa harus menyiapkan token tambahan.

Sebelumnya, tim desain biasanya menyimpan banyak token warna seperti --brand-100, --brand-200, --brand-300. Dengan sintaks ini, satu token utama cukup, sementara turunan dihasilkan saat render.

Cara Pakai & Skenario Umum

Dukungan saat ini sudah luas di Chromium, Safari 16.4 ke atas, dan Firefox versi terbaru. Cek matriks resmi di MDN Web Docs.

Kenapa Penting?

Bagi developer Next.js yang membangun tema gelap dan terang, Relative Color Syntax mengurangi jumlah variabel yang perlu dikelola. Lebih sedikit token berarti lebih sedikit drift visual dan lebih mudah menjaga konsistensi brand. Praktik ini juga mempercepat handover dari desainer ke developer karena tidak ada lagi diskusi soal nilai HEX turunan.

Pertanyaan Umum

Apakah harus pakai oklch?

Tidak wajib, tapi disarankan. OKLCH lebih dekat ke persepsi mata manusia sehingga kalkulasi l dan c menghasilkan turunan yang konsisten.

Bagaimana fallback untuk browser lama?

Sediakan token warna eksplisit sebagai fallback, lalu override dengan Relative Color Syntax di selector @supports.