在设计中需要调整色板时，尽量避免使用 CSS 预处理器函数如 "lighten" 或 "darken" 来随意生成新色调。这种即兴的做法往往会导致色彩的泛滥，产生一系列相似的蓝色，而缺乏显著的视觉差异。
相反，建议建立一个经过系统设计的色调渐变光谱，作为整个设计过程中的参考框架。
那么，如何构建这样一个复杂的色彩系统呢？
建立色彩核心
首先，为每个色彩尺度确定一个基础色调——这是一个中心点，从中可以衍生出更浅的色调和更深的阴影。
虽然选择过程不是完全量化的，但一个实用的方法是选择一个适合作为交互元素背景（如显著的行动按钮）的色调作为主色和强调色。
需要注意的是，这个过程不适合公式化的规定，比如“从 50% 的亮度开始”，因为每个色彩家族都有独特的视觉特性，需要通过视觉评估而非数学计算来校准。
确定终端边界
接下来，确定色彩光谱的极端边界——你选择的色调的最深和最浅表现形式。虽然这种确定同样不适合纯粹的算法方法，但对上下文应用的意识为这些选择提供了有价值的指导。
最饱和、最深的版本通常用于排版，而最浅的版本则常作为组件背景的微妙环境色调。信息警报组件就是同时部署这些色彩极端的一个例子，使其成为校准这些边界值的理想参考点。
从一个保持你核心色调基本色相的颜色开始，然后系统地调整饱和度和亮度参数，直到为每个终端值实现最佳的感知平衡。
插值色彩连续体
在建立了色彩尺度的基础核心和终端边界后，接下来的阶段是系统地填充中间光谱，精确校准渐变。
对于现代数字产品，每个色彩家族至少需要五个不同的色调值，不过一个接近十个渐变的更全面的色板通常提供必要的灵活性，而不会限制创意。
一个九点刻度代表了一个最佳平衡，提供了足够的细粒度，同时保持了一个数学上优雅的结构，便于系统插值。在这个框架中，将你的最深值指定为 900，核心为 500，最浅值为 100。
通过建立 700 和 300 的值来启动插值过程——这是你已建立的参考点之间的感知中点。这些中间值应表现为和谐的过渡，体现其相邻色彩锚点之间的精确平衡。
这种递归二分法在你的刻度中创建了四个额外的间隔（800, 600, 400 和 200），可以通过相同的方法应用来填充，保持整个光谱的感知一致性。
构建无色光谱
对于中性色调，虽然中心参考点的重要性降低，但方法框架保持一致。首先建立终端边界，然后通过递归二分法系统地填充中间光谱。
通过选择一个适合界面中最关键排版元素的色调来确定你最深的中性值，并通过识别一个与纯白色提供微妙差异的值来建立你最浅的中性值，同时保持足够的微妙性以用于广泛的背景应用。
感知的必要性
尽管数学精确性具有吸引力，但创建一个最佳色彩系统最终超越了纯粹的算法方法。
虽然所述的系统方法提供了一个坚实的基础，但它必须通过基于上下文应用和视觉评估的感知精炼来补充。
在实际界面组件中实施你的色彩系统时，你将不可避免地发现细微调整的机会——可能是为特定色调调整饱和度值，或为最佳对比度重新校准亮度参数。在这些时刻，优先考虑感知和谐而非数值一致性。
然而，通过抵制引入临时补充的诱惑，保持对你的色彩系统的严格管理。没有对定义色板的严格遵守，你的色彩架构的系统性优势将消解为它本应防止的混乱。
会员专享
余下内容仅对会员开放。
会员可读完整内容 —— 每一个公开发布的观点背后，那些框架、决策与推理的全貌。
- —完整文章，包含未公开存档的部分
- —可落地的工作框架，附带权衡与决策依据
- —新文章抢先看，先于公开发布
随时取消 · 一次订阅，畅读全部
