什么是颜色名称查找器?
颜色名称查找器可帮助您识别任何 HEX 或 RGB 颜色值最接近的命名颜色。无论您是希望让代码更易读的设计师,还是想使用语义化颜色名称的开发者,此工具都能从综合数据库中即时匹配出最接近的命名颜色。
为什么使用命名颜色?
在代码中使用命名颜色有以下几个好处:
可读性
可维护性
沟通便利
CSS 兼容性
两个颜色数据库
从两个综合颜色数据库中选择:
147 种标准颜色
所有浏览器都识别的标准网页颜色,包括"Red"、"Blue"、"Coral"和"SkyBlue"等经典颜色
- 浏览器原生支持
- 可直接用于生产环境
- 通用兼容性
1500+ 种描述性名称
包含"Dusty Rose"、"Ocean Blue"、"Champagne"和"Terracotta"等描述性名称的综合数据库
- 创意命名
- 设计文档
- 生动描述
精准颜色匹配
CIEDE2000 是目前最准确的色差公式,考虑了人类颜色感知的非均匀性。它被广泛应用于印刷、制造和数字设计行业。
— 国际照明委员会 (CIE)
如何使用颜色名称查找器
输入您的颜色
您有三种方式输入颜色:
- 输入 HEX - 输入 HEX 代码,如"#FF5733"或"FF5733"
- 输入 RGB - 输入 RGB 值,如"255, 87, 51"或"rgb(255, 87, 51)"
- 使用颜色选择器 - 点击颜色预览框打开可视化颜色选择器
查看匹配结果
工具会即时显示:
- 颜色名称 - 最接近的命名颜色(例如"Tomato")
- 匹配度 - 显示匹配接近程度的百分比(100% = 完全匹配)
- Delta E 值 - 技术色差测量值(0 = 完全相同)
- 颜色值 - 匹配的命名颜色的 HEX 和 RGB 值
探索其他选项
在最佳匹配下方,您会看到 4 种相似颜色。点击任何一种即可查看其详细信息并比较选项。
复制并使用
点击任何值(名称、HEX 或 RGB)旁边的复制按钮,即可将其复制到剪贴板。可直接在 CSS、设计工具或文档中使用。
- 使用扩展数据库获取更具描述性和创意的颜色名称
- 检查匹配度 - 95% 以上的分数表示非常接近的匹配
- 您的最近颜色会自动保存,方便快速访问
功能特性
双重颜色数据库
在 CSS 标准颜色(147 种浏览器支持的名称)和包含 1500 多种描述性颜色名称的扩展数据库之间切换,包括宝石、自然和食物灵感的颜色。
Delta E 2000 颜色匹配
使用 CIEDE2000 算法,这是感知色差的行业标准。这确保匹配反映人类实际看到的颜色,而不仅仅是数学上的 RGB 距离。
匹配度和 Delta E 显示
通过百分比分数和 Delta E 值准确了解您的颜色与命名颜色的接近程度。
- 绿色徽章表示优秀匹配(95%+)
- 黄色表示良好匹配(80-94%)
- 红色表示一般匹配
相似颜色推荐
查看 4 种同样接近您输入的替代颜色名称。点击任何推荐进一步探索,找到最适合您颜色的名称。
多种输入格式
以 HEX 格式(#FF5733 或 FF5733)或 RGB 格式(255, 87, 51 或 rgb(255, 87, 51))输入颜色。工具会自动检测格式。
可视化颜色选择器
点击颜色预览打开可视化颜色选择器。选择任何颜色,即时查看其最接近的命名颜色匹配。
一键复制
一键复制颜色名称、HEX 值或 RGB 值。即时反馈确认您的复制操作。
颜色历史记录
您最近的颜色搜索会自动保存(最多 20 种颜色)。点击历史记录中的任何颜色即可快速再次查找。
您的数据完全私密
所有颜色匹配都在您的浏览器中进行:
- 无上传 - 颜色数据永不离开您的设备
- 无跟踪 - 我们不收集您的颜色搜索
常见问题
什么是 Delta E,为什么它很重要?
Delta E (ΔE) 是测量两种颜色之间感知差异的指标。Delta E 为 0 表示颜色完全相同。值小于 1 对大多数人来说无法察觉,1-2 几乎不可察觉,超过 10 的值表示颜色明显不同。
此工具使用 Delta E 2000 (CIEDE2000),这是人类颜色感知最准确的标准。
CSS 和扩展数据库有什么区别?
CSS 数据库包含 147 种在所有网页浏览器中都可使用的标准命名颜色(如"Red"、"Coral"、"SkyBlue")。扩展数据库包含 1500 多种具有更具描述性名称的颜色,如"Dusty Rose"、"Ocean Blue"、"Champagne"和"Terracotta" - 非常适合设计文档和创意项目。
| 特性 | CSS 颜色 | 扩展颜色 |
|---|---|---|
| 颜色总数 | 147 | 1500+ |
| 浏览器支持 | 原生支持 | 仅供参考 |
| 在 CSS 中使用 | 直接使用 | 使用 HEX/RGB 值 |
| 最适合 | 生产代码 | 设计文档 |
为什么我的颜色没有显示 100% 匹配?
只有当您的颜色与数据库中的命名颜色完全匹配时,才会出现 100% 匹配。大多数自定义颜色会显示较高的百分比(90-99%),表示非常接近的匹配。相似颜色部分可帮助您找到可能更接近的替代方案。
我可以在 CSS 中使用这些颜色名称吗?
可以,CSS 数据库中的所有 147 种颜色都是有效的 CSS 颜色关键字。您可以直接在样式表中使用它们(例如 color: tomato;)。扩展数据库名称仅供参考和文档使用 - 在代码中使用它们的 HEX 或 RGB 值。
/* CSS Named Colors - Direct Use */
.button {
background-color: tomato;
color: white;
border: 2px solid coral;
}
/* Extended Colors - Use HEX/RGB */
.card {
background-color: #F5E6D3; /* Champagne */
color: #2C5F7C; /* Ocean Blue */
}
颜色匹配的准确度如何?
该工具使用 CIEDE2000 算法,这是印刷、制造和设计中使用的颜色匹配行业标准。它考虑了人眼如何感知颜色差异,使其比简单的 RGB 距离计算更准确。
数学方法
- 基本欧几里得距离
- 忽略人类感知
- 结果不够准确
感知方法
- 行业标准算法
- 匹配人类感知
- 高度准确的结果
我的颜色数据会被保存或共享吗?
不会。所有颜色匹配完全在您的浏览器中进行。您的颜色永远不会上传到任何服务器。历史记录使用浏览器存储在本地设备上保存。
- 所有处理都在您的浏览器客户端进行
- 不向外部服务器传输数据
- 历史记录仅存储在本地浏览器存储中
- 不跟踪或分析颜色搜索
- 随时清除历史记录以删除所有数据
为什么有些颜色有不寻常的名称?
扩展数据库包含来自各种来源的创意和描述性名称,包括 X11 颜色、Pantone 灵感名称和描述性术语。这些名称旨在唤起联想且易于记忆,帮助设计师更有效地传达颜色。
还没有评论,快来发表第一条!