Color Picker & Converter
Pick any color and convert between HEX, RGB, and HSL formats. All values sync in real time with a live color preview.
CSS Values
#3b82f6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
How It Works
This color picker lets you select and convert colors between three common formats used in web development and design:
- HEX: A 6-digit hexadecimal representation prefixed with #. Each pair of digits represents Red, Green, and Blue channels (00–FF).
- RGB: Defines a color by its Red, Green, and Blue components, each ranging from 0 to 255.
- HSL: Represents color using Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). This model is often more intuitive for adjusting colors.
All inputs are synchronized — changing any value instantly updates the others and the preview swatch. Use the native color picker or type values directly.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX is a 6-character hexadecimal code (e.g., #3b82f6) commonly used in web development. RGB defines colors by Red, Green, and Blue channel values (0–255). HSL uses Hue (0–360°), Saturation (0–100%), and Lightness (0–100%), which is often more intuitive for color selection.
How do I convert HEX to RGB?
Split the 6-character HEX code into 3 pairs (e.g., #3b82f6 becomes 3b, 82, f6). Convert each pair from hexadecimal to decimal: 3b=59, 82=130, f6=246. The result is rgb(59, 130, 246).
What is HSL color model?
HSL stands for Hue, Saturation, and Lightness. Hue is a degree on the color wheel (0=red, 120=green, 240=blue). Saturation is how vivid the color is (0%=gray, 100%=full color). Lightness is brightness (0%=black, 50%=pure color, 100%=white).
Can I use the color values in CSS?
Yes! All three formats are valid CSS color values. Use hex (#3b82f6), rgb(59, 130, 246), or hsl(217, 91%, 60%) directly in your stylesheets. Click the Copy buttons to copy any format to your clipboard.