我發貨的每個設計系統都從單一品牌顏色開始,然後立即需要十幾種顏色。藍色永遠不夠。你需要一個淺藍色來表示懸停狀態,一個淺藍色表示選定行的背景,深藍色表示位於蒼白表面上的文本,柔和的藍色表示不應該喊叫的禁用按鈕。當我為[toolz。dev] 建構介面時(/,我不斷打開顏色選擇器,輕推亮度滑桿,觀察結果是否仍然看起來像同一個系列,並將十六進位代碼粘貼到我的樣式表中一次一個。它有效,但速度很慢,結果不一致,因為 "輕推直到看起來正確"不是一個可重複的過程。
所以我建造了 顏色色調產生器。 您給它一種顏色,它給你三個完整的比例,在色彩空間中計算 CSS 色彩模組等級 4 定義而不是透過輕推六角形數字:色調向白色邁進,色調向黑色邁進,色調向灰色邁進。本指南解釋了這三個單字的實際含義、數學如何運作以及如何將單一品牌顏色轉換為連貫的調色板,您可以直接放入 CSS。
TL;DR: 色調是您的顏色與白色混合,色調是您的顏色與黑色混合,色調是您的顏色與灰色混合。每個都保留原始色調,僅改變顏色的淺色、深色或靜音。貼上 HEX、RGB 或 HSL 值,選擇您想要的步驟數,生成器一次建立所有三個比例,每個樣本可複製為 HEX、RGB 或 HSL。一切都在您的瀏覽器中運行。
色調、色調和色調有什麼不同?
這三個字來自傳統的色彩理論,它們描述了三種不同的方式來改變顏色,而不改變它從根本上來說是哪種顏色。這種區別值得正確對待,因為設計師以及越來越多的設計代幣都精確地使用這些詞。
色調是與白色混合的顏色。添加白色可以提高亮度並軟化顏色。粉紅色是一種紅色,淡藍色是一種更強的藍色。當您需要蒼白的背景、微妙的填充物和介面中最淺的表面時,您會接觸到色調。
色調是與黑色混合的顏色。添加黑色會降低亮度並加深顏色。栗色是紅色,海軍藍是藍色。色調為您提供比例尺的較暗端:文字顏色、按下按鈕的狀態以及比底色需要更多重量的邊框。
色調是與灰色混合的顏色。添加灰色會降低顏色'強度不會使其顯著變淺或變暗。色調是三種色調中最未充分利用的,它們是調色板背後的秘密,感覺複雜而不是花哨。柔和的顏色讀起來更平靜、更專業,這就是為什麼柔和的調色板主導了嚴肅的產品設計。
這三者的重要共同點是它們保留了色調。藍色的色調仍然是藍色的,藍色的色調仍然是藍色的,藍色的色調仍然是藍色的。這就是使一組色調、色調和色調看起來像一個家族而不是隨機分類的原因。
每個量表的實際計算方式如何?
在引擎蓋下,每個樣本都是 RGB 空間中兩種顏色之間的直線混合。生成器將您的底色取為紅色、綠色和藍色三元組,並採用目標顏色,然後以均勻的步驟從一個顏色走到另一個顏色。對於色調,目標是白色的,即白色 (255, 255, 255). 對於色調,目標是黑色, (0, 0, 0). 對於音調,目標是中灰色, (128, 128, 128).
任何單一通道的混合都是簡單的算術。要獲得從基數到目標的百分之三十的樣本,您可以進行計算 base + (target - base) * 0.30 對於紅色通道,然後是綠色通道,然後是藍色通道,最後是整數。十步色調刻度以百分之十、百分之二十等計算,最高可達百分之百,其中顏色已變成純白色。基色本身包含在每個刻度頂部的零百分比樣本中,因此您始終可以看到從哪裡開始。
由於混合發生在 RGB 中的每個通道中,因此色調基本上保持固定,以獲得色調和色調。向純白色或純黑色混合會改變顏色反射的光量,但不會改變其潛在特徵,因此相同底色的色調和色調在不同亮度下讀作相同顏色。色調可以改變頭髮的感知色調,因為灰色位於中性中心,並且向它拉動會稍微降低每個通道的飽和度,但實際上整個音階仍然讀作一種顏色。如果您想準確檢查給定的樣本如何跨格式著陸,那麼 顏色轉換器 將並排向您顯示其 HEX、RGB、HSL 和 HWB 值。
為什麼不改變 HSL 的亮度呢?
一個合理的問題是為什麼該工具混合在 RGB 中而不是簡單地升高或降低 RGB L HSL 中的值。兩種方法都會產生單色比例,並且都是有效的。 RGB 中向白色和黑色混合的是經典的畫家'色調和色調的模型,它乾淨地映射到設計師已經使用的單字上。它還保持端點誠實:百分之一的色調完全是白色的,百分之一的色調完全是黑色的,當你只操縱 HSL 亮度時,這並不總是正確的,因為飽和度與它的相互作用。生成器為您提供第三種音階的音調,專門用於覆蓋 "無強度"純亮度變化無法解決的軸。
我應該產生多少步驟?
產生器可讓您選擇每個比例的兩到二十級,正確的數字取決於您正在建造的建築物。對於您想要命名坡道的設計系統 blue-50 通過 blue-900更大的步數為您提供了一個可以採樣的精細梯度。對於快速懸停和活躍狀態,三到四個步驟就足夠了。我的預設值是十,因為一個基數的十種色調、十種色調和十種色調為我提供了一個完整的工作調色板,而沒有壓倒性的樣本牆。
更多步驟意味著相鄰顏色之間的跳躍較小,當相鄰色調需要在視覺上清晰但接近時,這就是您想要的,例如資料表的交替帶。更少的步驟意味著更大膽的跳躍,這適合緊湊的調色板,其中每種顏色都有明顯不同的工作。沒有錯誤的答案,並且由於工具立即重新計算,因此您可以上下滑動步數,直到間距看起來正確。
色調與降低不透明度有何不同?
我很早就陷入的一個陷阱是利用不透明度來偽造色調。這似乎是等效的:在白色頁面上放一個藍色按鈕到百分之五十的不透明度,它看起來像淺藍色。問題是不透明度不是一種顏色,而是一種合成指令,它完全取決於元素後面的任何內容。深色表面上相同的百分之五十的藍色變成泥濘的深藍色,而在照片上它變得不可預測。你的&引用;淺藍色&引用;根據其背景改變身份,這與設計系統的需求相反。
色調透過將亮度烘烤成真實、不透明的顏色來解決這個問題。生成器給您的樣本是一個固定的十六進位值,無論後面是什麼,它看起來都是一樣的,因為它是完全不透明的。當您需要一種一致的較淺版本的顏色,該顏色在產品的每個表面上都可以預測地表現時,請使用色調而不是透明度。保留不透明度以獲得真正的透明度效果,例如覆蓋層和稀鬆布,您實際上希望背景通過它們顯示出來。將這兩個想法分開是讓調色板感覺堅固而不是偶然的安靜習慣之一。
如何將這些音階變成可用的調色板?
調色板不僅僅是一堆顏色,它是一組作業。這是我從單一品牌顏色開始時使用的工作流程。以底座作為主要動作顏色,即主按鈕和連結上的顏色。觸及背景色調:頁面或卡片表面的色調非常淺,光元素的懸停狀態的色調稍強。觸及文字和強調的色調:身體複製的深色調需要與淺色形成對比,主按鈕按下狀態的中色調。當您需要當前但安靜的顏色時,請使用色調,例如禁用控製或輔助徽章。
你不能跳過的一條規則是對比。如果按鈕背景上的標籤文字無法滿足輔助功能對比度要求,那麼作為按鈕背景看起來很可愛的色調就毫無用處。一旦您選擇了彼此疊放的顏色對,請將它們運行到 色彩對比度檢查器 確認他們清除 WCAG 閾值。選擇美麗的色調是簡單的部分。確保它們上的文字可讀是將真實調色板與情緒板分開的部分。
下表顯示了我通常如何將十步比例映射到介面角色。
| 斯沃琪來源 | 典型角色 | 使用範例 |
|---|---|---|
| 最輕的色調 | 表面和背景 | 頁面背景、卡片填寫、選定行 |
| 淺色調 | 懸停在輕元素上 | 按鈕懸停,清單項目懸停 |
| 基色 | 主要行動 | 主按鈕、活動連結、品牌口音 |
| 中等色調 | 壓縮和活躍狀態 | 按鈕活動、聚焦邊框 |
| 深色陰影 | 文字和高度強調 | 光表面上的正文、標題 |
| 語氣 | 靜音次要元素 | 禁用控制裝置、輔助徽章 |
這如何與其他色彩工具搭配使用?
色調產生器是小型管弦樂團中的一種樂器。它回答問題&引用;給我更多這種顏色,&引用;但真正的調色板工作也涉及一些相鄰的問題。當您需要不同色調的和諧顏色時,例如互補或類似的集合, 調色板產生器 建立這些關係。當您從圖像或設計中取樣起始顏色並需要讀取其確切值時, 選色器 給你十六進位代碼。當您的色調注定要出現在從一個背景淡入另一個背景的 CSS 背景時, 梯度產生器 將其中兩個變成準備貼上 linear-gradient.
自然管道如下所示:選擇或貼上底色,產生其色調、色調和色調,驗證您計劃根據對比度檢查器堆疊的對,並將獲勝者複製到您的樣式表或設計令牌中。這些工具中的每一個都完全在瀏覽器中運行,因此您尚未宣布的品牌顏色永遠不會傳播到任何人's 伺服器。如果本地優先工具是您共享的價值,那麼該部分就開始了 資料隱私和線上工具 解釋了為什麼我以這種方式構建一切,並且 web 開發人員工具包 收集我日常工作流程中的其餘實用程式。
一個快速工作的例子
從藍色品牌開始 #4466EE. 將步數設為十,並將複製格式保留在十六進位。生成器傳回三列。
色調欄開始於 #4466EE 然後爬向白色,穿過逐漸變淺的藍色,直到最後一個樣本 #FFFFFF. 在中間的某個地方,你會看到一個柔軟的長春花,它構成了出色的精選行背景。陰影列從同一開始 #4466EE 然後下降到黑色,給你適合文字和按下狀態的深靛藍,結束於 #000000. 音調列從 開始 #4466EE 然後走向灰色,產生柔和的石板布魯斯,讀起來平靜而低調,結尾為 #808080.
從該輸入中,您現在可以得到背景(淺色)、懸停填充(稍暗的色調)、原色(底色)、文字顏色(深色)和禁用顏色(色調)。點擊任何樣本來複製它,如果您的專案喜歡這些,則將複製格式切換到 RGB 或 HSL,然後貼上。過去二十次造訪選色器現在只需點擊一次即可,而且由於數學是確定性的,因此調色板每次都是一致的。
常見問題
色調、色調和色調有什麼不同?
色調是與白色混合的顏色,使其顏色變淺。色調是與黑色混合的顏色,使其顏色變深。色調是一種與灰色混合的顏色,它會使其靜音而不改變是淺色還是深色。這三種顏色都保持原始色調,僅改變顏色的淺色、深色或飽和度。
如何產生顏色的色調?
輸入您的基色,然後讀取色調列,該色列將顏色與越來越多的黑色混合在一起。每一行都是原始版本的較暗版本,您可以將它們中的任何一個複製為 HEX、RGB 或 HSL。增加步數以獲得更平滑的暗值範圍。
淺色和深色是如何計算的?
每個比例都是底色朝向目標的線性混合。色調向白色 (255, 255, 255) 混合,色調向黑色 (0, 0, 0) 混合,色調向中灰色 (128, 128, 128) 混合。例如,30% 的色調會將每個紅色、綠色和藍色通道從底部移動到白色的 30%。
我可以貼上哪些顏色格式?
您可以輸入 HEX 代碼(3 或 6 位數字,有或沒有前導雜湊值)、rgb () 值、hsl () 值或常見的 CSS 顏色名稱(例如深紅色或鋼藍色)。該工具將您的輸入內部轉換為 RGB,並以 HEX、RGB 和 HSL 報告每個樣本。
我可以產生多少種色調?
每個音階可以設定 2 到 20 個步驟。每個音階還包括原始底色,因此 10 步設定可為您提供底色加上 10 種色調、10 種色調和 10 種色調。較少的步驟會在值之間提供粗體跳躍,而較多的步驟會提供精細的漸變。
我可以使用此工具建立單色調色板嗎?
是的。單色調色板使用不同亮度和飽和度等級的一種色調,這正是色調、色調和色調所產生的效果。選擇基本品牌顏色並使用其色調作為背景,使用其底色作為主要元素,使用其色調作為文字或懸停狀態。
產生的顏色保持相同的色調嗎?
色調和色調幾乎準確地保持了色調,因為與純白色或黑色的混合會改變亮度而不是色調。色調可能會發生非常輕微的變化,因為灰色位於色彩空間的中心,但對於實際設計工作,整個比例讀作同一顏色的一個系列。
色調產生器是免費且私有的嗎?
是的。它是完全免費的,沒有註冊,也沒有限制。所有解析和顏色數學都使用客戶端 JavaScript 在瀏覽器中運行,因此您輸入的顏色永遠不會離開您的設備,並且一旦頁面加載,工具就會保持離線工作。
