颜色转换器
粘贴 hex、rgb() 或 hsl() 格式的颜色,一次得到三种格式,外加一排现成的明暗色阶,设计系统直接取用。
颜色(hex、rgb() 或 hsl())
#0071e3rgb(0, 113, 227)hsl(210, 100%, 45%)无法识别的颜色。试试 #0071e3、rgb(0, 113, 227) 或 hsl(211, 100%, 45%)。
明暗色阶
色阶行把颜色与白色(左)和黑色(右)按 20/40/60/80% 混合——适合做 hover 态与深色模式变体。
该工具完全在你的浏览器中运行,数据不会离开你的设备,不会上传到任何服务器。
使用方法
- 1粘贴任意一种格式的颜色——hex、rgb() 或 hsl()。
- 2查看转换结果并复制所需格式。
- 3从下方色阶行获取明色和暗色变体。
颜色转换器
输入 #0071e3、rgb(0, 113, 227) 或 hsl(211, 100%, 45%)——解析器自动识别格式,同时输出 hex、RGB 和 HSL 三种写法,均可一键复制。
数值下方是明暗色阶行:按 20/40/60/80% 与白色和黑色混合——悬停背景、边框和深色模式变体无需打开设计工具就能拿到。
常见问题
HSL 是怎么转换成 RGB 的?
通过标准圆柱坐标到 RGB 的映射:色度 c = (1 − |2L − 1|) × S,中间量 x 由色相所在区间决定,各通道再加偏移 m = L − c/2。用的是教科书公式,结果与设计工具一致。
为什么我的颜色代码提示无效?
支持的写法是 #RGB / #RRGGBB、rgb(r, g, b) 和 hsl(h, s%, l%)。通道要在范围内(RGB 为 0–255,色相 0–360,其余 0–100%),各部分用逗号或空格分隔。
明暗色阶有什么用?
明色(混白)适合悬停背景、徽章和卡片;暗色(混黑)适合按压态、边框和深色模式表面。从同一个品牌色派生所有状态,视觉上才够统一。
相关工具
嵌入这个工具
一行代码把工具放到你的网站——它在访客的浏览器里运行。
<iframe src="https://zoyku.com/zh/tools/color-converter?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-converter" loading="lazy"></iframe>100% 本地处理