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...