This color picker starts with a visual swatch, then keeps the precise numbers close by. You can paste a CSS hex value such as #3366cc, nudge red, green, blue and alpha channels, or tune hue, saturation and lightness for design-system work. No color values are uploaded - the conversions happen locally in JavaScript.
Free Color Picker
Runs entirely in your browser - no upload, no sign-up.
Selected#3366cc
HSL220, 60%, 50%
HEX
#3366ccHEX8
#3366ccffRGB
rgb(51, 102, 204)HSL
hsl(220, 60%, 50%)HSV
hsv(220, 75%, 80%)CMYK
cmyk(75%, 50%, 0%, 20%)What is a color picker?
A color picker is a tool for choosing an exact digital color and copying its values for design or code. Use the swatch, HEX field, RGB sliders or HSL controls, then copy HEX, RGB, HSL, HSV or CMYK values instantly. Everything runs in your browser.
How to use
- 1Pick or paste a color. Click the large swatch to open your browser color picker, or paste a 3-, 4-, 6- or 8-digit hex value into the HEX field.
- 2Adjust the channels. Use the RGB sliders for red, green, blue and alpha, or edit hue, saturation and lightness when you want a more design-friendly control.
- 3Copy the format you need. Copy HEX, HEX8, RGB, HSL, HSV or CMYK with one click. The preview and every output update live.
Who it's for
- Front-end developers copying CSS-ready HEX, RGB and HSL values while building interfaces.
- Designers tuning a brand color by channel instead of guessing in a graphics app.
- Marketing teams matching campaign colors across email builders, docs and social assets.
- Students and creators learning how RGB, HSL, HSV and CMYK describe the same color.
FAQ
Is this color picker free?
Yes. The color picker is free, has no sign-up and has no usage limit. Open the page, choose a color and copy the format you need.
Are my colors uploaded anywhere?
No. The picker and conversions run in your browser with plain JavaScript. Your selected colors are not sent to a server.
Which color formats can I copy?
You can copy HEX, 8-digit HEX with alpha, RGB or RGBA, HSL or HSLA, HSV and CMYK. The tool keeps them in sync as you edit.
Can I paste a hex color?
Yes. Paste 3-digit, 4-digit, 6-digit or 8-digit CSS hex values, with or without the # symbol. Shorthand values expand using normal CSS rules.
What is HEX8?
HEX8 is an 8-digit hex color where the last pair stores alpha. For example, #3366cc80 is the same blue with about 50% opacity.
Should I use RGB or HSL in CSS?
Use RGB when you need exact channel values or alpha with rgba(). Use HSL when you want to create tints, shades or related UI states by changing saturation and lightness.