大多數調色板都是從某人已經喜歡的一種顏色開始的:品牌藍色、標誌的綠色、婚禮的織物樣本。困難的部分是第一選擇之後的一切。它搭配哪些顏色,您需要多少顏色,以及為什麼在設計工具中看起來平衡的套裝一旦放在上面就會散開?
色彩和諧透過色輪上的簡單幾何形狀回答了前兩個問題。對比回答第三個,這是人們跳過的一個。本指南涵蓋了這兩個內容,您可以檢查真實的 HEX 值,並展示如何免費 調色板產生器 將一種基色變成六種調色板。
TL;DR: 調色板產生器旋轉底色' s 以固定角度圍繞 HSL 色輪進行色調(互補色為 180 度,三元色為 120 度,四元色為 90 度,類似色為 30 和 60 度)或移動其亮度以形成色調、色調和單色集。 Toolz 調色板產生器執行此客戶端、免費、無註冊:選擇底座、選擇六種模式之一、點擊樣本以複製其 HEX 程式碼或將整個集合複製為 CSS 自訂屬性。 HSL 在感知上並不統一,因此在發貨前根據 WCAG 對比度檢查任何文字和背景對。
什麼是調色板產生器?
調色板產生器是一種工具,它採用一種起始顏色並使用固定規則計算相關顏色,因此該集合看起來協調,不會反覆試驗。規則來自色輪:彼此相對的顏色對比、彼此相鄰的顏色混合、顏色圍繞輪平衡均勻分佈。
Toolz 產生器採用 HSL,它將顏色描述為色調、飽和度和亮度。色調是車輪周圍 0 到 360 度的角度(0 處為紅色,120 處為綠色,240 處為藍色)。飽和度是顏色的生動程度,從 0% 灰色到 100% 全彩。亮度從 0% 黑色到 100% 白色。 HSL 是為網路定義的 CSS 色彩模組等級 4 規範,每個瀏覽器將其轉換為相同的 RGB 值。
在 HSL 中工作可以使和諧規則易於表達。互補色是相同的飽和度和亮度,色調添加了 180。這是一個補充,而不是大量使用 RGB 滑桿。
六種和聲模式是什麼?
每種模式都是擺脫基色的秘訣。這正是 Toolz 產生器在每種模式中所做的事情,取自其原始碼。
| 模式 | 什麼變化 | 特警 | 色調位置 |
|---|---|---|---|
| 色調和放大器;色調 | 僅亮度,設定為 90、75、60、基值 35、22 和 12 | 7 | 基礎色調 |
| 單色 | 光度和飽和度在一起 | 5 | 基礎色調 |
| 互補的 | 色調翻轉 180 度,底色較淺,補色較深 | 4 | 底座,底座+180 |
| 類似 | 色調單向階梯 30 度 | 5 | -60,-30,底座,+30,+60 |
| 三元組 | 色調將圓圈間隔三分之一 | 3 | 底座,+120,+240 |
| 四元 | 色調間隔了四分之一的圓圈 | 4 | 基礎,+90,+180,+270 |
有兩個細節在實踐中很重要。類似、三元和四元保留基色'每個樣本的飽和度和亮度,因此它們只會改變色調。色調和放大器;色調和單色保持色調並改變亮度,因此它們會產生一種顏色的淺色和深色版本。
一個有效的例子:#4466ee 中的每個模式
生成器以#4466ee 開啟,一個中藍色。轉換為 HSL 時,其色調為 228,飽和度為 83%,亮度為 60%。這是該基數的每個模式返回的內容。這些是工具列印的 HEX 代碼,您可以使用 CSS 規範中的標準 HSL 到 RGB 轉換來重現它們。
三元組 在色調上加上 120 和 240:228,然後是 348,然後是 108(468 繞到 108)。
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
注意圖案。在相同的飽和度和亮度下,旋轉輪子的三分之一會重新洗牌相同的三個 RGB 通道值:44、66 和 ee 交易位置。
互補的 新增 180,落在色調 48 上,暖黃色。該模式還包括較淺版本的基數和較暗版本的補碼,因此您將獲得四個樣本:#8aa0f4、#4466ee、#eecc44 和 #d2ac14。
類似 從 168 到 288 一次 30 度:#44eecc、#44bbee、#4466ee、#7744ee、#cc44ee。它讀起來就像一條從青色到藍色再到紫色的帶子。
四元 新增 90、180 和 270:#4466ee、#ee44bb、#eecc44、#44ee77。
單色 保持色調 228 並以飽和度換取兩個方向的亮度:#c4cded、#879ae8、#4466ee、#0936ec、#0225b1。
色調和放大器;色調 將亮度設定為 90、75、60,基值 35、22 和 12:#d0d9fb、#8aa0f4、#4466ee、#4466ee、#0f2da3、#0a1c67、#050f38。
最後一個顯示出一個值得知道的怪癖。色調等級使用固定的亮度步長加上底色'自己的亮度。當底座恰好位於 90%、75%、60%、35%、22% 或 12% 亮度時,就像 #4466ee 在 60% 亮度時一樣,兩個樣本會顯示相同。如果您想要七種不同的顏色,請將底座亮度推一步。
如何為工作選擇合適的和諧?
根據設計所需的對比度來選擇和諧。低對比方案感覺平靜且易於保持一致;高對比方案會引起注意並且很容易過度。
| 目標 | 良好的啟動模式 | 為什麼 |
|---|---|---|
| UI 色標(100 至 700) | 色調和放大器;色調 | 一種色調,可預測的光暗步驟 |
| 一個簡約、有凝聚力的品牌 | 單色 | 一切都有相同的色調,沒有任何衝突 |
| 引人注目的號召性用語 | 互補的 | 相反的色調是最強的對比 |
| 柔和、自然的外觀 | 類似 | 鄰近的色調混合 |
| 一套俏皮、平衡的套裝 | 三元組 | 三種均勻分佈的色調,沒有一種占主導地位 |
| 多個系列的圖表 | 四元 | 仍然相關的四種不同的色調 |
佈局的一個常見經驗法則是讓一種顏色覆蓋大部分區域,另一種顏色佔據較小的份額,並且很少出現重音。它與互補和三元調色板配合得很好,其中給予所有顏色相等的空間往往看起來很大。
為什麼調色板看起來平衡但讀起來很差?
調色板在 HSL 中看起來平衡,但在螢幕上仍然會失敗,因為 HSL 亮度並不是顏色對一個人來說的亮度。 HSL 將 60% 亮度下的每種色調視為同等亮度。人類視覺則不然。
上面的補充範例使這一點變得具體。 #4466ee 和 #eecc44 的 HSL 亮度均為 60%。它們的相對亮度(Web 內容可訪問性指南用於感知亮度的測量值)非常不同:藍色約為 0.17,黃色約為 0.62。眼睛的黃色亮了幾倍。
此間隙顯示為對比。使用 WCAG 公式,對比度 = (L1 + 0.05) /(L2 + 0.05),其中 L1 是較淺的顏色's 亮度:
| 對 | 對比度 | WCAG AA 適用於普通文字 (4.5:1) |
|---|---|---|
| #4466ee 上的白色文字 | 約4.77:1 | 通過 |
| #eecc44 上的白色文字 | 約1.57:1 | 失敗 |
| #eecc44 上的黑色文字 | 約13.4:1 | 通過 |
生成器本身已經對此做出了反應:每個樣本從亮度估計中選擇深色或白色標籤文本,這就是為什麼黃色樣本獲得深色標籤的原因。對於真實設計,請運行您計劃使用的文字和背景對 顏色對比度檢查器. 閾值來自 WCAG 2.2:普通文字為 4.5:1,AA 級大文字為 3:1。這 顏色對比度指南 逐步瀏覽亮度數學。
如何將調色板匯出為 CSS 變數?
點擊複製 CSS,生成器將當前調色板作為 CSS 自訂屬性放在剪貼簿上 :root. 名稱依樣本順序以 100 為步長編號。對於三元組範例:
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
將其貼在樣式表的頂部並在任何地方引用顏色:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
編號遵循樣本順序,而不是亮度。在陰影和放大器中;色調模式恰好從淺色到深色,所以 --color-100 是最輕的色調。在三元或類似模式下,數字只是位置。將變數重新命名為有意義的變量,例如 --brand, --accent 和 --surface 一旦你選擇了,因為 --color-200 對於下一個閱讀 CSS 的人來說沒有任何意義。
若要複製單一顏色,請按一下其樣本。 HEX 代碼轉到剪貼簿,樣本顯示 "複製並引用;片刻。
你能用它製作婚禮或柔和的調色板嗎?
是的,只要你帶上起始顏色。沒有婚禮預設或策劃的主題,因此調色板僅與您選擇的基礎一樣好。
對於婚禮,請從真實的東西中選擇顏色:鮮花、邀請卡庫存、伴娘禮服面料。輸入其十六進位代碼並嘗試每種模式。從鼠尾草綠開始,#9caf88,補充返回#c2ceb6、#9caf88、塵土飛揚的薰衣草#9b88af 和更深的#755e8d。薰衣草對抗鼠尾草是經典的配對,數學一鍵就能找到它。
對於粉彩,從淺色、柔和飽和的底色開始,例如#a7c7e7。類似、三元和四元在每個樣本上保持輕盈和飽和,因此整個套裝保持柔軟。色調和放大器;色調和單色故意移動亮度,因此它們添加了深色,對於藍色,顏色低至#0d1f30。沒有單獨的亮度滑桿;底色為對照。
螢幕顏色和列印顏色不同。顯示器混合紅色、綠色和藍光,而印表機在紙上塗上青色、洋紅色、黃色和黑色墨水,而一些明亮的螢幕顏色沒有精確的墨水等效物。如果調色板要放在文具上,請在完整運行之前訂購列印的校樣。
常見的錯誤和錯誤案例有哪些?
大多數調色板問題都來自輸入或過於信任數學。
鍵入時調色板會變成藍色。 在文字方塊保存有效的 HEX 代碼之前,產生器會回落到 #4466ee。半類型值,例如 #9c 或者 #9caf8 顯示預設的藍色調色板。該欄位接受三到六個十六進位數字,帶或不帶 #,所以 #9ca 途中 #9caf88 簡要顯示 #99ccaa 的調色板。
基本樣本僅一步之遙。 顏色在轉換回來之前會四捨五入到整個 HSL 數字,因此某些基數不會精確地往返。例如,#c08081 回傳為 #c18182。差異是每個通道一個單位且不可見,但如果您與品牌代碼完全匹配,這很重要:保留官方 HEX 作為基礎,並使用生成的 HEX 作為其餘部分。
到處使用每種顏色。 五色類似調色板是一個可供選擇的範圍,而不是所有需要工作的五種顏色。
跳過對比度。 如上所述,相同 HSL 亮度下的兩種顏色的亮度差異可能超過三倍。檢查文字對。
期待感知均勻。 陰影步驟甚至在 HSL 亮度下也是如此,而不是它們看起來有多輕。如果您需要一個看起來均勻的刻度,請透過眼睛調整各個步驟或在感知空間(例如 OKLCH)中工作,CSS Color 4 也定義了該空間。
這與其他色彩工具相比如何?
調色板的產生是較長工作流程中的一個步驟。表格顯示了適合每個步驟的工具。
| 任務 | 工具 | 它給你什麼 |
|---|---|---|
| 尋找或取樣起始顏色 | 選色器 | 任何顏色的 HEX、RGB 和 HSL |
| 建立一個協調的集合 | 調色板產生器 | 六種和諧模式,CSS導出 |
| 製作一種顏色的細粒度 | 顏色色調產生器 | 專用的色調和陰影坡道 |
| 混合兩種顏色 | 混色器 | 兩個輸入之間的中間顏色 |
| 檢查文字可讀性 | 顏色對比度檢查器 | WCAG 比率並通過或失敗 |
如果音階比和聲更重要,那麼 產生色調和色調的指南 更深入地建造 50 至 900 個坡道。每個顏色工具都列在 色彩工具集線器.
產生器是私有的嗎?它離線工作嗎?
是的。所有 HSL 數學和渲染都可以在使用 JavaScript 的瀏覽器中執行。您鍵入的任何內容都不會上傳,並且在頁面載入後 調色板產生器 在沒有網路連線的情況下繼續工作。複製樣本或 CSS 計入每日使用限制,該限制記錄您所處的模式,而不是您的顏色。
