温柔风配色检索与五色构建器
R · 原文依据
原文是一份《温柔风配色手册》,共 157 组、每组固定 5 个色(1 主色 + 2 辅助 + 2 点缀),按"粉/杏橙/黄/绿/蓝/紫/咖啡/中性"八系及风格、季节、场景分类,并给出唯一显式方法"60/30/10 法则"。数据随技能:palettes.json。
I · 方法论骨架(自己的话)
手册表面是 157 张色卡,底层是一条可复用的隐性配方:
> 浅奶底 + 同色相明度递进(两辅助)+ 一枚同色系重色压住 + 一枚对比色透气(两点缀),再按 60/30/10 分配面积。
靠这条配方,既能检索现成组,也能对手册没收录的新主题推断五角色色组。色名只是画面感,落地一律以 HEX 为准。
五色角色:
- 主色(≈60%):面积最大、明度最高的浅基底。
- 辅助(≈30%):与主色同色相、逐级加深的两色。
- 点缀(≈10%):一枚重色压重心 + 一枚对比色破单调。
A1 · 手册中的真实组(主/辅/辅/点缀/点缀)
- 樱花粉:#FBE9EC / #F7D4DC / #EFA9B8 / #D48A9B / #8C5A68。
- 鼠尾草绿:#DCE2D2 / #B8C4A8 / #8C9E7A / #5E6E4E / #F4F1EA(重色 + 奶白透气)。
- 婴儿蓝:#E0EDF5 / #B8D4E8 / #86B0D4 / #5E86B0 / #F8F7F2(冷底 + 暖白)。
- 奶咖色:#F0E6D8 / #D4B89E / #B08E6E / #7E5E48 / #F8F2EA。
- 婚礼温柔:#FDF8F4 / #F0C8CC / #D4A8AC / #B8C4B0(叶绿)/ #C8A878(金)。
A2 · 未来触发(何时用本技能)
- "帮我配一组温柔/奶系/治愈/少女感的颜色",或指定主题("薰衣草秋日婚礼""燕麦拿铁 UI")。
- 从色相/风格(莫兰迪、侘寂、韩系 ins、新中式温柔…)/季节/场景四个角度找成套色卡。
- 已有五色想校验"够不够温柔、有没有重心、会不会闷"。
- 给一个已知 HEX,想反查能和它配套的组;或要把温柔色用在正文上、先确认可读性。
与相邻技能区分(定稿): 本技能只产出温柔风五色及其落地配比、对比度与反查结论;对一版完整设计做整体审美评审、逐像素挑错不属于本技能。本书仅蒸馏出这一个技能,故无同书兄弟技能可转。
E · 执行步骤
- 定轴:明确色相系或风格/季节/场景;用
palettes.json(157 组,字段 category/name/colors[].role/hex)就近检索 2~3 组候选。 - 定主色:选面积最大、明度最高的浅奶底作主色(判定主色,避免误把深色铺 60%)。
- 配辅助:取与主色同色相、明度递进的两色,勿跳无关色相。
- 配点缀:一枚同色系重色压重心 + 一枚小面积对比色透气;点缀总占比 ≈10%。
- 校验配方:四项逐条核对——浅底✓ 同色递进✓ 重色✓ 对比✓;缺重色会发飘,缺对比会闷。
- 对比度检查:温柔色用于正文/图标前算 WCAG 对比度(正文建议 ≥4.5:1);不足就加深前景或换底,不要硬用浅色文字。
- 交付:给五角色 HEX + 60/30/10 面积说明,可直接输出 CSS 变量(--color-main/sub-1/sub-2/accent-1/accent-2)。
- 单色反查:给一个 HEX 时,扫描所有组找含它的组,沿用其同组的递进与点缀色。
B · 边界与盲点
- 手册只覆盖温柔风;科技、警示、暗色、高饱和、强对比场景本技能失效,不要硬套。
- 手册只给 HEX(虽有"含 RGB/CMYK"之说,实际未提供);用于印刷须自行转 CMYK 并打样。
- 色名同名不同值("奶白/墨绿/橄榄"对应多个 HEX),永远以 HEX 为准,不按名取色。
- 60/30/10 原文未给"主色判定法",本技能补"主色=面积最大且明度最高的基底色",属蒸馏补全。
- 对比度检查(WCAG)是为补手册盲点加入的,原文未提供 UI 场景规则;这是用色安全线,不是手册原话。
- 语义轴(风格/季节/场景 41 组)是对色相轴色值的重组再命名,同一 HEX 可能出现在多组,检索时以色值去重。