跳到主要内容
Toolars
探索
报告问题

设计 · 本地工具

HEX 转 RGBA

HEX to RGBA Converter

把 #RGB、#RGBA、#RRGGBB、#RRGGBBAA 四种 HEX 写法精确转换为 rgba(),简写位自动展开,alpha 按 255 分字节解码不取整,附大尺寸色块预览。

任务路径 / 从输入到结果

输入 HEX 颜色

本地运行 · 不做任何上传

了解HEX 转 RGBA的使用方法、隐私说明与相关工具

任务路径 / 从输入到结果

如何把 HEX 颜色转换为 RGBA

  1. 01

    输入 HEX 颜色

    在“HEX 颜色”输入框中填写颜色值,输入框初始已填入 #6D5EF8CC。严格解析器接受 #RGB、#RGBA、#RRGGBB 和 #RRGGBBAA——输入框下方的帮助文本列出的正是这四种格式,输入上限为九个字符。

  2. 02

    执行转换

    点击“转换为 RGBA”。解析器会先校验整个值再渲染,格式不合法的值会被拒绝,并提示四种可接受的格式。只要修改输入框,之前的结果就会被清除,下方面板永远不会显示过期的颜色。

  3. 03

    读取 RGBA 通道

    Alpha 按字节除以 255 解码,计算时不取整。RGBA 与通道显示最多六位小数,全部 256 种 alpha 字节均可通过导出的 RGBA 往返转换。

  4. 04

    查看色块

    大尺寸的预览色块会直接渲染转换后的颜色,半透明效果在页面上立即可见。复制之前,用它确认 alpha 的观感与设计意图一致。

  5. 05

    需要时加载示例

    点击“加载示例”会运行一个完整例子——#22C55E99 转换为 rgba(34, 197, 94, 0.6)——展示从输入到通道的完整流程。“重置”把输入框恢复为 #6D5EF8CC 并清空结果。

  6. 06

    复制或下载结果

    点击“复制输出”把 rgba() 值复制到剪贴板,或点击“下载”保存为 toolars-color-rgba.txt。两个操作在转换成功之前都保持禁用,因此你绝不会复制到空结果。

工具速览

处理方式
在浏览器本地完成
输入是否离开设备
从不
数据保留
不保存任何内容
价格
免费

你的输入留在浏览器里。

HEX 转 RGBA 使用经过验证的本地执行路径,不会创建隐藏的输入或输出历史记录。

本地执行

在当前浏览器标签页内运行。

无隐藏处理

使用中的工具数据绝不会成为 Toolars 的文档记录。

无需账户

无需创建账户即可使用核心工作流。登录后收藏才会同步到你的账户。

立即重置

关闭标签页,当前的工作数据即刻消失。

HEX 转 RGBA 究竟做什么

设计交付稿把一个半透明的品牌色标为 #6D5EF8CC,而你正在编辑的样式表需要 rgba():红、绿、蓝三个字节还好算,但 CC 意味着 255 分之 204——约 0.8 的 alpha——心算很容易出错。HEX 转 RGBA 会精确解码每一组数字、展开简写位,并在实时色块旁逐通道展示供你核对。复制的字符串可以直接放进边框、阴影或渐变声明。这个值不会离开标签页,因此转换过程适合任何注重隐私的代码库。

常见问题

接受哪些 HEX 格式?
严格限定四种:#RGB、#RGBA、#RRGGBB 和 #RRGGBBAA。其他任何形式——缺少 #、五位数字或颜色关键字——都会被拒绝,提示信息会列出可接受的格式。
简写格式是如何展开的?
每个数字位会翻倍:#RGB 通过重复每个字符变成 #RRGGBB,因此 #6F8 解码为红 102、绿 255、蓝 136。#RGBA 的第四位翻倍成 alpha 字节,然后再套用通常的 0–255 到 0–1 映射。
alpha 字节是怎么换算的?
Alpha 按字节除以 255 解码,计算时不取整。RGBA 与通道显示最多六位小数,全部 256 种 alpha 字节均可通过导出的 RGBA 往返转换。
为什么我的结果消失了?
修改输入框会有意清除之前的结果,面板因此永远不会显示与当前输入不再匹配的颜色。再点一次“转换为 RGBA”,新结果会立即出现。
可以反向转换吗?
可以——使用 RGBA 转 HEX,它接受 rgb() 和 rgba() 写法并产出对应的十六进制值;颜色半透明时会包含 alpha 字节。两个工具共用同一套通道运算,往返转换会回到最初的值。
颜色会被发送到别处吗?
不会。转换完全在当前浏览器标签页内运行,输入和结果不会离开此标签页,也无需注册账号。

继续探索设计

相关任务,而非死胡同。

无需返回完整索引,直接进入另一个专注的工作区。

CSS 加载动画生成器

CSS Loader Generator

可视化设计轨道圆环或跳动三点两种加载动画,画布 24–160 px、周期 0.2–4 秒,导出的 CSS 自带 @keyframes 与减弱动效媒体查询。

创建

CSS 复选框生成器

CSS Checkbox Generator

设计 18–64 px 的自定义复选框外观并预览选中过渡;导出的 CSS 保留真实 input,键盘焦点与读屏播报不受影响,附焦点与禁用状态样式。

创建

CSS 开关生成器

CSS Switch Generator

设计纯 CSS 开关:轨道 44–128 px 宽、滑块 16–56 px,180 ms 滑动过渡;导出保留真实复选框 input,无需 JavaScript,附减弱动效处理。

创建

CSS 裁剪路径生成器

CSS Clip Path Generator

拖动、使用键盘或输入坐标编辑多边形。从四种预设开始,在本地复制 clip-path 声明或完整 CSS。

创建