Digital Transformation
CSS color-mix() (Fungsi Pencampuran Warna)
TL;DR: color-mix() adalah fungsi CSS untuk mencampur dua warna dengan rasio tertentu di ruang warna seperti sRGB, OKLCH, atau LAB. Marketer dan developer bisa generate varian warna brand (lighter, darker, hover state) langsung di CSS tanpa Sass atau JavaScript. Dukungan Baseline penuh sejak Juni 2024 di Chrome, Safari, dan Firefox.
Apa itu color-mix()?
color-mix() adalah fungsi CSS native yang mencampur dua warna dengan sintaks color-mix(in <color-space>, <color1> <percent>, <color2> <percent>). Misalnya color-mix(in oklch, var(--brand) 80%, white) menghasilkan tint brand 20 persen lebih terang. Hasilnya: design token yang lebih ringkas dan konsisten. Fungsi ini bagian dari spek CSS Color Module Level 5 dan saling melengkapi dengan CSS Relative Color Syntax.
Beda dengan Sass mix() yang berjalan saat build, color-mix() berjalan di browser runtime, jadi nilai bisa diturunkan dari CSS custom property dinamis. Cocok untuk dark mode, theming per-user, dan hover state yang otomatis menyesuaikan brand color tanpa hardcode.
Cara Pakai
| Pola | Sintaks | Hasil |
|---|---|---|
| Tint (lebih terang) | color-mix(in oklch, var(--brand) 80%, white) | Brand + 20% putih |
| Shade (lebih gelap) | color-mix(in oklch, var(--brand) 80%, black) | Brand + 20% hitam |
| Hover state | color-mix(in srgb, var(--btn) 90%, black 10%) | Sedikit lebih gelap |
| Transparansi | color-mix(in srgb, var(--brand), transparent 60%) | Brand 40% opacity |
Gunakan ruang warna oklch untuk hasil paling perceptually-uniform. srgb cocok untuk kompatibilitas dengan warna lama.
Kenapa Penting?
Untuk marketer yang juga maintain landing page, color-mix() memangkas jumlah design token. Tanpa fungsi ini, satu brand color butuh 8-12 varian yang ditulis manual. Dengan color-mix(), cukup satu base color dan semua varian terderive otomatis. Studi internal Vito Atmo di project Nalesha menunjukkan jumlah CSS variable warna turun dari 38 ke 7 setelah migrasi ke color-mix() pada Februari 2026, sambil tetap memenuhi rasio kontras WCAG AA.
Dokumentasi resmi tersedia di MDN color-mix. Dukungan browser sudah masuk Baseline 2024.
Pertanyaan Umum
Apakah color-mix() lebih lambat dari hex statis?
Tidak signifikan. Browser meng-compute warna saat parse stylesheet, dampak rendering negligible di bawah satu milidetik per halaman.
Apakah aman untuk produksi?
Ya, sejak Baseline 2024. Untuk dukungan browser lama (sebelum 2024), pakai @supports (color: color-mix(in oklch, red, blue)) sebagai fallback.
Istilah Terkait