您最喜欢的城市的最爱地点
首页
添加为 Google 首选来源

颜色转换器 — HEX、RGB、HSL 和 Alpha

将受支持的 sRGB 颜色转换为 HEX、RGB 和 HSL,保留 alpha。请查看舍入说明;本工具不是完整的 CSS 解析器,也不保证屏幕颜色匹配。

颜色转换器

Alpha: 100%

输入 HEX、RGB 或 HSL 颜色

结果

请输入一个受支持的颜色。

转换在浏览器中进行,工具不会新增上传或保存历史记录。仅在请求时使用剪贴板;网站其他服务仍受其政策约束。

如何转换颜色

  1. 输入以 # 开头的 HEX,或受支持的 rgb/rgba/hsl/hsla 函数。示例按钮只填入 #33669980,不会自动转换;小数使用英文句点。
  2. 点击“转换”,工具根据未舍入的颜色和独立 alpha 分别生成三种表示。修改输入会立即移除旧结果。
  3. 可复制单个代码或全部三行。舍入标记和 alpha 字节说明提示精度损失;色块并非经过校准。

通道和语法

HEX3/4 会重复每个数字,HEX6/8 使用完整字节,alpha 在最后。RGB 数值范围为 0–255,百分比为 0–100%。现代语法以空格分隔通道、斜杠分隔 alpha;旧语法使用逗号,且不能混用通道数值和百分比。

HSL 色相使用度数,可带 deg;饱和度和亮度必须为百分比。色相会循环;HSL 亮度不是相对亮度。转换使用编码后的 sRGB。

Alpha 与 RGB 独立,零 alpha 不会删除隐藏通道,也不会与背景混合。HEX8 将 0.5 量化为 128/255。

RGB 通道相等时约定 H=0、S=0,无法唯一恢复原始色相。色度非零时保留数学色相,不使用浮点容差阈值。

示例与舍入

#33669980 的 RGB 字节为 51、102、153,alpha 为 128/255;编码通道 0.2、0.4、0.6 对应 HSL 210°、50%、40%。函数形式的 alpha 舍入为 0.50196078。

hsl(210 100% 50% / .5) 的 RGB 为 0、127.5、255。通道和 alpha 的中间值向上舍入,HEX 为 #0080FF80;函数形式仍可保留 alpha 0.5。

rgb(17 34 51 / 99.999999%) 保留函数 alpha 0.99999999,但字节舍入为 FF,HEX 为 #112233FF。0.000001% 则保留为 0.00000001,HEX 字节舍入为 00。

范围和限制

去除空白前最多 256 个 UTF-16 代码单元,数字最多 16 个 ASCII 字符。RGB 数值和数字 alpha 最多 8 位小数,百分比和 HSL 最多 6 位;不支持指数,色相范围为 ±1000000°,超范围值会被拒绝。

不支持颜色名称、transparent、currentColor、none、注释、变量、计算、其他颜色空间或角度单位。HSL 的 S/L 必须带百分号;其中部分语法在 CSS 中有效。

HEX 舍入至最近字节,中间值向上;RGB 和函数 alpha 最多 8 位小数,HSL 最多 6 位。舍入为 360° 的色相变为 0°;不保证精确往返转换。

不提供 ICC、CMYK、广色域转换、对比度评级或显示匹配认证。色块仅展示生成的 RGB;HSL 亮度不是无障碍评估。

隐私

计算在浏览器中进行,不新增上传、账户、历史记录、输入日志或含颜色的分享链接。仅按请求复制;失败时提供只读文本。网站其他服务仍受其政策约束。

常见问题

本工具只支持有限的独立 HEX/RGB/HSL;不支持不等于 CSS 无效。

0.5 × 255 = 127.5,向上舍入为 128,即十六进制 80;128/255 并不精确等于 0.5。

不会,RGB 通道与 alpha 分开保留。

灰色没有唯一色相;接近 360° 的值也可能舍入并回绕到 0°,此时会标记舍入。

CSS 代码始终使用 ASCII 数字和小数点。全部复制使用 HEX、RGB、HSL 前缀,以 LF 分行且末尾无换行。

不能。它是模型坐标,不是相对亮度、感知亮度或无障碍评级。

来源和方法

CSS Color 4 描述了此有限转换器所参考的颜色格式和计算。

