Sistem desain yang khas membawa lima belas warna campuran tangan dari satu warna merek, dibuat dengan alat desain dan ditempel dengan tangan. color-mix(in oklab, ...) memperoleh nuansa tersebut di browser dari dua properti khusus yang sama, jadi 'merek, 12 persen dicuci' adalah sebuah fungsi, bukan tangkapan layar.

:root {
  --ink: #111111;
  --brand: #bb0000;
}
.card { background: color-mix(in oklab, var(--brand) 8%, white); }
.card:hover { background: color-mix(in oklab, var(--brand) 16%, white); }
.muted { color: color-mix(in oklab, var(--ink) 55%, white); }

Mode gelap adalah sebuah blok, bukan desain ulang

@media (prefers-color-scheme: dark) {
  :root { --ink: #eeeeee; --brand: #ff6659; }
}
/* every mix above re-resolves; nothing else changes */

Aturan yang menjaganya tetap jujur

  1. Campurkan secara persepsi: oklab menjaga warna tampak konsisten di seluruh warna; srgb baik untuk warna abu-abu.
  2. Pertahankan tingkat kontras: campuran merek 5 persen adalah warna latar belakang, bukan warna teks.
  3. Sebutkan resepnya, bukan hasilnya: --ketukan permukaan-tenang --merah-04.

Situs ini berjalan pada dua properti khusus ditambah campuran; keseluruhan desain ulang zine hangat hingga lembaran putih adalah satu blok pengeditan token. Itulah manfaatnya jika warna menjadi data.