Pick any color or pick directly from an image. Convert between HEX, RGB, HSL, HSB. Includes WCAG contrast checker and palette generator.
Drop an image or click to upload
PNG, JPG, WebP, GIF, SVG — any image
Hover to preview · Click any pixel to pick its color → switches to Color Picker tab
This Color Picker and Converter lets you choose any colour, read it in HEX, RGB, HSL and HSB at the same time, and copy whichever format you need — all instantly, with no sign-up and no installs.
Colour values look different depending on where they live. CSS and design tools speak HEX and RGB, while colour wheels and editing apps lean on HSL or HSB. Juggling those formats by hand is slow and error-prone, so this tool keeps every representation in sync: change one field and the swatch, the native picker, and the other three formats all update at once. You also get a built-in WCAG contrast check against white and an auto-generated set of tints, shades, complementary and analogous swatches, plus a From Image mode that lets you upload a photo and click any pixel to grab its exact colour. People use it to:
Everything runs locally in your browser. Images you drop in are processed on your own device with the canvas API, and no colour, file, or pixel data is ever uploaded to a server, so you can pick colours from private mockups and unreleased brand assets with complete confidence.
HEX (#FF5733) is a 6-digit hex shorthand for RGB. RGB (rgb(255,87,51)) specifies red, green, blue from 0–255. HSL (hsl(11,100%,60%)) uses Hue, Saturation, Lightness — more intuitive for perceptual adjustments.
HSL's Lightness at 100% is white. HSB's Brightness at 100% is a fully saturated colour, not white. HSB is what Figma and Photoshop use; HSL is what CSS uses.
Use rgba(r,g,b,a) with an alpha 0–1, or an 8-digit HEX like #FF573380, or modern hsl(11 100% 60% / 50%).
Paste the HEX value into the HEX field and the RGB, HSL and HSB fields update automatically — there is nothing to submit. Each conversion is two-way, so you can just as easily type an rgb() or hsl() string and read back the matching HEX. Then press Copy beside whichever format you want to use.
HSB stands for Hue, Saturation, Brightness, and it is exactly the same model as HSV (Hue, Saturation, Value) — the two names describe an identical colour space. Figma, Photoshop and most design apps label it HSB, while some other tools call it HSV. This picker shows it as HSB so the numbers match what you see in your design software.
Yes. Open the From Image tab and drop in a PNG, JPG, WebP, GIF or SVG. Hover to preview each pixel with a magnifier, then click to capture that colour and jump straight to the picker. The tool also extracts a palette of the most common colours so you can grab a whole scheme in one go.
No. All colour conversion and image sampling happens locally in your browser using the canvas API. Nothing you type or upload leaves your device, so it is safe to pick colours from private mockups, unreleased branding, or confidential screenshots.