白底效果
黑底效果
HEXA
RGBA
HEX
RGB
颜色透明度预览器工具简介
颜色透明度预览器是一款帮助设计师和前端开发者直观查看带透明度颜色效果的工具。输入 HEXA(#RRGGBBAA)、RGBA 等格式的颜色值,即可在棋盘格背景上实时预览透明叠加效果。
工具还提供白底 / 黑底对比预览,以及 HEXA、RGBA、HEX、RGB 四种格式的实时换算与一键复制,方便直接粘贴到 CSS 代码中使用。
如何使用本工具?
1. 在输入框中填入颜色值,支持 #1890ff80、#1890ff、rgb(24,144,255)、rgba(24,144,255,0.5) 等写法。
2. 也可用「取色器」选取颜色,拖动「不透明度」滑块调节 Alpha 通道。
3. 预览区会实时显示棋盘格透明效果,以及白底 / 黑底下的真实观感。
4. 在下方格式卡片中点击「复制」,即可把对应格式的颜色值复制到剪贴板。
常见问题与解答
什么是 HEXA?
HEXA 是带透明度的十六进制颜色写法,在普通的 6 位 HEX(RRGGBB)后追加 2 位 Alpha(AA,00 完全透明 ~ FF 完全不透明)。例如 #1890ff80 表示站点蓝约 50% 不透明。
为什么要用棋盘格背景预览?
透明色单独看不出效果,棋盘格是设计软件通用的透明指示背景,能让你直观判断颜色的透明程度与叠加后的观感,避免直接填到页面上才发现不对。
速查在线工具箱