CSS color-mix()

TL;DR: color-mix() adalah fungsi CSS yang mencampur dua warna dalam color space tertentu, misalnya color-mix(in oklch, blue 70%, white). Fungsi ini menggantikan kebutuhan Sass mixin untuk membuat varian warna hover, focus, dan disabled. Didukung Chrome 111+, Safari 16.2+, Firefox 113+ per April 2026.

Apa itu color-mix()?

color-mix() adalah fungsi CSS native yang menghitung campuran dua warna pada color space tertentu. Sintaksnya: color-mix(in <colorspace>, <color1> <percent>, <color2>). Sebelum fungsi ini ada, tim frontend memakai Sass mix() atau darken() di build time, atau library JavaScript di runtime. Sekarang campuran dihitung browser secara langsung pada setiap render.

Color space yang umum dipakai: srgb untuk kompatibilitas lama, oklch untuk gradasi persepsi yang konsisten, dan display-p3 untuk layar wide-gamut. Pilihan space mempengaruhi hasil akhir, terutama untuk warna pastel. Lihat juga container queries dan responsive design untuk komponen adaptif.

Cara Pakai

Gabungkan dengan CSS custom properties untuk membuat sistem warna konsisten. Satu variabel --brand cukup untuk menurunkan 6 varian hover, focus, active, disabled, tint, dan shade.

Kenapa Penting?

Bagi marketer Indonesia yang mengelola landing page atau website bisnis, color-mix() mempersingkat waktu desain sistem warna. Tidak perlu generate token warna manual di Figma untuk setiap varian, browser mengkalkulasi otomatis. Bundle CSS tetap kecil karena tidak butuh library dan menjaga skor LCP di Core Web Vitals.

Konteks lokal: banyak studio desain UMKM di Indonesia masih copy-paste warna hex untuk setiap state komponen. Dengan color-mix(), satu perubahan brand color otomatis menyesuaikan semua varian. Bandingkan dengan CTA yang konsisten antar halaman untuk meningkatkan konversi.

Pertanyaan Umum

Apakah color-mix lebih lambat dari Sass?

Tidak. Kalkulasi dilakukan sekali saat parse stylesheet dan di-cache oleh browser. Pengukuran web.dev menunjukkan overhead di bawah 1 ms untuk halaman dengan 200 deklarasi color-mix().

Color space mana yang paling akurat?

oklch memberikan gradasi paling natural karena berbasis persepsi manusia. srgb paling kompatibel dan cepat. Untuk landing page bisnis umum, oklch jadi default yang aman.

Bagaimana kalau browser lama tidak support?

Pakai fallback dengan warna statis. Contoh: background: #336699; background: color-mix(in oklch, var(--brand) 80%, black);. Browser lama membaca baris pertama, modern memakai baris kedua.