关键信息
- 分类
- Design
- 输入类型
- textarea, select
- 输出类型
- text
- 样本覆盖
- 4
- 支持 API
- Yes
概览
HEX转RGB转换器是一款专为设计师和开发者打造的在线工具，能够快速、准确地将十六进制（HEX）颜色代码转换为RGB或RGBA格式，便于在屏幕显示、CSS样式及各类设计软件中直接使用。
适用场景
- •当您需要将网页或设计稿中的十六进制颜色代码（如 #FF5733）用于屏幕显示或编程时。
- •在进行CSS样式开发，需要将HEX颜色值转换为rgb()或rgba()函数格式时。
- •当您有一批HEX颜色值需要快速批量转换为RGB格式，以用于其他软件或代码中时。
工作原理
- •在输入框中粘贴或输入一个或多个HEX颜色值（支持3位、4位、6位、8位格式，每行一个）。
- •从下拉菜单中选择您需要的输出格式，例如简单的“255,0,0”或标准的CSS格式“rgb(255, 0, 0)”。
- •工具将自动解析每个HEX值，并立即生成对应的RGB或RGBA结果，您可以直接复制使用。
使用场景
网页设计师从设计软件中提取主题色HEX代码后，快速转换为CSS可用的RGB格式以调整网站配色。
前端开发者在编写样式表时，将品牌色的HEX值转换为rgba()格式，以便实现半透明叠加效果。
UI设计师在制作设计规范文档时，批量转换所有色板的HEX值为带标签的RGB格式，确保团队协作时颜色定义清晰一致。
用户案例
1. 转换品牌主色用于CSS
前端开发者- 背景原因
- 设计师提供了一组品牌色的HEX代码，需要在CSS文件中使用rgb()函数格式来定义颜色变量。
- 解决问题
- 手动将多个HEX值（如#4A90E2, #50E3C2）转换为rgb(74, 144, 226)格式容易出错且效率低下。
- 如何使用
- 将所有HEX值粘贴到输入框，每行一个。选择输出格式为“rgb(255,0,0)”。
- 效果
- 立即获得所有颜色的RGB函数格式代码，可直接复制到CSS变量或样式规则中。
2. 处理带透明度的设计稿颜色
- 背景原因
- 从Figma中导出的颜色包含透明度信息，格式为8位HEX（如#00000080），需要用于前端的半透明遮罩层。
- 解决问题
- 需要将#00000080这样的值转换为CSS可识别的rgba(0,0,0,0.5)格式。
- 如何使用
- 输入8位HEX值，选择输出格式为“rgba(255,0,0,0.5)”或“rgb(255,0,0,0.5)”。
- 效果
- 得到精确的RGBA值，其中透明度被正确计算为0.5，可直接用于CSS的background-color或color属性。
用 Samples 测试
design相关专题
常见问题
支持哪些HEX格式？
支持标准的3位（如#f00）、6位（如#ff0000）缩写格式，以及包含透明度的4位（如#f008）和8位（如#ff000080）格式。
有哪些输出格式可选？
提供四种常用格式：简单数字（255,0,0）、带函数名无空格（rgb(255,0,0)）、带函数名有空格（CSS标准格式）以及带标签的格式（R:255 G:0 B:0）。
如何转换带透明度的颜色？
输入8位或4位的HEX值（最后两位代表透明度），工具会自动将其转换为RGBA格式，例如#ff000080会转换为rgba(255,0,0,0.5)。
可以一次转换多个颜色吗？
可以。您只需在输入框中每行输入一个HEX值，工具会批量处理并按相同顺序输出所有对应的RGB结果。
转换结果的精度如何？
转换基于精确的数学计算，确保从HEX到RGB的映射准确无误，透明度值也会被精确计算为0到1之间的小数。