Tool
Color Picker
Drag the canvas to pick a color visually. Adjust the hue slider, then copy the HEX, RGB, or HSL value in one click.
Hue — 217°
#1D70F5rgb(29, 112, 245)hsl(217, 92%, 54%)Pick a color in three steps
No sign-up. Works instantly in any browser.
Open the color picker
Click the color swatch to open the browser's native color picker.
Select your color
Use the color wheel or enter a value directly.
Copy in any format
Copy as HEX, RGB, or HSL for use anywhere.
Color Picker
HEX, RGB, and HSL
Get your color in all three formats instantly.
Visual color picker
Browser's native color wheel — pick visually instead of entering numbers.
100% private
No color data sent anywhere. Everything runs locally.
About the Color Picker
The color canvas uses the HSV model — hue on the slider, saturation left to right, brightness top to bottom. Dragging to the top-right gives you the most vivid version of any hue. Dragging down darkens it. Dragging left desaturates it toward white or grey.
HEX is what you paste into CSS and HTML — color: #1c60f6;. RGB is the numerical form used in image editors and some programming libraries. HSL is what you use when you want to programmatically lighten or darken a colour in CSS without recalculating by hand.
All values update live as you pick. Nothing is sent to a server — the entire tool runs in your browser.
CSS supports all three output formats directly: color: #1c60f6, color: rgb(28, 96, 246), and color: hsl(221, 93%, 54%). HSL is particularly useful for building design systems because adjusting the lightness value creates consistent light and dark variants of any colour.
Need to convert between formats? HEX to RGB → or RGB to HEX →
Explore more free tools: HEX to RGB · RGB to HEX · JPG to PNG
More Color Tools
Frequently Asked Questions
HEX vs RGB vs HSL?
HEX is compact for CSS (#FF6B00). RGB specifies channels 0–255 — useful in code. HSL (Hue, Saturation, Lightness) is more intuitive for adjusting colors — change L to lighten without affecting the hue.
Can I pick a color from a website or image?
Not directly — use your browser's DevTools eyedropper (Firefox/Edge) or an extension like ColorZilla for screen color picking.
What is HSL?
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Adjusting L makes a color lighter or darker without changing the hue.
Can I use these color codes in CSS?
Yes. color: #FF6B00, color: rgb(255, 107, 0), and color: hsl(25, 100%, 50%) are all valid CSS in all modern browsers.