色彩命名工具核心JS实现

色彩命名工具核心JS实现

色彩命名工具的功能很直观：输入一个颜色值，就能得到颜色名称、相近色列表，以及常用色彩格式与配色方案。它接受 HEX、RGB、HSL 或中文/英文色名作为输入，输出统一可靠。

在线工具网址：see-tool.com/color-namin…
工具截图：

下面按“实际运行流程”把核心 JavaScript 逻辑拆开讲，尽量用更直白的方式说明每一步做什么。

示例

• 输入 #FFD700 -> 主命名：金色（Gold），HEX：#FFD700，RGB：rgb(255, 215, 0)
• 输入 rgb(255, 0, 0) -> 主命名：红色（Red），HEX：#FF0000
• 输入 hsl(60, 100%, 50%) -> 主命名：黄色（Yellow），HEX：#FFFF00
• 输入 珊瑚红 -> 主命名：珊瑚红（Coral），HEX：#FF7F50
• 输入 #000000 -> 主命名：黑色（Black），HEX：#000000

1）入口输入如何被统一

工具允许多种输入形式，但最终都会被规范成同一结构：RGBA。

• HEX：支持 3 位与 6 位，转换为 RGB
• RGB/RGBA：直接读取数值，透明度缺省就当作 1
• HSL/HSLA：先转为 RGB，再补上透明度
• 颜色名称：在内置颜色表里找对应 HEX，再转为 RGB

只要解析失败，就会提示“无效颜色”，不会进入后续流程。

2）基础约束保证结果稳定

所有输入数值都会被“夹在合理范围内”，避免出现异常结果：

• R/G/B 必须是 0 到 255
• 透明度必须是 0 到 1

这个小步骤能防止超出范围的输入把后续计算带偏。

3）颜色格式的互转为什么必须做

界面需要多种输出：HEX、RGB、HSL、HSB、CMYK。为了让这些格式始终保持一致，工具把 RGB 作为中间基准，再进行格式转换。这样做的好处是“一个输入值，所有格式都来自同一个计算源”。

4）颜色命名的匹配规则

命名并不是简单“看最接近的 HEX”，而是分几层打分：

• 先看 RGB 距离，作为最直接的颜色差异
• 再看色相差异，避免 0° 与 360° 被当成完全不同
• 如果两者饱和度都较高，再增加色相与饱和度的影响
• 在明度处于可感知范围时，也会加入明度差异

得分最低的颜色就是主命名。这个得分会被换算成 0-100 的置信度，用来提示“匹配有多接近”。

5）相近颜色列表怎么产生

除了主命名，工具还会计算其它颜色与目标色的距离，然后从近到远排序，取前几名作为“相似色推荐”。这样用户能看到更丰富的命名选择。

6）调色板是怎么生成的

配色方案全部基于 HSL 的色相变化，因为 HSL 更符合“以色相为核心做配色”的直觉：

• 随机色板：直接随机生成多个颜色
• 互补色：色相加 180°，再补上明暗变化
• 类似色：围绕主色左右扩展色相
• 三色组：主色加 120° 与 240°，并扩展明暗
• 分裂互补：主色两侧各偏移一定角度，再补明暗

最终统一输出为 HEX 数组，方便展示与复制。

7）交互动作如何串起来

核心动作只有三类，但覆盖了所有交互：

• 应用颜色：任何输入改变后，统一解析并写回主色
• 生成配色：根据当前主色与选项重新计算色板
• 复制结果：把名称与格式值合并成文本，一键复制

这样工具在逻辑上形成闭环：输入 -> 规范化 -> 命名/格式/配色 -> 输出。