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

颜色变量命名工具 - 语义化名称建议

11
0
0
0
✓ 已复制到剪贴板
选择颜色
Preview Text
HEX
RGB: 59, 130, 246 HSL: 217°, 91%, 60%
预设颜色
语义化命名建议
前缀
正在分析颜色...
常见问题与色彩知识

语义化颜色变量命名是指使用有意义的名称来描述颜色的用途或视觉特征，而非直接使用颜色值。例如用--color-primary-blue代替--color-#3B82F6。这样做的好处是：代码更易读、主题切换更方便、团队协作更高效。当设计调整时，只需修改变量值，而无需改动所有引用位置。

推荐采用三层结构：
① 基础层（Primitive）：原始色值，如 blue-500: #3B82F6；
② 语义层（Semantic）：功能角色，如 color-primary: blue-500；
③ 组件层（Component）：具体应用，如 button-primary-bg: color-primary。这种分层方式使得全局换肤只需调整映射关系，是业界最佳实践。

推荐做法：
• 使用kebab-case命名（如--color-primary-blue）
• 采用类别-名称-变体的结构
• 避免使用实际色值作为名称
• 保持命名简洁但具有描述性
• 在项目中统一命名规范
• 利用CSS自定义属性的继承特性来管理主题变体。

灰度色建议使用亮度级别来命名：
• white / off-white（L > 95%）
• light-gray（L 70-90%）
• gray / silver（L 40-70%）
• dark-gray / charcoal（L 15-40%）
• near-black / black（L < 15%）
也可以使用数值后缀如gray-100到gray-900，这种方式在Tailwind CSS中广泛使用。

功能性颜色选择通常遵循用户心理模型：
• Primary（主色）：品牌蓝色系，传递信任和专业
• Success（成功）：绿色系，表示正向反馈
• Warning（警告）：橙黄色系，引起注意但不紧急
• Danger（危险）：红色系，表示错误或破坏性操作
• Info（信息）：青色系，中性提示信息。选择时需考虑可访问性对比度（WCAG AA要求4.5:1）。
🔧 相关工具