HTML本身没有Color Token系统，所谓Color Token是前端工程中通过CSS自定义属性（如:root中的--primary-color）或预处理器变量实现的约定机制，HTML仅作为消费端。
HTML里没有Color Token系统，别被名字唬住
HTML本身不提供“颜色Token”这种抽象机制——它只有color、background-color等CSS属性，以及有限的命名颜色（如red、aliceblue）。所谓“Color Token系统”，实际是前端工程中人为约定的一套变量管理方式，依赖CSS自定义属性（:root + --primary-color）或预处理器（如Sass $primary），HTML只是最终消费方。
CSS自定义属性是HTML项目中最实用的颜色Token方案
直接在HTML中通过<style>或外部CSS文件定义:root变量，所有HTML元素都能用var(--brand-blue)引用。这种方式零构建依赖、浏览器原生支持（Chrome 49+、Firefox 31+、Safari 9.1+），适合中小型项目或快速原型。
实操建议：
- 把基础色定义在
:root里，比如--color-primary: #2563eb;、--color-success: #10b981; - HTML中用内联样式或class间接使用：
<div style="color: var(--color-primary)">或<button class="btn-primary">（对应CSS里.btn-primary { color: var(--color-primary); }） - 避免在
var()里嵌套计算（如var(--color-primary) + #111），CSS不支持；需用color-mix()或hsl()函数做衍生色 - 深色模式适配时，用
@media (prefers-color-scheme: dark)重定义:root变量，不要靠JS切换class
用data属性+CSS attr()不是正经颜色Token方案
有人尝试写<div data-color="primary">再用attr(data-color)拼接颜色值，这行不通——attr()只能返回字符串，不能当颜色值解析，color: attr(data-color);会被浏览器忽略。这是常见误解点。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
真正可行的替代思路：
- 用
data-theme="dark"配合CSS类选择器（如[data-theme="dark"] .text { color: white; }），但本质是主题切换，不是Token - 若必须动态注入颜色，用JS读取
dataset.color后设置style.color，但这绕过了CSS变量机制，失去可维护性 - 服务端渲染时，可将Token JSON注入
<script id="color-tokens">{"primary": "#2563eb"}</script>，再由JS挂载到:root，但增加了运行时负担
构建工具链里的Token真正起点不在HTML文件
Design Token（含颜色）的权威来源通常是JSON/YAML配置（如tokens/colors.json），通过工具（Style Dictionary、token-transformer）生成多平台输出：CSS变量、SCSS变量、JS对象、甚至Android colors.xml。HTML只负责加载生成后的CSS。
关键提醒：
- 别在HTML里手写
<style>--color-warning: #f59e0b;</style>——Token应集中管理，否则改一个色要搜遍所有HTML文件 - 命名要有语义（
--color-cta-primary）而非物理值（--color-blue-500），否则UI改版时语义断裂 - 导出CSS变量时注意作用域：全局
:root适用于大多数场景，但组件级Token建议用.card { --color-border: ...; }避免污染
颜色Token的复杂性不在HTML怎么写，而在于如何让设计、前端、移动端共用同一份源；HTML只是链条末端最轻量的一环，别让它承担不该有的职责。
