混色器

色彩混合器將兩種顏色混合成一種新顏色,並向您顯示 HEX、RGB 和 HSL 的結果。您可以使用任何常見語法(十六進位代碼,如#4466EE、rgb()或hsl()值,或CSS 名稱,如珊瑚)給它第一種顏色和第二種顏色,選擇要折疊的第二種顏色的數量,並且它立即計算混合顏色。它還在兩種顏色之間建立了中間步驟的梯度,因此您可以看到整個過渡而不是單一中點。

直接混合是加權平均值:每種顏色以 50% 的比例貢獻相等,並且該工具在兩個輸入之間線性插值每個紅色、綠色和藍色通道。將比率滑向 0,然後保留第一種顏色;將其滑向 100,然後落在第二個上。這與 CSS 對兩站梯度使用的數學相同,這就是為什麼紅藍梯度的中點是該工具報告的紫色。

除了普通混合之外,混合器還提供 W3C 合成和混合規範中定義的可分離混合模式:乘法、篩選、疊加、變暗、變亮、差值和平均值。這些操作與 Photoshop 和 GIMP 等影像編輯器在層之間應用的操作相同。乘法總是變暗(紅乘以藍是黑),螢幕總是變亮(藍底紅是洋紅色),差異給出兩種顏色之間的逐通道距離。然後,該比率就像層不透明度一樣,控制混合結果在第一個顏色上的應用強度。

一切都在瀏覽器中的客戶端運行。您輸入的顏色永遠不會離開選項卡,並且由於顏色數學是簡單的算術,因此一旦頁面加載,該工具就會離線工作。設計人員在提交設計文件之前,會聯繫混音器來找到介於品牌主色和中性色之間的顏色,建立色調和重音音階,或預覽兩層如何組合。開發人員使用它來產生梯度停止,計算懸停狀態,並將混合結果直接轉換為可以貼上到 CSS 中的 HEX 或 HSL 值。