跳到主要内容

色彩层级的系统架构

在设计中需要调整色板时,尽量避免使用 CSS 预处理器函数如 "lighten" 或 "darken" 来随意生成新色调。这种即兴的做法往往会导致色彩的泛滥,产生一系列相似的蓝色,而缺乏显著的视觉差异。

相反,建议建立一个经过系统设计的色调渐变光谱,作为整个设计过程中的参考框架。

img

那么,如何构建这样一个复杂的色彩系统呢?

建立色彩核心

首先,为每个色彩尺度确定一个基础色调——这是一个中心点,从中可以衍生出更浅的色调和更深的阴影。

虽然选择过程不是完全量化的,但一个实用的方法是选择一个适合作为交互元素背景(如显著的行动按钮)的色调作为主色和强调色。

img

需要注意的是,这个过程不适合公式化的规定,比如“从 50% 的亮度开始”,因为每个色彩家族都有独特的视觉特性,需要通过视觉评估而非数学计算来校准。

确定终端边界

接下来,确定色彩光谱的极端边界——你选择的色调的最深和最浅表现形式。虽然这种确定同样不适合纯粹的算法方法,但对上下文应用的意识为这些选择提供了有价值的指导。

最饱和、最深的版本通常用于排版,而最浅的版本则常作为组件背景的微妙环境色调。信息警报组件就是同时部署这些色彩极端的一个例子,使其成为校准这些边界值的理想参考点。

img

从一个保持你核心色调基本色相的颜色开始,然后系统地调整饱和度和亮度参数,直到为每个终端值实现最佳的感知平衡。

插值色彩连续体

Loading...
Want to keep learning more?