輸入兩種顏色，選擇 OKLCH 或 sRGB、調整比例，再複製 CSS 值。
可輸入 #RGB、#RRGGBB、rgb()、hsl()，或 red 等支援的色名。 輸入顏色會先轉為 8 位元 HEX，再產生 CSS 值。
僅支援不透明的 sRGB 顏色。不支援透明度、transparent、CSS 變數或 OKLCH 格式輸入。
顏色 A: 60%顏色 B: 40%
瀏覽器 CSS 預覽
CSS
color-mix(in oklch, #2563eb 60%, #f97316 40%)主要預覽使用產生的 CSS 值。HEX、RGB 和 HSL 是 8 位元 sRGB 近似值，超出色域的通道會被限制在範圍內。混色結果的 OKLCH 則在這項處理之前計算。
sRGB 近似值
HEX
#b74ecc其他顏色值
RGB
rgb(183, 78, 204)HSL
hsl(290, 55.3%, 55.3%)混色結果的 OKLCH
oklch(60.9638% 0.203813 320.77)複製色名
沒有相符的支援色名#2563eb#f97316color-mix(in oklch, #2563eb 60%, #f97316 40%) → sRGB 近似值: #b74ecc
相關色彩工具
想嘗試中間色時，可使用混色器；想檢查文字與背景的可讀性時，可使用對比檢查器。本頁用來為選定的顏色建立 CSS 表達式。
常見問題
支援哪些顏色格式？
支援不透明的 3 位或 6 位 HEX、rgb()、hsl()，以及 red 等支援的色名。RGB 和 HSL 也可用空白分隔，輸入會轉為 8 位元 HEX。不支援透明度或 CSS 變數。
為什麼 HEX 與瀏覽器預覽可能不同？
主要預覽使用產生的 CSS 值。HEX、RGB 和 HSL 是 8 位元 sRGB 近似值，超出色域的通道會被限制在範圍內。混色結果的 OKLCH 則在這項處理之前計算。
OKLCH 與 sRGB 有什麼不同？
OKLCH 對明度、彩度與色相進行插值，色相採用較短路徑。sRGB 則對編碼後的紅、綠、藍通道進行插值。不同方式可能產生不同顏色。
分享網址包含什麼？
連結包含已套用的兩個 HEX 色值、顏色 B 的比例，以及混色空間。尚未套用的變更不會分享。