Color Palette Generator
Generate color palettes
Generate color palettes 在您的瀏覽器中本地執行
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
調色盤產生器採用一種基色並從中匯出標準和諧方案：互補色、類似色、三元色、分裂互補色和四元色，以及向白色的色調和向黑色的色調的漸變。在 HSL 中，透過旋轉色調同時保持飽和度和亮度來計算和聲，這就是結果與基礎保持相關而不是漂移的原因。漸層是大多數調色盤實際需要的部分，因為工作介面需要用於懸停、活動和停用狀態的相同色調的多個值，而不僅僅是一種強調色。
Where people use the
- 圍繞單一品牌顏色建立調色盤。
- 從一種口音產生懸停、活動和停用變體。
- 探索未通過對比度檢查的顏色的替代品。
- 為表面和邊界產生中性坡道。
How to use the
- 1
選擇基底色
輸入十六進位值，例如 4ECDC4，或使用選擇器。其他一切都源自於這種顏色。
- 2
閱讀和諧方案
每個方案都是不同的色調旋轉。互補度數為 180 度，三度數為 120 度和 240 度，依此類推。
- 3
採取色調和陰影斜坡
五種白色色調和五種黑色色調為您提供真實介面中所需的狀態和高度。
- 4
複製值
產生的十六進位值的完整清單位於一個區塊中，可以貼到樣式表或設計令牌檔案中。
- 5
出貨前檢查對比度
透過對比度檢查器執行調色盤中的任何文字和背景對。和諧不等於可讀。
提示和最佳實踐
- 從品牌中選擇基色，然後僅調整狀態的亮度。
- 為您想要引起注意的一項操作保留互補色。
- 發貨前務必透過對比檢查來進行最終配對。
常見問題
這些方案之間有什麼區別？
互補色使用相反的色調，可提供最強的對比度並適合號召性用語。 Analogous使用兩邊30度的鄰居，這樣既平靜又安全。三色均勻分佈三種色調，活潑且較難控制。分裂互補透過使用相反兩側的兩種色調來軟化互補衝突。 Tetradic 使用四種直角色調，適合複雜的儀錶板。
為什麼生成的顏色具有相同的飽和度和亮度？
因為僅旋轉色調就可以使它們保持可識別的相關性。同時改變亮度會產生看起來不相關的顏色，這違反了調色盤的意義。
淺色只是與白色混合的顏色嗎？
實際上是的，但是在 HSL 中透過提高亮度同時保持色調和飽和度來計算。這可以保持色調穩定，而簡單的 RGB 混合會偏向灰色。
調色盤應該有多少種顏色？
對於大多數介面來說，兩種或三種色調加上中性漸變就足夠了。具有五種飽和色調的方案很難一致使用，通常看起來很偶然。
它會檢查可訪問性嗎？
不，它只產生顏色。在您打算用於文字的任何配對上使用對比度檢查器。