Digital Transformation
CSS Relative Color Syntax (rgb(from var(--c) ...))
TL;DR: Relative Color Syntax memungkinkan derivasi warna langsung di CSS pakai sintaks seperti rgb(from var(--brand) r g b / 50%) atau oklch(from var(--brand) calc(l + 0.1) c h). Tanpa fitur ini, design system butuh puluhan CSS variable manual atau preprocessor SCSS untuk varian warna. Baseline Web Platform sejak 2024.
Apa itu Relative Color Syntax?
Relative Color Syntax memungkinkan satu warna dijadikan dasar untuk derivasi warna lain langsung di runtime CSS. Sebelum fitur ini, design system harus mendefinisikan setiap shade manual (brand-50 sampai brand-900) atau pakai SCSS yang menggenerate static value. Sekarang varian warna bisa dinamis dan reaktif terhadap tema.
Contoh praktis untuk hover state:
.button {
--brand: oklch(60% 0.2 240);
background: var(--brand);
}
.button:hover {
background: oklch(from var(--brand) calc(l - 0.1) c h);
}
Hover state otomatis lebih gelap 10 persen tanpa hardcode value.
Use Case Utama
Design system, dark mode otomatis, dan focus ring yang adaptif jadi paling diuntungkan.
| Skenario | Pendekatan Lama | Dengan Relative Color |
|---|---|---|
| Dark mode varian brand | 2x set variable | 1 variable, derive saat dark |
| Hover/active state | Hardcode hex | calc dari base |
| Accessibility focus ring | Manual contrast check | Tinggikan lightness otomatis |
| Tint background | Mix hex manual | Tambah alpha langsung |
Pasangkan dengan container-queries dan css-cascade-layers untuk design system yang scalable.
Kenapa Penting?
Bagi marketer Indonesia yang kelola brand multi-channel, Relative Color Syntax memangkas overhead maintenance design token. Praktik di proyek personal branding client menunjukkan pengurangan jumlah CSS variable warna dari rata-rata 35 token ke 8 token utama, sisanya derived. Ini juga membantu komputasi kontras WCAG otomatis. Data web.dev relative colors menyebutkan Baseline support sejak Q2 2024.
Pertanyaan Umum
Apakah pakai oklch lebih baik dari rgb?
Untuk derivasi warna, ya. Oklch perceptually uniform sehingga calc lightness lebih konsisten secara visual dibanding rgb yang non-uniform.
Apakah fallback diperlukan?
Untuk browser yang tidak support, pakai @supports query atau definisikan static fallback sebelum baris relative color.
Istilah Terkait