CSS color-mix() — ผสมสีใน browser ได้เลย ไม่ต้องพึ่ง JS

color-mix() ผสมสองสีในสัดส่วนที่กำหนด ทำงานใน color space ใดก็ได้

/* ผสม 40% ไซยานเข้าไปใน ขาว */
color: color-mix(in oklch, #00d4ff 40%, white);

/* สร้าง tint/shade จากสีเดียว */
--btn-hover: color-mix(in srgb, var(--accent) 80%, black);
--btn-bg:    color-mix(in srgb, var(--accent) 15%, transparent);

ทำไมใช้ oklch: การผสมใน oklch ได้สีกลางที่ perceptually uniform — ไม่หม่นหรือเทา ต่างจาก srgb ที่บางคู่สีผสมกันได้โทนเทา (muddy)

ใช้แทน opacity hack:

/* เดิม: ต้องใช้ rgb ที่ต้องรู้ค่า */
background: rgba(0, 212, 255, 0.1);

/* ใหม่: ผสมกับพื้นหลังได้เลย */
background: color-mix(in oklch, #00d4ff 10%, var(--bg));

รองรับ Chrome 111+, Firefox 113+, Safari 16.2+