Color Picker & Converter
Pick a colour and convert HEX, RGB, HSL, HSV & CMYK.
An online colour picker with a Google-style saturation/brightness square, hue & alpha sliders and a screen eyedropper. Read any colour instantly as HEX, RGB, HSL, HSV and CMYK — every field is editable, so it doubles as a two-way HEX to RGB to HSL converter. Runs fully in your browser — nothing is uploaded.
How to use Color Picker & Converter
Pick a color
Drag inside the saturation square and move the hue slider to choose any color instantly in your browser, with no upload or sign-up needed.
Use the eyedropper
Click the eyedropper to sample any pixel on your screen, or open the OS color picker to grab an exact shade from anywhere on your display.
Set transparency
Slide the lower alpha bar to add transparency, giving you the precise rgba opacity value alongside the solid hex color code.
Read every format
View your color at once as HEX, RGB, HSL, HSV and CMYK codes, making this free online color picker a fast two-way HEX to RGB to HSL converter.
Edit any value
Type or paste a value into any HEX, RGB or HSL field and press Enter to convert it instantly across all five color models.
Copy and reuse
Copy the exact color code you need and revisit your recent swatches, which are saved locally in your browser for quick reuse later.
Frequently asked questions
How do I convert HEX to RGB?
Type or paste a hex code in the HEX field — the RGB, HSL, HSV and CMYK values update instantly. You can also edit any of those fields and the rest follow, so it works as a two-way HEX ⇄ RGB ⇄ HSL converter.
How do I pick a colour from my screen?
Click the eyedropper button and then click anywhere on your screen to sample that exact pixel's colour. The picker fills in the HEX, RGB, HSL, HSV and CMYK values for you, ready to copy.
What's the difference between HSL and HSV?
Both start from hue. HSL uses saturation + lightness (50% lightness is the pure colour); HSV uses saturation + value/brightness (100% value is the pure colour). HSV maps naturally to the picker square.
What is CMYK used for?
CMYK (cyan, magenta, yellow, key/black) is the subtractive model used by printers. The percentages here give you a starting point for print work, though exact print colour also depends on the paper and colour profile your printer uses.
Does the eyedropper work in every browser?
The screen eyedropper uses the EyeDropper API, available in Chromium browsers (Chrome, Edge, Opera). Elsewhere you can still use the OS colour picker button.
Is my data uploaded anywhere?
No. Every conversion happens in your browser with JavaScript — nothing you pick is sent to or stored on a server.
Related tools — Color tools
- Color Palette Generator — Generate harmonious colour palettes from any base colour.
- CSS Gradient Generator — Build linear, radial & conic CSS gradients and copy the code.
- Color Contrast Checker (WCAG) — Check text/background contrast against WCAG AA & AAA.
- Material Design Colors — The full Material Design palette with hex & RGB.
- Tailwind CSS Colors — The full default Tailwind palette with hex & RGB.
- Tailwind Color Generator — Turn one base colour into a full 50–950 Tailwind shade scale.
- All HTML Color Codes — Every CSS named colour with its HEX, RGB & HSL values.