1. 转换品牌主色用于CSS
前端开发者背景
设计师提供了一组品牌色的HEX代码,需要在CSS文件中使用rgb()函数格式来定义颜色变量。
问题
手动将多个HEX值(如#4A90E2, #50E3C2)转换为rgb(74, 144, 226)格式容易出错且效率低下。
如何使用
将所有HEX值粘贴到输入框,每行一个。选择输出格式为“rgb(255,0,0)”。
结果
立即获得所有颜色的RGB函数格式代码,可直接复制到CSS变量或样式规则中。
Elysia Tools
导航
Design
将HEX颜色值转换为RGB用于屏幕显示
执行
填写表单、运行工具,并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
HEX转RGB转换器是一款专为设计师和开发者打造的在线工具,能够快速、准确地将十六进制(HEX)颜色代码转换为RGB或RGBA格式,便于在屏幕显示、CSS样式及各类设计软件中直接使用。
背景
设计师提供了一组品牌色的HEX代码,需要在CSS文件中使用rgb()函数格式来定义颜色变量。
问题
手动将多个HEX值(如#4A90E2, #50E3C2)转换为rgb(74, 144, 226)格式容易出错且效率低下。
如何使用
将所有HEX值粘贴到输入框,每行一个。选择输出格式为“rgb(255,0,0)”。
结果
立即获得所有颜色的RGB函数格式代码,可直接复制到CSS变量或样式规则中。
背景
从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属性。
支持标准的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之间的小数。