CSS color-mix() (Function)

TL;DR: CSS color-mix() adalah fungsi native yang mencampur dua warna dengan rasio dan ruang warna terdefinisi. Sintaksnya color-mix(in oklch, var(--brand) 70%, white). Per Mei 2026 sudah didukung baseline di Chrome, Safari, Firefox tanpa polyfill. Fungsi ini menggantikan kebutuhan Sass mix() dan menghemat ratusan baris token tema.

Apa itu CSS color-mix()?

CSS color-mix() adalah fungsi CSS Color Module Level 5 yang mengembalikan warna hasil campuran dua warna sumber dalam ruang warna yang ditentukan. Sebelum fungsi ini stabil, kebanyakan tim memakai preprocessor Sass atau JavaScript runtime untuk generate varian shade dari satu brand color. Sekarang campuran tone dapat dilakukan langsung di CSS, termasuk untuk hover state, tema gelap-terang, dan border subtle.

Fungsi ini sering dipasang berdampingan dengan CSS Relative Color Syntax dan CSS light-dark() Function untuk membangun design token modern.

Sintaks Dasar

.button-hover {
  background: color-mix(in oklch, var(--brand) 80%, black);
}
.surface-subtle {
  background: color-mix(in srgb, var(--brand) 8%, white);
}

Kenapa Penting?

Tim desain Indonesia yang membangun design system di Next.js sering kesulitan menjaga konsistensi shade saat brand color berubah. Dengan color-mix() satu CSS variable cukup, varian otomatis terhitung. Dalam audit beberapa landing page Vito Atmo, pemakaian color-mix() memangkas 30 sampai 45 persen baris token warna dibanding pendekatan manual hex per shade.

Dokumentasi resmi MDN tentang color-mix merinci ruang warna yang didukung.

Pertanyaan Umum

Apakah color-mix() bisa dipakai di Tailwind CSS v4?

Bisa. Tailwind v4 mendukung custom value arbitrary lewat bracket: bg-[color-mix(in_oklch,var(--brand)_70%,white)]. Underscore menggantikan spasi.

Ruang warna apa yang paling natural untuk brand?

Oklch direkomendasikan karena perceptually uniform. Hasil shade terlihat lebih natural di mata manusia dibanding srgb atau hsl.