Color-mix() và relative colors: Tạo color palette động

Trước đây, muốn tạo lighter/darker shade từ một base color, bạn cần Sass functions hoặc hardcode từng hex value. CSS giờ có color-mix() và relative color syntax — tạo dynamic color palette ngay trong browser.

color-mix(): Trộn màu native

color-mix() trộn 2 colors theo tỉ lệ bạn chỉ định:

:root {
  --primary: oklch(65% 0.25 260);
  
  /* Tạo tint (lighter) bằng cách mix với white */
  --primary-50: color-mix(in oklch, var(--primary) 10%, white);
  --primary-100: color-mix(in oklch, var(--primary) 20%, white);
  --primary-200: color-mix(in oklch, var(--primary) 40%, white);
  
  /* Tạo shade (darker) bằng cách mix với black */
  --primary-700: color-mix(in oklch, var(--primary) 70%, black);
  --primary-800: color-mix(in oklch, var(--primary) 50%, black);
  --primary-900: color-mix(in oklch, var(--primary) 30%, black);
  
  /* Semi-transparent variant */
  --primary-overlay: color-mix(in oklch, var(--primary) 15%, transparent);
}

/* Hover state — tối hơn 20% */
.button:hover {
  background: color-mix(in oklch, var(--primary) 80%, black);
}

/* Disabled state — mờ đi */
.button:disabled {
  background: color-mix(in oklch, var(--primary) 40%, transparent);
}

Keyword in oklch chỉ định color space để trộn. OKLCH cho kết quả perceptually uniform — tốt hơn nhiều so với RGB mixing.

Relative color syntax

Relative colors cho phép derive color mới từ color gốc bằng cách modify individual channels:

:root {
  --brand: oklch(65% 0.25 260);
  
  /* Lighten: tăng lightness */
  --brand-light: oklch(from var(--brand) calc(l + 0.2) c h);
  
  /* Darken: giảm lightness */
  --brand-dark: oklch(from var(--brand) calc(l - 0.2) c h);
  
  /* Desaturate: giảm chroma */
  --brand-muted: oklch(from var(--brand) l calc(c * 0.5) h);
  
  /* Hue shift: tạo complementary color */
  --brand-complement: oklch(from var(--brand) l c calc(h + 180));
  
  /* Analogous colors */
  --brand-warm: oklch(from var(--brand) l c calc(h - 30));
  --brand-cool: oklch(from var(--brand) l c calc(h + 30));
  
  /* Set alpha */
  --brand-ghost: oklch(from var(--brand) l c h / 0.1);
}

Use case thực tế: Theming

Chỉ cần thay đổi 1 CSS variable, toàn bộ palette tự update:

• User chọn brand color → generate toàn bộ tints/shades automatically.
• Dark mode → adjust lightness channel thay vì hardcode từng color.
• Hover/active states → derive từ base color, luôn consistent.

color-mix() vs relative colors

color-mix(): đơn giản hơn, browser support rộng hơn. Dùng khi cần mix 2 colors hoặc tạo tint/shade đơn giản.

Relative colors: powerful hơn, modify individual channels. Dùng khi cần hue shifts, desaturation, hoặc precise control.

Kết

color-mix() và relative colors biến CSS thành dynamic color system. Bạn chỉ cần define vài base colors, phần còn lại tự generate. Kết hợp với CSS custom properties, đây là foundation hoàn hảo cho themeable design systems.