色值转换器
HEX ↔ RGB ↔ HSL 互相转换,立即预览颜色
HEX ↔ RGB ↔ HSL 互相转换,立即预览颜色
在网页设计和开发中,颜色通常有三种主流表达方式:HEX(十六进制)、RGB(红绿蓝)和HSL(色相饱和度亮度)。不同场景下可能需要不同格式,本工具帮你轻松互转。
HEX 色值 `#RRGGBB` 中的每两位十六进制数代表一个颜色通道。转换公式如下(以 `#3b82f6` 为例):
将 RGB 值归一化到 0~1,再计算亮度、饱和度和色相。
给定 H, S, L,首先计算中间值,再得出 RGB。
请检查格式是否正确:必须是以 `#` 开头,后跟 6 位十六进制字符(0‑9, A‑F),例如 `#ff0000`。支持缩写格式(如 `#f00`),会自动扩展为6位。
RGB 数值必须是 0‑255 的整数;HSL 的色相为整数,饱和度和亮度可以是 0‑100 的整数或小数。
当你需要动态调整颜色的明暗或饱和度时(如 hover 效果、主题切换),HSL 比 HEX/RGB 更符合人类的直觉,可以只修改亮度值而不改变色相。
Convert between HEX, RGB, and HSL instantly
Colors in web development are commonly expressed in three major formats: HEX (hexadecimal), RGB (red‑green‑blue), and HSL (hue‑saturation‑lightness). This tool converts any supported format into all three.
A HEX color like #3b82f6 consists of three pairs: RR, GG, BB. Each pair is a hexadecimal number.
Make sure it starts with `#` and is followed by exactly 6 hexadecimal characters (0‑9, A‑F). The 3‑digit shorthand (e.g. `#f00`) is also accepted and automatically expanded.
RGB values must be integers in the 0‑255 range. For HSL, hue is an integer, while saturation and lightness can be decimals or percentages.
HSL is more intuitive when you need to create color variations — such as lighter/darker shades for hover effects — because you can keep the hue unchanged and only adjust lightness or saturation.