Realtime Colors 让颜色离开色卡进入界面
工具将文字、背景、主色、辅色和强调色分配到一套完整示例页面。修改任意颜色后，导航、按钮、卡片、链接和大面积区块会立即变化。相比只看五个并排色块，这种预览更容易发现主色太抢、背景太灰或强调色无处可用。
我通常从正文和背景开始，先把长文阅读对比度确定，再加入主要按钮颜色。最后才设置强调色，并限制在链接、提示和少量高优先级状态。先解决信息层级，随机配色才不会变成无目的试颜色。
一套配色应通过这些现实检查
示例页提供方向，但自己的内容长度、图片和状态更复杂。导出前至少检查可读性与极端状态。
- 正文和小字号文字达到所需对比度；
- 按钮的默认、悬停、禁用状态可区分；
- 成功、警告和错误不只依赖颜色表达；
- 浅色与深色模式都在真实设备上测试。
字体预览要结合中文回退与实际内容
网站支持输入 Google Fonts 或本机字体，并调整标题与正文字体比例。很多西文字体不含中文，中文会回退到系统字体；中英文混排时要在 Windows、macOS 和手机上看字重、标点和行高。
示例中的短标题无法暴露长中文标题换行问题。把真实的最长标题、按钮文字和数字数据复制到自己的原型中，才能判断字号和字宽是否合适。
导出的变量仍需纳入自己的设计系统
Realtime Colors 可导出 CSS、SCSS、Tailwind 等格式，还能生成色阶。导出只是起点，应把变量按语义命名，例如 surface、text、primary-action 和 danger，而不是让组件直接依赖某个十六进制颜色。
最终在真实页面检查表单、表格、弹窗、广告和用户内容，示例站无法覆盖所有组合。工具最有价值的阶段是快速淘汰不合适方案；真正上线仍要经过无障碍、响应式和品牌审核。
