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 混合会偏向灰色。
调色板应该有多少种颜色？
对于大多数界面来说，两种或三种色调加上中性渐变就足够了。具有五种饱和色调的方案很难一致使用，并且通常看起来很偶然。
它会检查可访问性吗？
不，它只产生颜色。在您打算用于文本的任何配对上使用对比度检查器。