无需登录 数据私有 本地保存

颜色名称查找工具 - HEX与命名颜色互转

前端设计 参考工具 CSS 查找 颜色名
77
0
0
0
以下是「颜色名称查找工具」的详细使用教程，帮助您快速上手并充分利用所有功能。第一步，打开工具页面：在浏览器中访问本工具页面，您将看到页面中央的输入区域，默认显示一个颜色输入框和一个实时颜色预览区域。如果您是首次使用，建议先浏览页面顶部的功能说明，了解工具支持的全部输入格式。第二步，输入颜色值：在输入框中键入您想要查询的颜色值，支持的格式包括：「HEX十六进制」格式如 #2E86C1 或简写 #2EC、「RGB」格式如 rgb(46, 134, 193)、「HSL」格式如 hsl(204, 72%, 47%)。输入过程中，颜色预览区域会实时更新，让您直观确认当前输入颜色的实际效果。工具还具备智能纠错功能，即使格式有轻微偏差也能自动识别。第三步，执行颜色匹配：输入完成后，点击「查找」按钮或等待自动匹配（支持实时匹配模式），工具将立即在下方结果区域展示最接近的CSS命名颜色。结果以卡片形式呈现，包含颜色名称、完整色值、与输入颜色的相似度百分比以及视觉色块对比。第四步，查看颜色详情：点击任意匹配结果卡片，可展开详细信息面板，查看该命名颜色的全部色值数据，包括与您输入颜色的精确色差值（Delta E数值）以及推荐的使用场景和搭配建议。第五步，复制色值到剪贴板：找到目标颜色后，点击对应格式（HEX、RGB、HSL）旁边的复制图标，即可一键将色值复制到系统剪贴板，然后在您的CSS代码或设计工具中直接粘贴使用。第六步，浏览完整颜色库：切换到「颜色浏览」标签页，您可以看到按色系分类排列的全部148个CSS命名颜色。通过顶部的色系筛选器或首字母索引，可以快速定位到您感兴趣的颜色区域。第七步，执行反向查询：如果您已知颜色名称但不确定色值，可以直接在搜索框中输入颜色名称如「tomato」，工具将快速定位该颜色并展示其对应的HEX、RGB、HSL等全部色值信息。第八步，查阅历史记录：在页面侧边栏的「查询历史」区域，可以查看您最近查找过的所有颜色记录，方便对比和回溯。建议您将本工具页面加入浏览器书签，以便在日常开发和设计工作中随时快速查阅。
🔧 相关工具