配色实验室

给它一个颜色，它会在 OKLCH 空间里保持色相、重映射明暗，推导出一整套网页配色所需的 6 枚种子色，并逐层展开：色值、样张、可用文本、对比度检查，以及可以直接复制的代码。

1 · 输入一个颜色

色值

预设色（来自现有配色）

输入色只作为色相与彩度的来源；底色、前景这类极值由明度重映射得到，因此任意中间调颜色都能变成一套完整配色。

2 · 六枚种子色

点任意一枚即可复制其 hex

3 · 样张与可用文本

下方每一处都用推导出的颜色实时渲染

标题示例

正文段落：这是站点最常见的文字样式，使用前景色 --seed-fg，落在底色 --seed-bg 上。

次要文字：由前景与底色混合派生，用于说明、时间戳与占位提示。

链接示例 →

按钮状态

主按钮次按钮禁用态

输入框与标签

选中的分类未选中的分类

表面与阴影

抬升表面 bg-elev

试穿只对当前页面生效，刷新就会还原，不会改掉你已经保存在浏览器里的配色。

4 · 对比度体检

正文 / 底色（≥ 7:1）16.07达标
强调色 / 底色（≥ 3:1）4.82达标
主色文字 / 强调色（≥ 4.5:1）5.35达标
链接色 / 底色（≥ 4.5:1）13.80达标

阈值取自 WCAG：正文 ≥ 7:1、强调色与底色 ≥ 3:1、主色上的文字与链接色 ≥ 4.5:1。链接色由强调色统一压暗派生（色相不变），所以像创意组这类中明度底色也不会看不清；不达标不会自动改色——由你决定是换一个输入色，还是像「多巴胺糖果」那样接受更跳的选择。

5 · 生成逻辑

链路

1 个输入色

在 OKLCH 里锁定色相 H，只重排明度 L 与彩度 C：抬亮得底色、压暗得前景、夹彩度得强调色。

页面底色正文前景强调主色主色上的文字抬升表面次强调 / 光晕

6 枚种子写进 --seed-*；派生层用 color-mix(in oklab, …) 统一算出--c-* 语义令牌（底色 / 前景 / 柔和文字 / 描边 / 强调 / 阴影 / 光晕…）。

15 个 --c-* 令牌组件与页面

6 · 拿走成果

复制片段落到代码里即可长期生效

global.css 片段

/* 由输入色 #b4492b 推导 */
[data-scheme="my-scheme"] {
    --seed-bg: #fcf1ed;
    --seed-fg: #231410;
    --seed-accent: #b4492b;
    --seed-accent-fg: #ffffff;
    --seed-elev: #fffbf9;
    --seed-accent-2: #9a6200;
}

schemes.ts 片段

  {
    id: 'my-scheme',
    name: '我的配色',
    category: 'trend',
    isDark: false,
    description: '由输入色 #b4492b 推导。',
    swatch: { bg: '#fcf1ed', fg: '#231410', accent: '#b4492b' },
  },

六枚种子（纯文本 hex）

bg         #fcf1ed
fg         #231410
accent     #b4492b
accent-fg  #ffffff
elev       #fffbf9
accent-2   #9a6200

出处 · 配色灵感

Gradients · Palette

灵感来自 gradients.app：它从照片里取色，我改成从一枚颜色出发，推导出整套配色。

https://gradients.app/zh/palette