我一天中花了令人驚訝的時間在設計文件和樣式表之間,將一種顏色推向另一種顏色,直到懸停狀態、邊框或漸變停止看起來正確。多年來,我一直在腦海中進行算術,或者在拾取器中用眼球觀察它,這很好,直到您需要介於品牌藍色和溫暖中性色之間的確切顏色,並且您需要它作為可以粘貼的十六進制代碼。所以我建立了一個 混色器 在 工具。dev 它按照您控制的比例混合兩種顏色,提供圖像編輯器使用的相同混合模式,並將結果交給您 HEX、RGB 和 HSL。這是它以及什麼和引用的指南;混合顏色和引用;意味著在螢幕上。
TL;DR: 混色器將兩種顏色混合成一種。工具 混色器 以可調比例插值兩種顏色,支援W3C 可分離混合模式(多重、螢幕、疊加、變暗、變亮、差異、平均),在顏色之間建立中間步驟梯度,並將每個結果輸出為HEX、RGB 和HSL。它接受 hex、rgb ()、hsl () 和 CSS 顏色名稱,並且完全運行客戶端。
如何在螢幕上混合兩種顏色?
簡單的答案是兩種顏色的加權平均值'紅色、綠色和藍色通道。混合紅色 (255, 0, 0) 還有藍色 (0, 0, 255) 您對每個通道進行等份平均:紅色變為 (255+0)/2 = 128,綠色留下來 0,藍色變成 (0+255)/2 = 128,給予 (128, 0, 128),這就是十六進制 #800080,純紫色。將重量移向一側,然後沿著兩種顏色之間的線滑動。這正是比例滑桿的作用:在 0% 時,您保留第一種顏色,在 100% 時,您落在第二種顏色上,50% 是均勻的分割。
這與兩站 CSS 梯度使用的插值相同,這就是中點的原因 linear-gradient(red, blue) 那是紫色的嗎?混合器透過將兩種顏色之間的漸變繪製為一條樣本,您可以將每種顏色複製作為中間停止,從而使關係變得明確。如果您曾經想要"這兩種顏色之間均勻分佈的三種顏色,"漸變條是獲得它們的最快方法。
一個誠實的警告是,因為它讓人們感到驚訝:平均 RGB 通道並不是顏料混合的方式。在螢幕上,顏色是淺色並相加地組合;在油漆組中,它們是顏料並減法組合。將紅光和綠光混合成暗橄欖色,而不是從油漆中獲得的鮮豔黃色,因為您正在平均光值,而不是混合顏料。這不是工具中的一個錯誤,而是 sRGB 的本質,當您想要更生動的結果時,解決方法是混合輪子上靠得更近的色調。這 顏色轉換器 當您想在推理色調時看到跨格式表達的相同顏色時,可以在混音器旁邊方便使用。
混合模式和混合模式有什麼不同?
混合是上述加權平均值:它總是落在兩種顏色之間的直線上。混合模式完全是另一回事。它們是圖像編輯器的圖層混合操作,針對網路進行了標準化 W3C 合成與混合等級 1 規範,每個通道都用不同的公式而不是簡單的平均值來組合通道。
| 模式 | 每通道公式(值 0 到 1) | 效果 |
|---|---|---|
| 混合 | b (按比率加權) |
加權平均值介於兩種顏色之間 |
| 乘法 | a x b |
總是更深;白色留下顏色不變,黑色迫使黑色 |
| 螢幕 | a + b - a x b |
總是更輕;乘法的倒數 |
| 疊加 | 按基數相乘或篩選 | 增加對比度 |
| 變暗 | min(a, b) |
保持較暗的通道 |
| 閃電 | max(a, b) |
保持較輕的通道 |
| 差異 | abs(a - b) |
通道距離;相同的顏色給出黑色 |
| 平均 | (a + b) / 2 |
兩者的未加權平均值 |
值得承載的直覺:相乘總是變暗,因為乘以兩個分數得到的分數較小,所以紅色乘以藍色就是黑色(每種顏色都缺少另一種顏色的通道)。螢幕總是變亮,因為它被乘法應用於倒置值。差異給出了逐通道的距離,這就是為什麼在差異下將顏色與其自身混合會產生純黑色。在混合器中,比率滑桿的行為就像層不透明度一樣:它將混合結果淡化為第一種顏色,因此您可以將效果從微妙調至完整。
比率滑桿控制什麼?
此比率決定了第二種顏色或所選模式的混合結果在第一種顏色上的應用強度。將其視為頂層的不透明度。在 0% 時,頂層是看不見的,並且您看到第一種顏色未受影響。在 100% 時,頂層是完全不透明的,您會得到該模式的完整混合。在 50% 時,您會得到均勻的分割。對於普通混合,這會減少到熟悉的加權平均值;對於像 Multiply 這樣的模式,它可以讓您施加溫和的變暗效果,而不是全部效果。
這個統一的模型是經過深思熟慮的,因為它意味著一個滑桿在每種模式下都執行相同的概念工作。在實踐中,當我想要完全混合時,我使用低比率將顏色稍微推向另一種顏色(懸停狀態為 "按鈕,但 15% 朝向 black")和高比率。這 梯度發生器 當您想要將一對混合顏色變成完整的多停 CSS 漸層時,請從混合器停止的位置繼續。
如何獲得兩種顏色之間的確切顏色?
將模式設為混合,比率設為 50,結果就是精確的中點。您也可以直接從漸變條上讀取它:中心樣本是中間顏色。當您需要在兩個端點之間使用多種均勻間隔的顏色時,提高漸變步數並在所需的位置複製樣本。這是混合器構建的日常任務,無論您是為調色板生成色調、間隔資料視覺化顏色還是查找位於兩種品牌顏色之間的中性線。
為了建構單一顏色的整個系列而不是混合兩種顏色, 顏色色調產生器 更好,因為它將一種顏色混合到白色、黑色和灰色以產生色調、色調和色調。當您為文字或 UI 選擇顏色時,請執行結果 選色器 還有對比度檢查,因為混合精美的顏色仍然無法達到可讀性閾值。更廣泛的工作流程,從揀選到檢查再到運輸,都在 中列出 web 開發人員工具包 指南。
為什麼我的混合顏色有時看起來渾濁或深色?
造成這種情況的原因有兩件事,而且都是關於色彩空間而不是工具。第一個是已經提到的加減錯配:RGB 中的平均遠距離色調向灰色漂移,因此輪子上的相反顏色混合為暗淡的顏色。第二個是 sRGB 值是伽瑪編碼的,而不是線性光。光的真實物理平均值將首先轉換為線性空間,平均,然後轉換回來,從而使中點更亮。大多數工具、CSS 梯度和影像編輯器直接插入伽瑪編碼的 sRGB,因為它快速、可預測,並且與設計人員對梯度的期望相匹配,因此此混合器也這樣做。如果您想要更明亮的混合,請混合更近的色調,依靠螢幕模式,或達到感知均勻的空間,例如最終 CSS 中的 OKLCH。這 資料隱私線上工具 guide 解釋了為什麼,無論是否為泥濘的中點,在瀏覽器中而不是在伺服器上進行此數學計算是您寧願保持本機設計的正確預設值。
常見問題
如何混合兩種顏色?
要混合兩種顏色,您可以對它們的紅色、綠色和藍色通道進行平均,並根據您想要的每種顏色的數量進行加權。紅色 (255, 0, 0) 和藍色 (0, 0, 255) 的 50/50 混合平均為 (128, 0, 128),即紫色。該工具為您進行插值,並允許您使用比率滑桿移動重量,因此您可以落在兩種顏色之間的任何位置,而不僅僅是精確的中點。
混合和乘法有什麼區別?
混合是落在兩種顏色之間的加權平均值,因此混合紅色和藍色會得到紫色。 Multiply 以重疊墨水或濾光片的方式將它們組合起來,乘以通道值,因此它總是產生與兩個輸入一樣暗或更暗的顏色。紅色和藍色相乘得到黑色,因為每種顏色都缺少另一種顏色的通道。乘法是影像編輯的混合模式,而不是簡單的平均值。
為什麼混合兩種鮮豔的顏色有時會產生渾濁的結果?
因為每當兩種顏色在色輪上相距較遠時,平均 RGB 通道就會將結果移向灰色。紅色和綠色平均為暗橄欖棕色而不是鮮豔的黃色,因為螢幕顏色混合為淺色,而您可能期望的鮮豔黃色來自混合顏料。對於更生動的混合,請混合色調更接近的顏色,或嘗試螢幕模式,這樣可以使結果更明亮。
我可以在 HSL 而不是 RGB 中混合顏色嗎?
此混合器在 RGB 中插值,這是 CSS 梯度和影像編輯器預設所做的操作,並且它也會將結果報告為 HSL。 RGB 中的混合是可預測的,並且與兩站 CSS 梯度的呈現方式相符。 HSL 中的插值色調可以繞著色輪傳播很長的路並產生意想不到的中間色調,這就是為什麼 RGB 插值對於通用混合來說更安全的預設值。
比率滑桿會改變什麼?
此比率決定了第二種顏色或混合結果在第一種顏色上的應用強度。在 0% 時,您獲得第一種顏色不變,在 100% 時,您獲得所選模式的完整第二種顏色或完全混合,在 50% 時,您獲得均勻的分割。對於混合模式,它的行為類似於圖像編輯器中的層不透明度,使混合顏色在基底上褪色。
如何獲得兩種顏色之間的顏色?
將混合模式和比例設為 50%,結果就是精確的中點。您也可以從漸變條上讀取它,其中中間樣本是中間顏色。為了獲得更精細的控制,請在漸變中添加更多步驟,並複製與兩種顏色之間所需位置相符的中間樣本。
螢幕和疊加等混合模式有哪些用途?
它們是影像編輯器中的圖層混合模式,在 W3C 合成和混合規範中為網路定義。螢幕變亮並用於發光和高光,倍增變暗並用於陰影和色調,覆蓋層透過結合兩者來增加對比度。在混合器中預覽它們可以讓您預測兩個彩色層在將其應用於 CSS 或設計工具之前將如何組合。
攪拌機接受哪些顏色格式?
混合器接受十六進位代碼(三、六或八位數字)、rgb () 和 rgba () 值、hsl () 和 hsla () 值以及常見的 CSS 顏色名稱,如珊瑚色或 rebeccapurple。每個輸入都有一個本機顏色樣本,您可以按一下以直觀方式選擇,每個結果都以 HEX、RGB 和 HSL 顯示,因此您可以複製樣式表所需的格式。
混色器是免費且私密的嗎?
是的。混合顏色器完全免費,沒有註冊、沒有浮水印、沒有使用限制,每次計算都發生在您的瀏覽器中。您輸入的顏色永遠不會上傳,因此您混合的任何內容都不會離開您的設備,並且由於數學在本地運行,因此如果您在頁面加載後失去連接,該工具將繼續工作。
