Imba 颜色系统完全指南：Tailwind 命名色板与原生 CSS 颜色值的统一书写
Imba 颜色系统完全指南：Tailwind 命名色板与原生 CSS 颜色值的统一书写
Imba 的样式系统将 CSS 颜色数据类型（sRGB 色彩空间）完整接入语法层面：你既可以用与原生 CSS 完全一致的方式书写 #7A4ACF、hsl(...)、rgba(...)，也可以直接使用内置的 Tailwind 风格命名色板（如 blue3、indigo5），并叠加透明度、插值与状态变体。本文以官方文档 colors.md 为主线，结合编译器的色板构建与解析源码，带你彻底掌握 Imba 中颜色的定义、使用与底层原理。
一、颜色在 Imba 样式体系中的定位
CSS 中的 color 数据类型表示 sRGB 色彩空间中的一个颜色。Imba 的样式语法完整继承了这一语义——凡是预期颜色值的位置（bg、color、border-color、box-shadow、outline 等属性），都可以书写颜色表达式。
与普通 CSS 相比，Imba 的差异在于两点：
- 书写位置更集中：颜色写在样式声明块内（如
css .demo bg:#7A4ACF），且支持类型安全的属性提示； - 内置命名色板：Imba 内建了由 Tailwind 团队精心打磨的命名色板，无需任何配置即可直接使用。
官方文档提供了一个可直接运行的交互式演示：colors.imba 示例，展示了 hex、hsl、rgba 与命名色的混用效果。
二、Tailwind 风格命名色板：从 color0 到 color9
Imba 内建了对命名色的支持，这些色板源自 Tailwind CSS 的经典配色方案。每个色系（color family）都包含 10 个不同色阶（shade），依次命名为 color0 到 color9，其中 color0 是最浅色、color9 是最深色：
css .demo-1 bg:blue3 # 蓝色系第 3 档
css .demo-2 bg:indigo5 # 靛蓝色系第 5 档
css .demo-3 bg:gray3 # 灰色系第 3 档
在 imba.io 官方文档页中，<doc-colors> 组件会渲染一张完整的交互式色板，鼠标悬停即可查看每个色块对应的名称（如 sky3、rose5），是查阅色板最直观的方式。
源码中的色板定义
命名色板并非魔法，而是定义在编译器的主题文件中：theme.mjs。export const colors 以「色系 → 10 档十六进制色值」的结构组织：
export const colors = {
rose: {
'0': '#fff1f2',
'1': '#ffe4e6',
// ...
'5': '#f43f5e',
// ...
'9': '#881337'
},
blue: {
'0': '#eff6ff',
'1': '#dbeafe',
// ...
'5': '#3b82f6',
// ...
'9': '#1e3a8a'
},
// ...
};
当前仓库中内建的色系包括：rose、pink、fuchsia、purple、violet、indigo、blue、sky、cyan、teal、emerald、green、lime、yellow、amber、orange、red，以及灰阶系列 warmer、warm、gray、cool、cooler，每个色系均提供 10 档色阶。
除了 Tailwind 风格色板，theme.mjs 还定义了 named_colors——即完整的 CSS 关键字色名（aliceblue、rebeccapurple、whitesmoke 等），保证「与原生 CSS 完全一致」的书写体验。
三、任何期望颜色值的位置都可以使用
命名色不是仅在特定属性可用的「特例」，它们与普通 CSS 颜色完全等价。文档明确指出：命名色可以出现在任何期望颜色值的地方。例如，以下原生写法在 Imba 中照常工作：
css .demo-hex bg:#7A4ACF
css .demo-hsl bg:hsl(120,90%,45%)
css .demo-rgba bg:rgba(120,255,176)
而同样的位置也都可以替换为命名色：
css .demo-1 bg:blue3
css .demo-2 bg:indigo5
从类型层面看，styles.generated.d.ts 中定义了独立的 Ψcolor 类型，color、background-color、border-color、outline-color 等属性的 set(val: Ψcolor) 签名都统一接收该类型——这意味着编辑器可以对颜色值做一致的补全与校验。
四、进阶用法：透明度、插值与状态变体
官方示例 colors.imba 中还展示了几个高频实战技巧：
1. 直接携带透明度
在命名色后追加 / 加百分比即可指定透明度：
css .demo-2 bg:indigo5/80% # 80% 不透明度的 indigo5
2. 与插值表达式结合
颜色值可以是动态的插值表达式，适合与响应式状态联动：
const item = {tint: 'sky3'}
css .demo-interpolation bg:{item.tint} # 动态取色，等价于 bg:sky3
这种能力在测试中也得到了验证：interpolation.imba 中大量使用了 bg:gray3、bg:blue3、bg:teal3 等命名色与动态数值混写的样式。
3. hover 等状态变体
命名色可以配合 Imba 的样式修饰符，实现状态切换：
css .demo-1 bg:blue3 @hover:blue5 # 悬停时由 blue3 变为 blue5
五、底层原理：色板构建与颜色解析
理解命名色的解析过程，有助于你在调试自定义主题时快速定位问题。相关逻辑集中在 styler.mjs 中。
1. 默认色板
defaultPalette 定义了 5 个内置基础色（styler.mjs）：
let defaultPalette = {
current: {string: "currentColor", c: function() { return 'currentColor'; }},
transparent: new Color('transparent', 0, 0, 100, '0%'),
clear: new Color('transparent', 100, 100, 100, '0%'),
black: new Color('black', 0, 0, 0, '100%'),
white: new Color('white', 0, 0, 100, '100%')
};
2. 色板的批量构建
parseColors(palette, colors)（styler.mjs）遍历 colors 主题对象：若某个色系的值为字符串，则视为别名（alias）直接引用；否则按 name + subname 组合出 blue0～blue9 这类完整色名，并用 parseColorString 将 hex 解析为 HSL 分量后注册进 palette。
3. 色名的解析与插值混合
$color(name)（styler.mjs）是解析入口，核心逻辑如下：
- 用正则
^([A-Za-z\-]+)(\d)(\d*)$拆出色系、档位与小数部分； - 先在
palette中精确命中（如blue3）； - 未命中时，向相邻两档取色（浅一档
from与深一档to），按权重调用from.mix(to, hw, sw, lw)插值出新色； - 边界处理：档位低于可用范围时向
blue1取色，超出9时向black取色。
这一机制意味着命名色不止支持整数档位。正则中的第三组捕获允许小数扩展，例如 blue35 会被解析为 3.5 档——即 blue3 与 blue4 的 50% 混合色，为精细调色提供了更大的自由度。
六、类型支持与可验证性
- 类型定义：styles.generated.d.ts 中
Ψcolor统一了所有颜色属性取值，c（color）、bgc（background-color）、bc（border-color）等简写属性均代理到对应完整属性。 - 测试佐证：interpolation.imba 覆盖了命名色与动态值混合的编译场景；keyframes.imba 中也能看到命名色的实际使用。
- 官方示例：colors.imba 是文档配套的可运行演示，完整展示了本文提到的全部写法。
七、延伸阅读
- styles.md：Imba 样式系统的整体语法入门
- style-properties.md：样式属性的完整列表与简写规则
- style-units.md：长度、角度等数值单位体系
总结：Imba 的颜色体系是「原生 CSS 颜色 + Tailwind 命名色板」的统一融合——10 档色阶让取色有章可循，任意位置可用让迁移零成本，透明度与插值语法则让动态配色变得极其自然。掌握这套规则，你就能在 Imba 中写出既严谨又灵活的颜色样式。