混色器
在 OKLab、OKLCH 或 sRGB 中以任意比例混合兩種顏色。複製結果或現成的 color-mix() 語法。
混合空間
結果#ae7ea4
- HEX
- RGB
- OKLCH
含備援的 CSS
color: #ae7ea4;
color: color-mix(in oklab, #ff5733, #3b82f6 50%);從第一種到第二種的過渡
同一組混色在各空間中的效果
sRGB 的中間會變灰變暗。OKLab 讓亮度保持均勻。OKLCH 和 HSL 保留飽和度，但會沿著色相環繞行。
常見問題
CSS 的 color-mix() 是什麼？
color-mix() 是一個 CSS 函式，可以在你指定的色彩空間中混合兩種顏色，例如 color-mix(in oklab, #ff5733, #3b82f6 30%)。目前所有主流瀏覽器都支援。為了相容舊版瀏覽器，請像上面的程式碼片段一樣，在前面先寫一個一般顏色當作備援值。
應該在哪個色彩空間裡混色？
OKLab 是最穩妥的預設選擇：中間色能保持明亮，不會變得混濁。OKLCH 能維持顏色的飽和，但會沿著色相環走最短路徑，所以紅色和藍色之間會經過紫色和粉紅色。sRGB 是舊工具的混色方式，中間色常常顯得灰暗。
為什麼光的混色和顏料的混色不一樣？
螢幕是疊加光線，所以這個工具會把光的數值取平均：藍色和黃色混合會得到灰色或很淡的顏色，而不是綠色。顏料則是吸收光線，所以同樣的組合畫在紙上會變成綠色。想預測顏料混色的結果，請使用顏料混色模型，而不是螢幕的色彩空間。