构建红绿灯 RAG 调色板 — 选 HEX 颜色,导出 CSS 变量、JS token 或 Tailwind 配置,适用于任何流程看板
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
预设
调色板
红色
阻塞 / 紧急
AA 不通过 3.8:1自动文字色
黄色
存在风险 / 需关注
AA 不通过 2.1:1自动文字色
绿色
正常推进 / 已完成
AA 不通过 2.3:1自动文字色
预览
状态徽章
红色黄色绿色
看板行
网站改版红色
Q3 营销活动黄色
新手引导流程绿色
导出
:root {
--status-red: #ef4444;
--status-red-text: #000000;
--status-amber: #f59e0b;
--status-amber-text: #000000;
--status-green: #22c55e;
--status-green-text: #000000;
}这个工具能做什么
RAG(红–黄–绿)状态色是每一张项目看板、KPI 报告和运营 Review 的骨架。这个工具让你在一处定义、预览和导出 RAG 调色板。
从五套经过实战验证的预设中选择 — 经典红绿灯、WCAG 无障碍 (已验证对比度)、柔和马卡龙、Material Design、企业配色 — 或者直接 输入你自己的 hex 值。每个状态色块都会显示 WCAG 2.1 对比度, 一眼看出徽章文字在所选背景上是否能通过 AA 标准。开启"扩展调色板" 还可以加入蓝色(信息/计划中)和灰色(未知/不适用),覆盖成熟看板所需的 每种状态。
导出格式随便选:CSS 自定义属性、纯 CSS 类、JS/TS 对象、Tailwind colors 配置块、或直接粘进 wiki 的 Markdown HEX 表格。每种格式都会 同时生成文字颜色 token,让你得到一个完整的、可直接复制粘贴的代码片段。 单击任意色块可一键复制 hex,或用一个按钮复制整段代码。
你构建的调色板会写入 URL query string,把链接发给同事就能让他们 看到完全相同的调色板 — 包括你自定义的 hex 值。完全在浏览器本地 运行,颜色不会离开你的标签页。
工具细节
- 输入
- 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 14 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 运营
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
RAG 状态色生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。