介绍
颜色转换器可帮助设计师和开发者在 HEX、HEXA、RGB、RGBA、HSL、HSLA、HSV 和 HSVA 之间转换颜色。它适合设计稿交接、CSS、UI Token、Canvas 代码、图片流程和快速配色实验。
使用方法
输入 HEX、RGB、HSL 或 HSV 格式的颜色，或调整页面上的颜色控件。工具会即时更新所有支持格式。通过预览检查视觉效果，调整 Alpha 透明度，并复制适合 CSS、设计 Token 或代码流程的格式。
功能特点
- •支持 HEX、HEXA、RGB、RGBA、HSL、HSLA、HSV、HSVA
- •实时颜色预览，支持透明度
- •可复制 CSS 背景、边框和文本颜色值
- •适合 UI 设计、前端开发和设计 Token 整理
- •提供示例颜色和快速色块
- •无需安装、登录或设计软件
为什么颜色格式很重要
不同颜色格式适合不同工作。HEX 简洁，常用于设计交接；RGB 与屏幕颜色通道对应，适合代码处理；HSL 更贴近人类调整颜色的思路；RGBA、HSLA 和 HEXA 则增加了透明度。
如何选择格式
需要短而固定的值时用 HEX。需要透明叠加或通道计算时用 RGB/RGBA。做主题色变化时，HSL/HSLA 往往更直观，因为调亮度或饱和度比手动改 RGB 更容易。
可读性与对比度
颜色转换不会保证文字可读。为重要文本、按钮和状态颜色选择颜色后，应检查对比度。如果对比度不足，优先调整亮度、饱和度或背景，而不是只依赖透明度。
Alpha 与 8 位 HEX
8 位 HEX 在普通 6 位颜色后添加透明度通道。例如 #3366CC80 的最后两位表示透明度。很多场景中 RGBA 更易读，因为 Alpha 是小数。
颜色格式指南
常见颜色格式快速对比。
| 格式 | 示例 | 适合用途 |
|---|---|---|
| HEX | #3366CC | 设计交接、静态 CSS 颜色 |
| HEXA | #3366CC80 | 带透明度的静态颜色 |
| RGB | rgb(51, 102, 204) | 程序化颜色通道 |
| RGBA | rgba(51, 102, 204, 0.5) | 透明叠加和阴影 |
| HSL | hsl(220, 60%, 50%) | 主题调整和颜色变体 |
| HSV | hsv(220, 75%, 80%) | 取色器类工作流 |
常见透明度参考
在不透明度和 8 位 HEX Alpha 之间转换时可参考。
| 不透明度 | 近似 HEX Alpha | 常见用途 |
|---|---|---|
| 100% | FF | 完全不透明 |
| 75% | BF | 较强叠加 |
| 50% | 80 | 半透明 |
| 25% | 40 | 轻微叠加 |
| 10% | 1A | 非常浅的色调 |
常见问题
HEX、RGB 和 HSL 有什么区别？
HEX 是紧凑的十六进制表示；RGB 使用红、绿、蓝通道；HSL 使用色相、饱和度和亮度，通常更适合手动调整颜色。
支持透明度吗？
支持。可以使用 RGBA、HSLA、HSVA 或 8 位 HEXA 表示透明度。
结果可以直接用于 CSS 吗？
可以。转换结果可复制到 color、background-color、border-color、box-shadow 和渐变等 CSS 属性。
设计系统适合用哪种格式？
固定 Token 常用 HEX；如果需要生成浅色、深色、悬停或弱化状态，HSL 更方便。
转换颜色会改变显示效果吗？
等价颜色理论上显示一致，但透明度、色彩配置、屏幕校准和周围颜色都会影响感知。