色彩命名
输入 HEX/RGB/HSL 自动匹配颜色名称与相似度,支持格式转换、颜色分布与调色板生成,适用于设计与前端开发
选择颜色
颜色名称
蜡笔蓝
CrayonBlue
匹配度:92%
其他可能名称
皇家蓝 (RoyalBlue)宝蓝 (DodgerBlue)湖泊 (Lake)幻灯片蓝 (SlideshowBlue)矢车菊 (CornflowerBlue)
颜色格式
HEX
#3B82F6
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 1)
HSB/HSV
217°, 76%, 96%
CMYK
76%, 47%, 0%, 4%
颜色分布
红色23%
绿色51%
蓝色96%
明度 (L)60%
饱和度 (S)91%
调色板
色彩命名使用说明
什么是色彩命名?
色彩命名是将数字化的颜色值(如 HEX、RGB、HSL)转换为人可读的自然语言名称的过程。
该工具可帮助设计师与开发者快速为颜色命名,提升配色、组件库与设计稿沟通效率。
提示:本工具使用基于颜色空间的算法来匹配最接近的颜色名称。不同的颜色空间与权重会影响匹配结果。
颜色空间介绍
- RGB - 红、绿、蓝三原色,通过三者叠加产生各种颜色
- HSL - 色相(H)、饱和度(S)、明度(L),更符合人眼感知
- HSB/HSV - 色相、饱和度、明度(B),与 HSL 类似
- CMYK - 青、品红、黄、黑,用于印刷行业
- Lab - 亮度(L)与两个色度分量,更接近人眼感知
支持的颜色格式
- HEX - 如 #FF0000、#F00
- RGB/RGBA - 如 rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)
- HSL/HSLA - 如 hsl(0, 100%, 50%)、hsla(0, 100%, 50%, 0.5)
- 颜色名称 - 如 red、coral、skyblue
如何使用本工具
- 选择颜色:使用颜色选择器、输入颜色值或选择预设颜色。
- 获取名称:工具会自动匹配最接近的颜色名称并给出匹配度。
- 查看格式:查看颜色的多种格式输出(HEX、RGB、HSL、CMYK 等)。
- 生成调色板:生成互补色、类似色、三色组或分裂互补等方案。
- 复制使用:点击复制按钮获取所需格式或颜色名称。
调色板类型说明
| 类型 | 说明 | 使用场景 |
|---|---|---|
| 互补色 | 色相环上 180° 相对的两种颜色 | 强调对比、突出重点 |
| 类似色 | 色相环上相邻 30° 的颜色 | 和谐、柔和的配色 |
| 三色组 | 色相环上 120° 均匀分布的三种颜色 | 丰富、活力的配色 |
| 分裂互补 | 互补色两侧的颜色 | 既有对比又不过于强烈 |
常见颜色名称参考
| 颜色 | 中文名 | 英文名 | HEX |
|---|---|---|---|
| 红色 | Red | #FF0000 | |
| 橙色 | Orange | #FFA500 | |
| 黄色 | Yellow | #FFFF00 | |
| 绿色 | Green | #00FF00 | |
| 蓝色 | Blue | #0000FF | |
| 紫色 | Purple | #800080 | |
| 品红 | Magenta | #FF00FF |
常见问题 (FAQ)
为什么有些颜色没有精确匹配?
本工具使用预设颜色名称进行匹配。对于没有精确匹配的颜色,算法会寻找最接近的名称并给出匹配度。您可以微调输入颜色以获得更合适的结果。
匹配度是如何计算的?
匹配度基于颜色在 RGB 空间的距离,并结合色相、饱和度、明度的权重综合计算。匹配度越高,说明与预设颜色越接近。
HSB 和 HSV 有什么区别?
HSB(Hue, Saturation, Brightness)与 HSV(Hue, Saturation, Value)通常指同一模型的不同命名,实际含义等价。
为什么同一颜色在不同工具中显示名称不同?
不同工具采用的颜色数据库与匹配算法不同,有的仅做 RGB 匹配,有的使用 Lab 等更复杂模型,因此结果可能存在差异。