🎨 Color Picker — HEX RGB HSL Converter
Pick colors visually and instantly convert between HEX, RGB, and HSL formats. Copy CSS-ready values with one click. Free online color picker and converter for designers.
Pick Color
Click to open color picker
HEX
#
RGB
R
G
B
HSL
H
S%
L%
100%
Selected
Complementary
Tints (lighter)
Shades (darker)
CSS Output
How to Use
1
Pick a color
Click the color swatch to open the browser color picker, or type directly into HEX, RGB, or HSL fields.
2
All formats update
All input fields and the preview update in real-time as you change any value.
3
Copy CSS values
Click any copy button in the CSS Output section to copy your color in any CSS format.
Frequently Asked Questions
What is HEX color format?
HEX (hexadecimal) color format represents colors as a 6-digit code prefixed with #, like #7c6af7. Each pair of digits (00–FF) represents Red, Green, and Blue channel intensity.
What is the difference between RGB and HSL?
RGB defines colors by Red, Green, Blue channel values (0–255). HSL uses Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) — more intuitive for human perception and easier to create color variations.
How do I convert HEX to RGB?
Split the HEX code into three pairs, convert each from hexadecimal to decimal: #7c6af7 → R:124, G:106, B:247. This tool does it instantly as you type.
Which color format should I use in CSS?
Use HEX for static colors in CSS (most common). Use HSL when you need to programmatically create lighter/darker variants. Use RGB when you need transparency (rgba()).
How do I pick accessible colors?
Ensure sufficient contrast between text and background. WCAG AA requires a 4.5:1 contrast ratio for normal text. Tools like our color picker help you find complementary colors.
完整指南：颜色选择器
什么是颜色选择器？
在颜色格式间转换：HEX（#7c6af7）、RGB（rgb(124,106,247)）、HSL（hsl(248,90%,69%)）和CSS值。手动转换容易出错——此工具确保所有格式的精确值。
如何使用
- 点击颜色区域或使用可视化选择器选择颜色。
- 或在任意字段输入值——其他字段自动更新。
- 复制所需格式。
专业技巧
- HSL非常适合创建颜色变体：调整L%来变亮/暗，调整S%来改变饱和度。
- 需要透明度时使用
rgba()。 - 将品牌颜色存储为CSS变量：
--color-primary: #7c6af7。