Coderspace

Online Color Picker

Pick a colour or take one from an image, then copy it as HEX, RGB, HSL, OKLCH or any other format with one click. Harmonies, a 50-950 scale and the WCAG contrast ratio are all on the same page. Images you load never leave your browser.

Formats

Take a colour from an image

Drag in an image or choose one, then click anywhere on it to take that pixel's colour. The image is processed in your browser and is never uploaded.

Drag an image in, or click to choose one

Colour harmonies

Tints

Shades

Colour scale

The 50-950 steps a design system expects. The lightness steps are spaced evenly in OKLCH, so the shades stay balanced against one another.

Contrast and accessibility

The WCAG 2.1 contrast ratio. For normal text AA asks for 4.5 and AAA for 7; for text above 18pt, or bold above 14pt, AA asks for 3 and AAA for 4.5.

How do you use the colour picker?

  1. Choose the colour

    Start by clicking in the square, or by typing a HEX, RGB or HSL value or a CSS colour name. The hue and opacity sliders apply immediately.

  2. Or take one from an image

    Drag an image in and click the spot you want; a magnifier shows which pixel you are on. The image is processed in your browser and never uploaded.

  3. Copy the format you need

    HEX, RGB, HSL, CMYK, LAB, OKLCH and the rest are all computed at once, and every row has its own copy button.

  4. See the palette and the contrast

    Harmonies, tints and shades, the 50-950 scale and the WCAG contrast verdict are all waiting on the same page.

Which colour format should you use, and when?

Format How it is written When it helps
HEX #7B35E2 The common currency of the web. Short, works everywhere, and copies straight into any design tool.
RGB rgb(123, 53, 226) When you need the channels separately, or want to do arithmetic on them in JavaScript.
HSL hsl(266, 75%, 55%) When you want a colour slightly lighter or less saturated — you only have to change one number.
HSV / HSB hsv(266, 77%, 89%) The notation design tools show in their own pickers. Photoshop and Figma both use it.
CMYK cmyk(46%, 77%, 0%, 11%) A rough equivalent for talking to a printer. Real print work needs the press's own ICC profile.
LAB / LCH lab(45.6% 62.8 -74.5) When you need to measure how different two colours actually look. It is perceptually uniform.
OKLCH oklch(0.5385 0.2337 300.14) What modern CSS prefers. Change the lightness and the colour lightens by as much as you expected — which HSL does not manage.

Why OKLCH rather than HSL?

Raise the lightness in HSL from 50% to 70% and you expect every colour to lighten by the same amount. It does not. hsl(60, 100%, 50%) is a dazzling yellow while hsl(240, 100%, 50%) is a navy that reads as almost black — and both have the same lightness value. This is why a scale built in HSL comes out inconsistent from one hue to the next.

OKLCH was designed to fix exactly that: its lightness axis is scaled to how the eye actually perceives lightness, so two colours with the same L really do look equally light. That is why the 50-950 scale on this page is computed in OKLCH — pick yellow or navy and the steps stay balanced either way.

One caveat: OKLCH can describe more colours than a screen can show. When the saturation you asked for does not exist at that lightness and hue, this tool lowers the saturation to the edge of what the screen can display rather than letting the channels clip and the hue shift.

What does the contrast ratio mean?

The contrast ratio expresses the difference between two colours' relative luminance as a number between 1:1 and 21:1. White on black is 21:1; a colour against itself is 1:1. WCAG 2.1 asks for at least 4.5:1 (AA) or 7:1 (AAA) for normal text, and 3:1 (AA) or 4.5:1 (AAA) for text above 18 point or bold above 14 point.

These thresholds are not a box-ticking exercise: low-contrast text becomes unreadable for anyone with reduced visual acuity, and for anyone looking at their phone in sunlight. If your brand colour does not clear 4.5 on white, do not use it as a text colour — use it as a button background with white on top.

