🎨 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.
Guide : Sélecteur de Couleur
Qu'est-ce que c'est ?
Le Sélecteur de Couleur est un outil visuel permettant de choisir, convertir et explorer des couleurs. Il supporte les formats HEX, RGB, HSL et HSV.
Il facilite la cohérence des couleurs dans vos projets web en fournissant toutes les valeurs de format dans une seule interface.
Comment utiliser
- Utilisez la palette visuelle pour choisir une couleur.
- Ou entrez directement une valeur HEX, RGB ou HSL.
- Copiez la valeur dans le format souhaité.
- Utilisez les variations de teinte pour explorer des palettes similaires.
Conseils professionnels
- Utilisez HSL pour les animations CSS — les transitions de teinte restent naturelles.
- Vérifiez toujours le contraste de vos couleurs pour l'accessibilité (WCAG AA : ratio 4.5:1).