CSScolor-mix() trộn hai màu theo tỷ lệ chỉ định ngay trong CSS.
Ví dụ: color-mix(in srgb, red 30%, blue) = 30% đỏ + 70% xanh.
Ứng dụng thực tế:
- Hover states: color-mix(in oklch, var(--primary), white 20%) để lighten
- Auto-generate color palettes từ base color
- Opacity-like effect không cần rgba
Hỗ trợ srgb, oklch, lab — oklch cho kết quả trộn tự nhiên và đồng đều nhất.
The color-mix() function blends two colors at a specified ratio directly in CSS.
Example: color-mix(in srgb, red 30%, blue) mixes 30% red with 70% blue in the sRGB color space. Practical uses: hover states by mixing the base color with white/black (color-mix(in oklch, var(--primary), white 20%) for a lighten effect), auto-generating palettes from a base color, or creating opacity-like effects without rgba. The function supports multiple color spaces like srgb, oklch, and lab — with oklch giving the most visually natural and uniform blending results.