每位设计师和开发者在切换颜色格式时都会遇到这些痛点。
设计工具导出HEX，CSS需要HSL，印刷又要CMYK。没有可靠的颜色转换工具，你只能手动猜测或在多个网站间反复跳转，浪费了大量宝贵的工作时间。
把RGB手动换算成HSL需要三角函数。公式里一个数字的偏差就会让色相偏转180°。Color Math 即时完成所有计算，不会出错。
大多数取色器忽略WCAG 2.1对比度要求。Color Math 即时显示对比度数值，让无障碍设计从第一次选色时就融入工作流。
颜色预览
#3B82F6
rgb(59, 130, 246)
Current
互补色
邻近色
三角配色
点击色块加载该颜色
White text on color
Black text on color
保存的颜色将显示在这里
一个颜色转换器，覆盖所有颜色体系。Color Math 一站式替代多款工具。
编辑任意字段 — HEX、RGB、HSL 或 CMYK — Color Math 立即重新计算所有其他格式，无需点击按钮。
拖动 R、G、B、H、S、L、C、M、Y、K 滑块，所有格式实时联动更新。无需键盘即可精细调色。
Color Math 根据当前颜色自动生成互补色、邻近色和三角配色。点击色块即可立即加载该颜色进行工作。
一眼看清颜色在白色和黑色背景下的对比率。Color Math 标注 AA、AAA 或未通过，让无障碍设计成为默认选项。
保存的颜色跨会话存储于浏览器，无需重新记录。Color Math 最多保留10条历史，随时回顾和对比。
Color Math 的所有计算完全在浏览器内执行，无数据上传，无需注册账号 — 你的颜色只属于你。
从连接设计稿与代码到印刷准备、无障碍检测 — Color Math 贯穿整个颜色工作流。
从 Figma 拿到 HEX 色值？粘贴到 Color Math，立即得到 CSS 自定义属性所需的 HSL 格式。调整明度生成悬浮和聚焦状态，无需重新打开设计文件。
三个步骤，完成颜色转换、探索与保存。
输入 HEX 色值（#f00 等缩写会自动展开），或拖动滑块开始操作。Color Math 同时接受 HEX、RGB、HSL 和 CMYK 格式的输入。
切换 RGB、HSL、CMYK 选项卡，通过滑块精调颜色。向下滚动至配色方案面板，查看 Color Math 自动生成的互补色、邻近色和三角配色。
点击复制按钮获取所需格式的颜色代码。点击「保存颜色」将当前颜色加入历史面板。Color Math 跨会话最多保留10条历史记录。
关于 Color Math 和颜色转换的常见问题解答。
Color Math 是一款免费的浏览器颜色转换器，可实时互转 HEX、RGB、HSL 和 CMYK 色值。同时支持生成配色方案（互补色、邻近色、三角配色）并计算 WCAG 2.1 对比率 — 所有功能无需任何服务器请求。
Color Math 使用标准数学公式（RGB → CMYK）进行转换，提供良好的理论估算。但实际印刷效果取决于打印机、油墨、纸张和 ICC 色彩配置文件。请将 Color Math 作为参考工具，而非专业印刷色彩管理的替代品。
WCAG 2.1 为文字可读性定义了最低对比率标准。AA 级要求普通文本 4.5:1、大号文本 3:1。AAA 级要求普通文本 7:1。Color Math 分别针对纯白和纯黑背景计算这些比率，帮你选择合适的背景色。
HSL（色相、饱和度、明度）与 CSS 定义颜色的方式以及设计师思考浅色调和深色调的方式更为贴近。HSL 中50%的明度给出色相最纯粹的版本，只需调整一个值即可轻松生成更亮或更暗的颜色变体。
Color Math 只将你的颜色保存在浏览器的 localStorage 中 — 从不上传至任何服务器。历史记录仅存储在你的设备和浏览器配置文件中。清除浏览器数据将删除这些历史。
Color Math 基于 HSL 色彩理论计算配色。互补色位于色轮对面180°处。邻近色位于±30°处。三角配色位于+120°和+240°处。饱和度和明度与原始颜色保持一致，使配色方案视觉上协调统一。
支持。Color Math 完全自适应响应式布局。滑块、输入框和配色网格均适配小屏幕。所有计算在本地执行，移动网络下无任何延迟。
无需注册。首次加载后可离线使用。
