運用CSS的color-mix()，成為色彩調配大師

color-mix() 讓開發者不用再開其它程式，直接在 CSS 中混合兩種顏色。明明是在寫原始碼，但卻有成為調色大師的感覺。

語法說明

color-mix() 的參數有這些：
color-mix(in [color space], [顏色1] [比例1], [顏色2] [比例2])。

• color space：包含 srgb、srgb-linear、display-p3、prophoto-rgb、lab、oklab、xyz、xyz-d50、xyz-d65、hsl、hwb、lch、oklch…等，若使用的是hsl、hwb、lch、oklch這些非線性空間的時候，還會多一個「路徑」參數（shorter hue、longer hue、increasing hue、decreasing hue）。
• 顏色1、顏色2：兩種要混合的顏色，當然，你也可以在這裡使用 color-mix()。
• 比例：指定各顏色所佔的比例，通常以 % 表示。

如果只提供一個顏色的比例，則另一個顏色會自動補足 100%；若兩個比例都沒寫，則會都是 50%。

若兩個比例相加超過 100%，則最終顏色1比例= 顏色1 / 顏色1+顏色2，最終顏色2比例= 顏色2 / 顏色1+顏色2。

兩個顏色的比例相加小於 100% 的話，最終顏色還要與（100% – sum）的透明色混合。沒錯，可以混出透明效果。

color-mix(in srgb, red, blue); /* 等於 color-mix(in srgb, red 50%, blue 50%) */
color-mix(in srgb, red 40%, blue); /* blue 的比例會自動視為 60% */
color-mix(in oklch shorter hue, transparent, blue 80%); /* 路徑沒寫的話，預設為 shorter hue */
color-mix(in oklch, red, color-mix(in srgb, yellow, red) 60%); /* 在 color-mix() 裡面塞 color-mix() */

但要注意，color-mix() 裡面不能使用 calc，兩個顏色的比例也不能都是 0%。

另外，也可以自訂 color space，但通常是不會用到這個功能：

@color-profile --myspace {
  src: url("https://example.color/myspace.icc");
}

各瀏覽器對 color-mix 的支援度

使用 color-mix() 的好處

除了可以直接用 CSS 調色之外，也能確保品牌顏色的一致性，而在有動態改變顏色的需求時，只需要去調整基礎色就可以了，不用再為色碼煩惱。

像是 dark mode 的設計、相鄰元素漸變顏色的設定、漸層設定、hover事件…等，都能快速解決。

設計師會問說，那我直接給你色碼就好了不是嗎？

的確，但這樣色碼通常會有很多變數要設定，像是 --red-1、--red-2、--red-3…，若有一天主題色改變的時候，一些hover、副色、漸層等色碼變數也要全部再提供一次。但用 color-mix() 只要改主色就好了，其它色碼只要有規劃好就不用再提供。

實際運用

讓 hover 效果更自然：

button {
  background-color: blue;
  transition: background-color .3s;
}

button:hover {
  background-color: color-mix(in srgb, blue 70%, white);
}

元素漸變可控：

@property --percent {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

:root {
  --main-color: #b53e2b;
}

:nth-child(1) { --percent: 25%; }
:nth-child(2) { --percent: 50%; }
:nth-child(3) { --percent: 75%; }

:nth-child(n) {
  background-color: color-mix(in oklab, var(--main-color) var(--percent), white);
}

dark mode、主題色配色：

:root {
  --main-color: #1597FF;
  --tech-color: color-mix(in hsl, var(--main-color) 70%, #39FF00);
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-color: color-mix(in srgb, var(--main-color) 30%, black);
  }
}

body {
  background-color: var(--main-color);
}

結論

color-mix() 讓開發者能更靈活地混合顏色，減少外部工具的依賴程度，輕鬆打造層次感，並適應不同的顏色方案。

你是否知道就連主流 CSS 框架 Tailwind 也有在使用 color-mix()？他們運用在「color」系統中，除了預設的顏色之外，在使用者要自訂顏色時（像是text-[#2858aa]-600）也更好運作。

最後，你可能會問使用哪種 color space 最好？也許有人會說漸變用調整色相的 HSL，或是深暗調整要用什麼、著重精準度的話要用什麼，其實都沒有正確答案，純看開發者自己的認知。