The calculation looks only at the colours, not at the typeface. A thin font can be hard to read even at a ratio that clears the threshold; the number is a floor, not a target.

Key features

Ten formats, one click each

HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH, OKLAB and the integer value. Every row has its own copy button.

Take a colour from an image

Drag an image in and click on it. A magnifier shows exactly which pixel you are over, and the dominant colours are listed separately.

Screen eyedropper

In browsers that support it you can take a colour from anywhere on screen — another tab, or even another application.

WCAG contrast check

The ratio of your colour against any background you choose, with the AA and AAA verdict for normal and large text separately.

A ready 50-950 scale

The steps a design system expects, computed in OKLCH and exported as CSS variables, a Tailwind config, SCSS or JSON.

Your image stays with you

The image you load is never sent to a server; it is read in the browser and gone without trace the moment you remove it.

FAQ

Drag the image onto the area on this page or click to choose one, then click the spot whose colour you want. A magnifier follows the pointer so you can see exactly which pixel you are on. The image is processed in your browser: it is never uploaded and never stored.

HEX writes a colour's red, green and blue components as two hexadecimal digits each: #7B35E2 means 123, 53 and 226. Each digit runs from 0 to F, so each channel covers 0 to 255. In the eight-digit form the last two digits carry the opacity.

RGB describes a colour as amounts of three light channels — natural for a machine, unintuitive for a person. HSL splits it into hue, saturation and lightness instead. To make a colour slightly lighter you would have to change all three numbers in RGB; in HSL you raise one.

OKLCH is a modern colour space whose lightness axis is scaled to human perception. In HSL a yellow and a navy with the same lightness value look nothing alike in brightness; in OKLCH they do not. That makes it reliable for generating tonal scales and theme colours, and modern CSS supports it.

WCAG 2.1 asks for at least 4.5:1 (AA) or 7:1 (AAA) for normal text, and 3:1 (AA) or 4.5:1 (AAA) for text above 18 point or bold above 14 point. The contrast panel on this page compares your colour against any background you choose and reports all four thresholds separately.

It is the colour directly opposite yours on the colour wheel — 180 degrees away in hue. Placed side by side the pair gives the strongest possible contrast, which makes it useful as an accent, though it can be tiring across large areas. Analogous and triadic harmonies are gentler.

One brand colour is never enough in a design system: you need much lighter shades for backgrounds and much darker ones for text. The 50-950 steps give you those under a standard naming. The scale here is computed in OKLCH, so the steps stay balanced whichever colour you start from.

No. The CMYK here is the simple arithmetic conversion from the screen colour that every colour picker gives. What actually comes off a press depends on the paper, the ink and the press's ICC profile; for an exact match you need the printer's own profile.

In browsers that support it, yes: the eyedropper button beside the colour value box lets you take a colour from anywhere on screen, including another tab or another application. It works in Chromium-based browsers over a secure connection; where it is unavailable the button does not appear at all.

No. This tool does all its colour maths in your browser, and the page makes no request to the server for any colour or image. An image you load is held in memory only while the tab is open; remove it or close the page and it is gone without trace.

Easily get your dream job!

Sign Up
Sign up Easily
Show your programming skills
Evaluate the offers

More free developer tools

Pomodoro Timer HTML Minifier Text Compare Cron Expression Generator Image Compressor Url Decoder & Encoder JSON Validator & Formatter Regex Tester Github ReadMe Generator Html Formatter Base64 Encoder/Decoder Password Generator XML Formatter & Validator Unix Timestamp Converter CSS Minifier JWT Decoder Hex to Decimal Converter IP Lookup Yaml Validator CIDR Calculator UUID Generator HTML Editor DNS Lookup Online Python Editor SQL Formatter CSS Gradient Generator SQL Validator GitHub Score Checker Typing Speed Test Merge & Split PDF Resume Builder QR Code Generator JavaScript Minifier Dead Pixel Test JSON to Excel Converter JSON Diff Word Counter