原文链接

你是否用过某种花哨的调色盘生成工具?你可以从这玩意里挑选初始颜色,输入一些选项,比如音乐术语 “三连音” 或者 “第四音阶”,
之后会赠送你五个完美的颜色样板。不过你真的想使用这些颜色去搭建你的网站吗?

这个通过计算和科学方法得到的完美色彩方案非常诱人,但不是很有用

除非你想让网站看起来像这样:

# 你实际需要的是什么

你不可能仅仅使用五个十六进制代码就能做出东西。真实情况是,你需要从一套更全面的色彩集中选择。

你可以把好的调色板分为三个类别

# 灰色 greys

文字,背景,面板,表单空间 —— 几乎界面上的所有东西都是灰的

你需要的灰色比你想象的要多,虽然三到四个色调听上去感觉有点多,但这种情况不会持续太长时间,
直到你希望有个比色调 2 更暗,比色调 3 更亮的色调之前。

实践中,你需要 8-10 个色调来选择(这个将在之后介绍)。而不是浪费太多的之间去抉择到底是使用
'#77' 还是 '#78',这个数量可以确保你不必妥协太多。

纯黑色看起来特别不自然,一般会从一个很深的灰色开始,然后以稳定的增量逐渐变为白色

# 主色 Primary color (s)

大多数网站使用一个,也可能两个颜色供主要动作,强调导航元素等功能时使用。这些颜色决定了网站的整体外观
—— 那些让你认为 Facebook 是 “蓝色” 的,尽管它实际上是灰色的

就像灰色一样,你需要多种(5-10)浅色和深色调可供选择。

超浅色调可用作警告等事物的有色背景,而深色调适用于文本。

# 强调色 Accent colors

在主色之上,每个网站都会需要一些强调色来为用户传达不同的信息。

例如,您可能想要使用引人注目的颜色,如黄色,粉红色或蓝绿色来突出显示一项新功能:

你可能还需要颜色来强调不同的语义状态,例如用红色确认破坏性操作:

黄色表示警告信息:

绿色代表正向趋势:

你同样会使用到这些颜色的多种色调,即便它们应该在整个用户界面中非常谨慎地使用。

当你在构建时发现你需要使用颜色来区分或者分类一些类似的元素时(如图表中的线,日历中的事件,
项目中的标签),你可能会需要更多的强调色

对于复杂的 UI,需要多达十种不同的颜色,每种颜色为 5-10 种色调的情况并不罕见。

# 预先定义色调

当你需要在调色板中创建更亮或更暗的颜色变化时,不要自作聪明地使用 CSS 预处理器功能,
如 “lighten” 或 “darken” 来动态创建色调。这会使你最终得到 35 种略有不同的蓝色色调,
而他们看起来却都是一样的。

相反,你应该预先定义固定的色彩集合,然后在工作中使用他们

所以你怎么把这样的调色板放在一起呢?

# 先选择基础颜色

首先为您想要创建的比例选择一种基色 - 中间的颜色是浅色和深色的基础。没有真正的科学方法可
以做好这一点,但对于主色和强调色,一个好的经验法则是选择一个可以作为按钮背景使用的色调。。

特别注意的是,这里没有真正的规则,比如 “50%亮度开始” 或其他任何规则。每种颜色的表现都有点不同,
所以你必须依靠你的眼睛观察这一点。

# 寻找边缘

下一步,挑选最暗的色调和最亮的色调。这同样也没有什么科学方法可以用。不过你可以设想它们如何被使用,
以及选择使用他们的上下文环境来帮助你。

通常最暗的色调用来给文本使用,而最亮色调供元素的背景使用。

简单的弹窗控件是一个解释他们的好例子。也是这些颜色的好地方。

从与基色色调匹配的颜色开始,并调整饱和度 (saturation)亮度 (lightness),直到您满意为止。

# 填补空白

现在你已经拥有了基色,以及他的最暗色调和最亮色调,你只需要填补他们之间的空白。

对于大多数的项目来说,你的每个颜色至少需要 5 个色调,如果你不想感到受限制,这个数字可能会接近 10。

9 是一个不错的数字。因为它很容易划分,而且填补空白也简单。让我们成最暗色调为 900,基础色调为 500,
最亮色调为 100。

下面选择色调 700 与色调 300,它们正好位于空白的中间位置。你希望这些色调感觉就像两边色调之间的完美折衷。

你可以再使用相同的方法填补剩余的 4 个空白(800,600,400,200)

现在你得到了一个拥有完美平衡的色彩集,它提供足够的选项以适应您的设计理念,而不会限制你。

# 关于灰色

对于灰色,基色并不重要,但其他过程是相同的。 从边缘开始并填补空白,直到你拥有所需的为止。

通过为项目中最暗的文本选择一种颜色来选择最暗的灰色,并通过选择适合微妙的灰白色背景的颜色来选择最浅的灰色。

# 这可不是一门科学

尽管很诱人,但你不能完全依靠数学来制作完美的调色板。如上所述的系统方法很适合入门,
但如果你需要,不要害怕做一些调整。

一旦你真正开始在你的设计中使用你的颜色,你几乎不可避免地想要在色调上调整饱和度,
或者使一些色调更亮或更暗。 相信你的眼睛,而不是数字。

如果可以,请尽量避免经常添加新的色调。 如果你不想努力控制你的调色板,你可能根本没办法掌握色彩系统。

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

不会游泳 微信支付

微信支付

不会游泳 支付宝

支付宝

不会游泳 贝宝

贝宝