仅凭选择的色彩方案,我们就可以轻松辨别出现代网站和过时网站的区别,或者区分出杰出的设计和平庸的设计,这种方式令人惊叹。
颜色是设计师工具包中的必备元素,但刚开始时,它们可能会让人不知所措。
以下是完整的色彩基础指南,来消除色彩的神秘感。
了解配色方案
主要有4种色彩方案:
单色
这种方案使用同一颜色的不同色调和浓淡,营造和谐统一的视觉效果。
相近色
这种方案使用色环上相邻的颜色,确保视觉效果自然和谐。在网页背景等不需要对比的设计中使用。
互补色
色环上互为对立色。搭配使用时,可以使彼此“突出”,但需要谨慎,以避免产生刺眼效果。
三色
色环上三种颜色间隔均匀排列,提供充满活力的对比效果,同时保持谐和。需要使一种颜色主导,其他两种作为点缀。
色彩表示法:命名难以命名的颜色
在将现实世界的颜色翻译成数字设计时,我们使用标准表示法。
RGB
代表红绿蓝。通过指定这三种原色的强度来定义颜色。
十六进制（HEX）
网页设计中常用的十六进制表示法。它是根据RGB值派生的六位数字字母组合。例如,#FFFFFF代表白色。
CMYK
用于印刷品。代表青色、洋红、黄色和黑色。它将颜色表示为这四种印刷颜色的组合。
HSL
代表“色相(Hue)”、“饱和度(Saturation)”和“亮度(Lightness)”。色相是颜色,饱和度是强度,亮度就是颜色的明暗程度。
HSB
HSB是一种色彩模型,与HSL一样将颜色分解成组成部分。但是,HSL使用亮度,而HSB使用亮度,代表颜色的值。
如何创建和谐的HSL色彩组合
许多网站提供生成色彩组合的工具,通常依赖十六进制颜色表示法。
说实话:这些数字字母组合有时在您想要修改给定的色调时会带来挑战。
但是,通过理解HSL代码的机制,您可以创建并根据具体需求调整色彩组合。
1. 从一种基础颜色开始
选择与设计的核心情感或主题产生共鸣的基础颜色。假设我们从hsl(200,50%,50%)开始,对应一种适度饱和的蓝色。
2. 理解HSL组成部分(色相、饱和度、亮度)
色相(H):表示色环上0到360的颜色类型(如红、绿、蓝)。每60的增量可以表示基本颜色过渡(如红到黄,黄到绿)。
饱和度(S): 决定颜色的活力。0%完全不饱和(灰色),100%完全饱和。
亮度(L): 决定颜色的明暗。0%为黑色,50%不明不暗(真实色),100%为白色。
3. 通过不同的色相创建变化
通过调整色相,可以将多种颜色引入色彩组合:
a) 互补色:
这是与您的基础色相在色轮上相对的颜色。对于我们的蓝色基础色hsl(200,50%,50%),尝试20左右的色相值,对应橙色的互补色调:hsl(20,50%,50%)。
b) 相近色:
这些颜色在色轮上与您的基础色相相邻。对于蓝色,考虑青色(hsl(170,50%,50%))或紫色(hsl(230,50%,50%))的色调。
4. 改变饱和度和亮度
对每个色相,您可以通过改变饱和度和亮度来创建深度和变化:
a) 更亮变化:
增加亮度。例如:hsl(200,50%,60%)。
b) 更暗变化:
减少亮度。试试:hsl(200,50%,40%)。
c) 品味变化:
减少饱和度。像:hsl(200,30%,50%)。
d) 更鲜艳变化:
增加饱和度。例如:hsl(200,70%,50%)。
使色彩组合和谐的主要原则是在您的调色板中的所有颜色保持一个值不变。
让我们看看示例。
一致的色相
通过保持色相一致但改变饱和度和亮度,您可以创建单色调色板。这种方案传达出连贯平衡的视觉效果,非常适合极简主义设计,或者当您想强烈传达特定情感或氛围时。
示例:
基础色:hsl(200,50%,50%)
变体1:hsl(200,70%,60%)
变体2:hsl(200,30%,40%)
一致的饱和度
保持饱和度不变但修改色相和亮度,您可以生成一个调色板,其中每个颜色都具有相同的活力水平。这在调色板中创造了统一的强度,非常适合当您需要多个颜色突出而不会彼此压倒性的时候。
示例：
基础色:hsl(200,50%,50%)
变体1:hsl(100,50%,60%)
变体2:hsl(300,50%,40%)
一致的亮度
通过保持亮度不变但改变色相和饱和度,调色板中的所有颜色将具有相同的亮度。这可以确保整体视觉重量保持平衡,特别适用于对保持均衡的光照分布至关重要的设计。
示例:
基础色:hsl(200,50%,50%)
变体1:hsl(100,60%,50%)
变体2:hsl(300,40%,50%)
实践应用:60-30-10原则
60-30-10原则是几十年来经典的设计原则,在室内设计、时尚,以及近年来的网页和应用设计中尤为常用。
它是如何工作的:
60%主色: 这是您的主导色调,设置整体氛围和情绪。在网页中,这将是背景色或者大多数UI元素的主要填充色。
30%次色: 此颜色的使用量是主色的一半。其目的是制造对比。它与主色调互补但不会占主导地位。在网页设计中,这可能表现为次要按钮、副标题或次要背景。
10%强调色: 这是设计的“点睛”色彩。它吸引眼球和吸引注意力。非常适合用于呼吁行动的按钮、高亮或任何其他您希望突出的元素。这是直观地引导注意力或强调重要组成部分的方式。
通过这种方式分割颜色,可以确保整体外观不会让人不知所措。每种颜色都有自己的空间和作用,共同构成统一且连贯的设计。
这个规则只是一个指导原则。根据上下文,您可以略微调整百分比。关键是维持层次结构,确保一种颜色占主导地位,另一种起支持作用,最后一种起强调作用。
可访问性检查
确保您的色彩组合是可访问的,尤其是文本和背景的配对。有很多插件可以帮助检查对比度水平。以下是一些推荐示例。
Figma的插件:
Contrast: 此插件允许您快速检查两层之间的对比度。它可以确保您的设计是可访问的,并符合WCAG标准。
Able — Figma Plugin: 这是一个可访问性检查器,也提供色彩对比检查器作为其功能之一。
Sketch的插件:
Stark: 这可能是最流行的。它同时适用于Sketch和Figma。
Color Contrast Analyser: 此插件检查文本和背景层的对比度,并根据WCAG进行评估。
精选文章：