颜色转换器与取色器
选取任意颜色,即刻获得对应的 HEX、RGB 和 HSL 值。点击即可复制任意格式——非常适合 CSS、设计工具和代码。
如何转换颜色
使用取色器选取颜色,或直接在任意输入框中输入 HEX、RGB 或 HSL 值。
所有格式即时更新——你每做一次修改,HEX、RGB 和 HSL 值都会实时重新计算。
点击任意格式旁边的“复制”按钮,即可将该值复制到剪贴板,随时粘贴到 CSS、Figma 或代码中。
常见问题
关于 HEX、RGB 和 HSL 之间颜色转换的最常见问题解答。
HEX、RGB 和 HSL 有什么区别?
HEX(例如 #FF5733)是 HTML 和 CSS 中使用的十六进制表示法。RGB(例如 rgb(255, 87, 51))通过红、绿、蓝三个通道来定义颜色。HSL(例如 hsl(11, 100%, 60%))通过色相、饱和度和明度来定义颜色——对于需要做细微调整的设计师来说通常更直观。
我可以直接输入 HEX 代码吗?
可以。点击 HEX 输入框,输入或粘贴任意有效的 6 位 HEX 代码(例如 #3B82F6)即可。RGB 和 HSL 值会自动更新。3 位(#RGB)和 6 位(#RRGGBB)格式均受支持。
颜色数据会被发送到服务器吗?
不会。所有颜色转换都完全在你的浏览器中通过 JavaScript 完成。不会向任何服务器发送任何内容。
我可以用这个工具获取 CSS 颜色值吗?
可以——只需点击 HEX、RGB 或 HSL 旁边的“复制”,然后直接粘贴到你的 CSS 中。这三种格式都是有效的 CSS 颜色值,所有现代浏览器均支持。
专为设计师和开发者打造的颜色转换器
在 HEX、RGB 和 HSL 之间实时转换,然后直接复制到你的 CSS、Figma 或设计令牌中。
实时转换
编辑任意格式,HEX、RGB 和 HSL 会在你输入的瞬间重新计算。无需点击转换按钮,没有任何延迟。
三种格式同步联动
HEX 适合写代码,RGB 适合运算,HSL 便于直观微调。三者始终保持关联,你可以选择最顺手的一种。
一键复制
每种格式都有专属复制按钮,可将可直接用于 CSS 的值放入剪贴板。直接粘贴到你的样式表即可。
可视化取色器
通过全光谱取色器直观地选取任意颜色。非常适合取色、微调和探索配色方案。
可直接用于 CSS 的输出
每种格式都以有效的 CSS 输出——无需重新排版,无需重新转换。兼容所有现代浏览器和设计工具。
100% 隐私保护——无需服务器
所有颜色运算都在你的浏览器中完成。颜色、配色方案和数值绝不会离开你的设备。
谁在使用颜色转换器
从初学 CSS 的新手到维护设计系统的品牌团队——一个工具,适配任何工作流。
网页开发者
在 CSS 自定义属性、Tailwind 配置以及从浏览器检查器中获取的 HEX 代码之间转换设计令牌。
- CSS 变量和 Tailwind 颜色
- 将 Figma 的 HEX 转换为 HSL 以用于主题
- 排查跨平台的颜色不一致问题
设计师
让 Figma、Sketch、Adobe 和网页中的配色保持一致——在不同色彩系统之间即时转换任意色调。
- 将 Figma 的 HEX 导出到 CSS
- 用 HSL 调整饱和度和明度
- 在不同工具间匹配品牌色
品牌与风格指南团队
以设计师和开发者所需的各种格式记录品牌配色——HEX、RGB 和 HSL 并排呈现。
- 生成三种格式的品牌配色
- 制作可共享的颜色规范
- 审核旧版颜色代码