颜色调色板生成从单个十六进制颜色生成完整调色板

发布日期 2026年5月12日

学习如何从单个品牌十六进制颜色值出发，使用HSL色彩理论和JavaScript构建一个完整、语义化且支持深色模式的颜色搭配方案。

你有一个品牌六色码。它可能来自标志、设计指南，或者只是你喜欢的一种颜色。现在你需要一个完整的配色方案——提亮色、暗色、互补色、语义令牌，以及深色模式变体。本指南将详细介绍如何程序化且正确地构建这些配色。

真正重要的色彩理论

你在设计学校学到的大多数色彩理论并不能直接应用于UI工作。以下这些才是有效的：

和谐类型	如何生成	最适合	例子
互补色	旋转色调180°	高对比度的强调色、CTA按钮	蓝色主色 + 橙色强调色
类似色	色调±30°旋转	背景色、微妙的渐变	蓝色 + 青色 + 紫蓝色
三元色	三个色调间隔120°	色彩丰富的仪表盘、数据可视化	红色 + 黄色 + 蓝色
分裂互补色	180° ± 30°	比互补色更柔和的对比度	蓝色 + 黄橙色 + 红橙色

对于大多数UI库，你会使用品牌色作为主色，一个相邻色调作为次色，以及一个互补或分裂互补色调作为强调色和交互状态。

为什么HSL优于Hex用于配色工作

Hex和RGB将颜色编码为硬件通道——而不是人类感知的颜色。HSL（色调、饱和度、亮度）映射到人类感知：

色调 ——颜色本身（0–360°，其中0=红色，120=绿色，240=蓝色）
饱和度 ——鲜艳程度与灰度（0%=灰度，100%=全彩色）
亮度 ——明暗程度（0%=黑色，100%=白色）

这很重要，因为要生成品牌色的提亮色，你不是将其与白色混合，而是增加HSL中的亮度。色调保持完全不变。当你用数学方法混合Hex值时，这一点无法保证。

正确生成提亮色和暗色的方法

错误的方法很常见：对Hex值进行插值，向 #ffffff 提亮方向，向 #000000 暗色方向。这会引入色调漂移和去饱和度伪影——你的“浅蓝色”会变成一种泛灰的灰蓝色。

正确的方法：将Hex解析为HSL，然后只改变亮度：

/**
 * Generate a 10-step shade scale from a base HSL color.
 * Returns shades from 50 (lightest) to 950 (darkest), like Tailwind.
 * @param {number} h - Hue (0–360)
 * @param {number} s - Saturation (0–100)
 * @param {number} l - Base lightness (0–100)
 * @returns {Object} - Scale object: { 50, 100, 200, ..., 900, 950 }
 */
function generateShadeScale(h, s, l) {
  // Lightness stops mapped to Tailwind-style scale keys
  const stops = [
    [50,  95],
    [100, 90],
    [200, 80],
    [300, 70],
    [400, 60],
    [500, l],   // 500 = your base color
    [600, 40],
    [700, 30],
    [800, 20],
    [900, 12],
    [950, 7],
  ];

  const scale = {};
  for (const [key, lightness] of stops) {
    scale[key] = `hsl(${h}, ${s}%, ${lightness}%)`;
  }
  return scale;
}

// Example: brand color #3b82f6 (Tailwind blue-500)
// HSL ≈ hsl(217, 91%, 60%)
const palette = generateShadeScale(217, 91, 60);
// palette[50]  → "hsl(217, 91%, 95%)" — near-white blue tint
// palette[500] → "hsl(217, 91%, 60%)" — brand color
// palette[900] → "hsl(217, 91%, 12%)" — near-black blue shade

关键洞察是：在整个调色范围内，色调和饱和度保持不变。只有亮度发生变化。这会产生视觉上连贯的调色板，每种重量都读作同一色系。

需要从Hex生成吗？使用免费的 Color Palette Extractor 从任何颜色中即时提取HSL值。

50–950 设计系统调色板

Tailwind推广了11个等级的调色板（50、100–900、950）。它现在已成为设计系统中的事实标准，因为它能与实际使用场景完美匹配：

50–100： 页面背景、浅色表面的悬停状态
200–300： 边框、细微分隔线、禁用状态
400–500： 交互元素——按钮、链接、聚焦环
600–700： 交互元素的悬停/激活状态
800–900： 浅色背景上的文本
950: 接近黑色的高对比度标题

当你为品牌色生成此调色板时，你将自动获得所有组件状态所需的色调——无需为每个组件单独做颜色决策。

从品牌六色码到完整可用的配色方案

当你拥有一个单一品牌六色码时，以下是实际的工作流程：

解析为HSL。 转变 #1d4ed8 → hsl(221, 74%, 48%)
生成主调色板。 运行上述的暗色函数，生成完整的11个等级调色板。
推导次色。 色调±30°旋转，获得相邻次色： hsl(251, 74%, 48%) (紫蓝色)。
推导强调色。 色调旋转180°，获得互补色： hsl(41, 74%, 48%) (琥珀色)。
为这三种颜色生成调色板。 相同的暗色函数，不同的色调输入。

你可以提前用配色方案生成器预览完整结果——包括调和类型——再编写一行代码。

语义色彩令牌

原始调色板值是用于配色基本单元的。语义令牌是组件实际使用的：

const tokens = {
  // Map scale values to semantic names
  'color-primary':         palette[500],  // brand color
  'color-primary-hover':   palette[600],
  'color-primary-subtle':  palette[50],
  'color-text':            palette[900],
  'color-text-muted':      palette[600],
  'color-border':          palette[200],
  'color-bg':              palette[50],

  // Status colors — separate scales per semantic group
  'color-success':         'hsl(142, 71%, 45%)',
  'color-warning':         'hsl(38, 92%, 50%)',
  'color-danger':          'hsl(0, 84%, 60%)',
};

这种分离使得深色模式变得可行。你的组件引用 color-textXML没有数字类型——所有内容都是文本。你的价格字段将是 palette[900]。在深色模式下，你只需重新映射令牌——而不是每个组件。

深色模式：调色板的反转

一个精心构建的HSL调色板几乎可以自动反转。规则是：交换调色板的亮端和暗端，然后略微调整中间值以达到感知平衡。

// Light mode
const lightTokens = {
  'color-bg':    palette[50],   // near-white background
  'color-text':  palette[900],  // near-black text
  'color-border': palette[200],
};

// Dark mode — same scale, inverted stops
const darkTokens = {
  'color-bg':    palette[950],  // near-black background
  'color-text':  palette[50],   // near-white text
  'color-border': palette[800],
};

由于色调和饱和度在整个调色板中保持不变，你的品牌身份在反转后得以保留。在亮色模式下以蓝色为主色，进入暗色模式后仍读作相同的蓝色——只是在暗背景下更明亮。这也是从一开始就使用HSL构建调色板的附加优势。