本转换器只实现有限子集和自己的舍入规则,不代表完整符合 CSS。

SVG 转 PNG

将本地 SVG 文件或粘贴的代码转换为 PNG,可设置尺寸、透明或纯色背景,并使用内置字体。

打开工具 — SVG 转 PNG

CSS 滤镜生成器

排列和重复 CSS 效果,比较示例并复制精确的滤镜声明。

打开工具 — CSS 滤镜生成器

流式字号计算器

为两个视口宽度分别设置字号,生成流式字号。复制使用 rem 的 CSS,并查看基于导出系数计算的模型。

打开工具 — 流式字号计算器

CSS 按钮生成器

设置原生按钮状态,检查键盘焦点并复制 HTML 和 CSS。

打开工具 — CSS 按钮生成器

CSS 圆角生成器

编辑八个圆角半径,预览盒子,并复制以像素或百分比表示的 CSS。

打开工具 — CSS 圆角生成器

CSS Grid 生成器

编辑 CSS Grid 轨道、项目位置和命名区域,预览并复制 CSS、HTML 或下载完整示例。

打开工具 — CSS Grid 生成器

CSS Flexbox 生成器

使用容器和项目控件、显式布局轴、匹配的 CSS 和 HTML 以及本地完整示例下载构建 Flexbox 示例。

打开工具 — CSS Flexbox 生成器

CSS 文字阴影生成器

创建有序文字阴影,预览纯文本并复制精确 CSS。

打开工具 — CSS 文字阴影生成器

CSS 变换发生器

编写可重复的 2D CSS 变换,编辑 px 或百分比平移和原点,检查参考框并复制准确的当前声明。

打开工具 — CSS 变换发生器

CSS 盒子阴影生成器

创建有序的 CSS box-shadow 图层,实时预览并复制代码。

打开工具 — CSS 盒子阴影生成器

图片水印

为一批图片添加文字或标志水印,检查结果并下载单个文件或 ZIP。

打开工具 — 图片水印

CSS 渐变生成器

创建线性或径向 CSS 渐变,调整颜色、不透明度和节点位置。

打开工具 — CSS 渐变生成器

图片转文字(OCR)

识别本地 PNG 或 JPEG 中的印刷文字,选择语言,检查并修改结果后复制或下载。

打开工具 — 图片转文字(OCR)

从图片读取二维码

从本地 PNG 或 JPEG 读取一个二维码,查看文本或内容字节,不会打开链接。

打开工具 — 从图片读取二维码

颜色对比度检查器

比较前景与背景颜色,调整不透明度,检查文本和必要界面细节的 WCAG 数值对比度阈值。

打开工具 — 颜色对比度检查器

打印尺寸与分辨率计算器

计算照片可打印尺寸、所需像素,以及留白或裁切时的实际 PPI。

打开工具 — 打印尺寸与分辨率计算器

宽高比计算器

计算宽度与高度的精确比例,或指定一边计算对应的像素尺寸。

打开工具 — 宽高比计算器

图像压缩

尝试将 JPEG、PNG 或 WebP 图片压至目标文件大小,查看实测结果并可选择缩小尺寸。

打开工具 — 图像压缩

HEIC 转 JPG

在浏览器中将受支持的 HEIC 照片转换为原尺寸 JPG 副本,调整质量和背景,并单独下载或打包下载已验证的结果。

打开工具 — HEIC 转 JPG

图片格式转换器

在本地批量转换受支持的 PNG、JPEG 和 WebP 图片,调整透明度、背景和质量,检查并下载编码结果。

打开工具 — 图片格式转换器

照片拼图工具

将本地照片排列成网格,下载 PNG 或 JPEG。

打开工具 — 照片拼图工具

旋转和翻转图片

批量旋转或翻转本地静态 PNG、JPEG 和 WebP 图片,然后查看并下载处理结果。

打开工具 — 旋转和翻转图片

图片裁剪

通过可视选区或像素输入精确裁剪本地 JPEG、PNG 或 WebP 图片,下载为 PNG 或 JPEG。

打开工具 — 图片裁剪

图片尺寸调整

按像素或百分比调整 JPG、PNG 或 WebP 图片,预览结果并下载。

打开工具 — 图片尺寸调整
查看此分类中的所有工具