Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
色彩命名工具 - 在线颜色语义化命名
为颜色值生成语义化名称，提升代码可读性。基于HSL色相分析和预定义颜色映射，快速生成专业的颜色变量命名。
颜色信息
HEX:#3B82F6
RGB:59, 130, 246
HSL:217°, 0%, 0%
色相分析
色相: 217°
饱和度: 0%
亮度: 0%
色彩倾向: 蓝色系 (Blue)
建议名称
CSS变量命名建议
--color-primary: #3B82F6;
--color-primary-hover: #559CFF;
--color-primary-active: #2269DD;# 什么是色彩命名？
色彩命名是为颜色值赋予语义化名称的过程，目的是提升代码的可读性和可维护性。 直接使用#3B82F6这样的十六进制值很难理解其用途，而使用--color-primary这样的命名则清晰地表达了颜色的用途。 良好的颜色命名约定是设计系统和代码规范的重要组成部分。
# 命名原则
- 语义化优先: 根据颜色用途而非外观命名，如primary、success、warning
- 避免颜色名: 尽量不用red、blue等颜色名，改用功能性名称
- 使用小写: CSS变量和命名通常使用小写字母和连字符
- 保持一致性: 在整个项目中使用相同的命名约定
- 添加变体: 使用hover、active、disabled等后缀表示状态
# 常用命名规范
功能命名
- primary - 主色调
- secondary - 次色调
- accent - 强调色
- success - 成功状态
- warning - 警告状态
- error - 错误状态
- info - 信息提示
中性色命名
- background - 背景色
- surface - 表面色
- border - 边框色
- text - 文字色
- muted - 柔和色
- subtle - 微妙色
- disabled - 禁用状态
# 如何使用本工具
- 使用颜色选择器或输入十六进制值选择您的颜色
- 查看颜色信息和色相分析结果
- 从建议名称列表中选择合适的语义化名称
- 点击名称可复制到剪贴板
- 使用生成的CSS变量代码快速应用到项目中
# 常见问题 (FAQ)
为什么建议使用语义化命名而不是颜色名？
语义化命名关注颜色的用途而非外观，这使得在需要更换主题或品牌色时更加灵活。 例如，如果将按钮从蓝色改为红色，使用--color-button这样的命名就不需要修改代码， 而使用--color-blue则需要重命名所有相关变量。
工具建议的名称适合所有场景吗？
本工具提供的命名建议基于常见的设计系统和最佳实践，但可能不适合所有项目。 您应该根据项目的具体情况和团队规范来选择最终的命名。 建议结合项目的设计系统文档和代码规范来确定最合适的命名方式。
如何处理颜色的不同变体？
对于同一颜色的不同变体，建议使用后缀来区分。常见的后缀包括： hover（悬停）、active（激活）、disabled（禁用）、focus（聚焦）、 light（浅色）、dark（深色）、subtle（微妙）、strong（强烈）等。 例如：--color-primary-hover、--color-text-muted。