How to pick a colour and copy its codes in 3 steps
- Choose a colour — use the colour well, type a HEX value, or drag the RGB and HSL sliders.
- Read every format — HEX, RGB, HSL and HSV update together, instantly.
- Click to copy — click any value row (or any tint/shade step) to copy it and use it in your design, CSS or photo edit.
One colour, four languages
Designers, developers and photo editors all describe the same colour differently. HEX (#d4a017) is the shorthand used in web design and CSS. RGB lists how much red, green and blue light to mix — the language of screens. HSL and HSV describe a colour the way people think about it: a hue on the colour wheel, how vivid it is, and how light or bright it is. Converting between them by hand is error-prone; this tool keeps all four in sync while you experiment, and the tints-and-shades strip shows the same hue mixed toward white and toward black in even 20% steps — the fastest way to build a hover state, a border colour or a soft background that still belongs to the same family.
How it works
HEX is just RGB written in base 16: each pair of digits is one channel from 0 (00) to 255 (ff). HSL is computed from the largest and smallest RGB channels: lightness is their midpoint, saturation is the gap between them scaled by that midpoint, and hue is the angle on the colour wheel pointing at the dominant channel. HSV (also called HSB) uses the same hue, but measures saturation against the brightest channel and reports that channel directly as the value. All conversions run in your browser with the standard CSS colour maths — no image or colour ever leaves your device.
Worked example
Take the orange #FF6600. In RGB that is rgb(255, 102, 0) — full red, some green, no blue. The HSL conversion gives hsl(24°, 100%, 50%): a hue of 24° sits between red (0°) and yellow (60°), exactly where orange belongs, at full saturation and half lightness. HSV reports hsv(24°, 100%, 100%) — same hue, full saturation, full brightness, because the strongest channel (red) is at its maximum.
Frequently asked questions
Is this colour picker free?
Yes — completely free, with no signup and no limits. Click any value to copy it.
What is the difference between HSL and HSV?
They share the same hue. HSL lightness is the midpoint between the brightest and darkest channel, so 50% lightness is the pure colour. HSV value is simply the brightest channel, so 100% value is the pure colour at full brightness. Design tools differ: Figma shows HEX/RGB/HSL, Photoshop's picker is HSV-based.
Can I type a HEX code I already have?
Yes — type or paste any 3- or 6-digit HEX value (with or without the #) into the HEX box and press Enter. All other formats and both slider sets update at once.
What are tints and shades?
A tint is the colour mixed with white; a shade is the colour mixed with black. The strip under the picker moves in 20% steps, which is a practical recipe for matching hover, border and background colours.
Does this work for print colours (CMYK)?
This tool covers the screen colour models (HEX, RGB, HSL, HSV). CMYK conversion depends on the printer profile, so for print work use these values as a starting point and proof on paper.
More free photo tools
Compress photos to an exact KB size — 50KB, 100KB, 200KB.
Resize by pixels, cm or inches, with a print DPI setting.
Free crop plus ready ratios — 1:1, 4:3, passport and more.
Convert JPG, PNG and WebP both ways, with quality control.
Fix brightness, contrast and sharpness in seconds.
Turn a photo background white, blue or light grey.
Turn one or more photos into a single PDF file.
Add a text watermark — set size, colour, opacity, position or tile it.
Harmonious colour palettes from any base colour, in one click.
Check text and background colours against WCAG AA and AAA.
Build linear gradients and copy the CSS code instantly.