在 HEX、RGB、HSL、OKLCH、CSS 变量和 Tailwind 类之间即时互转，带实时预览。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
这个工具能做什么
粘入任意 CSS 颜色格式（HEX、RGB、HSL 或 OKLCH），即可在同一页面看到所有 其他表示形式：十六进制字符串、rgb() 和 hsl() 函数调用、现代 oklch() 形式 （CSS Color Level 4）、可直接粘贴的 CSS 自定义属性，以及 Tailwind 任意值 类。内置拾色器可视化选色，旁边的预览色块随时确认效果。CSS 变量名和 Tailwind 类前缀（bg、text、border、ring、fill、stroke）均可自定义，让你 直接复制所需的那行代码。每个格式都有独立复制按钮，工具自动识别输入格式， 无需手动指定。所有转换均在客户端完成，不发送任何网络请求。
工具细节
- 输入
- 文本 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 22 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 颜色格式转换器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
将 Figma 取色复制为 CSS oklch() 格式
在 Figma 中选好色块，拿到 #7c3aed 这样的十六进制，需要转成 oklch() 写进 CSS Color Level 4 样式表。把十六进制粘贴进来，从 OKLCH 行读到 oklch(0.4457 0.2457 293.8)，直接复制进 :root 变量块，省去手动矩阵运算。
构建 Tailwind v4 设计令牌文件
Tailwind v4 支持用 oklch 格式的 CSS 变量来定义主题。你有一套品牌色板的 十六进制值，需要逐一填入 --color-primary 到 --color-accent。每个色块粘进 来，修改变量名后复制 CSS 变量行，几秒钟就能填完 tokens.css，省去逐个手动 换算的麻烦。
核查设计师给的 oklch() 值是否渲染正确
设计师在规格文档里写了 oklch(0.72 0.15 200)，你粘进来，能同时看到对应的 十六进制、RGB 和 HSL，以及旁边的颜色预览色块，立刻确认是不是那个蓝绿色调， 再下手写代码。
常见踩坑
粘入 oklch() 时用了百分比亮度形式（oklch(72% 0.15 200)）而非 0-1 小数形式，输入两种都接受，但输出始终使用 0-1 小数形式，符合 CSS Color Level 4 规范。
把 CSS 变量名写成含空格或非法字符的形式；只允许小写字母、数字和连字符（例如 color-brand-primary）。
以为 Tailwind 任意值类（bg-[#hex]）能覆盖同样的全局 CSS 变量设置，两者优先级相同，后声明的样式会覆盖先声明的。
隐私说明
所有颜色转换均在浏览器本地完成，你输入的颜色值不会发送到任何服务器。当前颜色只在你主动分享链接时才会写入 URL，品牌色等敏感颜色默认不经过网络。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。