颜色透明度预览器

本地处理

颜色值（HEX / HEXA / RGB / RGBA）

取色器

不透明度 50%

透明效果预览（棋盘格背景）

白底效果

黑底效果

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 是带透明度的十六进制颜色写法，在普通的 6 位 HEX（RRGGBB）后追加 2 位 Alpha（AA，00 完全透明 ~ FF 完全不透明）。例如 #1890ff80 表示站点蓝约 50% 不透明。

透明色单独看不出效果，棋盘格是设计软件通用的透明指示背景，能让你直观判断颜色的透明程度与叠加后的观感，避免直接填到页面上才发现不对。

两种方式：8 位 HEX 末两位表示透明度（如 #FFFFFF80 即 50% 白），或 rgba/hsla 的第四个参数（0-1 小数）；旧浏览器不支持 8 位 HEX，兼容性要求高时用 rgba。

半透明是与底层颜色混合的结果，底色越深叠色越暗；做设计稿时要在目标底色上预览，只在白底上试色容易上线后偏色。

半透明文字的可读性随底色变化，等效对比度可能不达标；正文尽量用不透明色，半透明只用于装饰层或配合足够大的字号与阴影。