颜色转换器和选择器
选择任意颜色，即可立即获取其 HEX、RGB 和 HSL 值。点击即可副本任何格式——完美适用于 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 并排显示。
- 生成三色品牌调色板
- 构建可共享的颜色规范
- 审核旧版颜色代码
如何转换颜色
使用颜色选择器选择颜色，或直接在任何输入字段中输入 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%)）通过色调、饱和度和明度来定义颜色——对于进行细微调整的设计师来说，HSL 通常更直观。
我可以直接输入十六进制代码吗？
是的。点击十六进制输入框，输入或粘贴任何有效的六位十六进制代码（例如 #3B82F6）。RGB 和 HSL 值将自动更新。支持三位数 (#RGB) 和六位数 (#RRGGBB) 格式。
颜色数据是否发送到服务器？
不。所有颜色转换都完全在您的浏览器中使用 JavaScript 完成。不会向任何服务器发送任何数据。
我可以使用此工具获取 CSS 颜色值吗？
是的——只需点击 HEX、RGB 或 HSL 旁边的“复制”按钮，然后直接粘贴到 CSS 代码中即可。这三种格式都是有效的 CSS 颜色值，所有现代浏览器都支持。