color-mix() function dùng để làm gì?

color-mix() trộn hai màu ngay trong CSS, theo tỉ lệ và trong không gian màu chỉ định.

.a { color: color-mix(in srgb, red 30%, blue); }        /* 30% đỏ + 70% xanh */
.b { color: color-mix(in oklch, var(--accent), white 20%); }   /* sáng hơn 20% */
.c { color: color-mix(in oklch, var(--accent), black 12%); }   /* tối hơn 12% */

Ứng dụng thực tế nhất là sinh trạng thái từ một màu gốc — không phải khai báo tay từng biến thể hover/active:

.btn { background: var(--accent); }
.btn:hover  { background: color-mix(in oklch, var(--accent), black 8%); }
.btn:active { background: color-mix(in oklch, var(--accent), black 16%); }

Và pha màu vào nền theo tông mà không cần alpha:

.card--warn { border-color: color-mix(in srgb, var(--amber) 50%, var(--border)); }

Không gian màu quan trọng: trộn in srgb dễ ra màu xỉn ở giữa; in oklch giữ độ sáng cảm nhận đều nên kết quả tự nhiên hơn.

Hỗ trợ: Baseline 2023 (Chrome 111+, Safari 16.2+, Firefox 113+).

Lưu ý: color-mix() tính lúc render, không phải lúc build — nên không dùng được ở chỗ cần giá trị tĩnh (vd sinh biến trong JS). Ngoài ra trộn với transparent sẽ ra kết quả khác kỳ vọng nếu quên chỉ định không gian màu có alpha.