🎨 颜色转换器
取色、输入 HEX 均可，HEX / RGB / HSL 实时互转。
HEX
-
RGB
-
HSL
-
如何使用颜色转换
在 HEX、RGB、HSL 三种写法之间互转，附带实时色块预览，可直接复制任一格式的值。
计算原理与公式
三者是同一颜色的不同表示：RGB 基于光的加色混合（红绿蓝各 0–255）；HSL 基于色的三要素（色相 H 0–360°、饱和度 S 0–100%、明度 L 0–100%）；HEX 是 RGB 的十六进制简写，#RRGGBB。转换关系：RGB 转 HSL 需先归一化到 0–1，再计算三要素。
适用场景
前端开发中的配色转换、设计稿取色、CSS 变量编写、品牌色在不同格式间迁移。
计算示例
同一颜色的三种表示：
| 格式 | 写法 | 说明 |
|---|---|---|
| HEX | #2563EB | 最常用，CSS 与设计工具通用 |
| RGB | rgb(37, 99, 235) | 各通道 0–255 |
| HSL | hsl(221, 83%, 53%) | 色相/饱和度/明度 |
| RGBA | rgba(37, 99, 235, 0.5) | 带透明度 0–1 |
| HEX 简写 | #25E | 可省略每对相同字符 |
计算局限与假设
HEX 简写只在每对字符相同时成立（#AABBCC 可写 #ABC，#AABBBD 不能）。RGB 与 HSL 的数值范围不同，直接比较数值大小没有意义。印刷场景使用 CMYK 或 Lab 色彩空间，与屏幕 RGB 无法精确互转。色彩管理差异会导致同一数值在不同设备上显示略有不同。
常见问题
HEX 和 RGB 写哪个好？
完全等价，看团队习惯。CSS 里都支持，HEX 短（#fff）适合直接写，需要透明度时用 8 位 HEX（#3B82F680）或 rgba()。设计稿标注常给 HEX，开发转 rgba 时用本工具换算。
为什么我调的颜色打印出来不一样？
屏幕用 RGB 加色混合，打印用 CMYK 减色混合，色域不同必然有色差。重要印刷品让打印店出打样确认，设计时选色尽量落在 CMYK 色域内。
对比度多少才算无障碍？
WCAG 标准要求正文文字与背景对比度至少 4.5:1，大字号（18pt+）3:1。用本工具取两个颜色的 RGB 值代入对比度公式即可验证，做官网和课件时值得花一分钟检查。