Colour & Design Tools

Colour Picker: Get Hex Codes and Build Accessible Palettes

Free colour picker with eyedropper. Get the hex, RGB, HSL and OKLCH code of any colour on screen or in an image, generate palettes and shades, and check WCAG contrast ratios.

Free, no sign-upRuns in your browserNothing uploaded

#4C55E2

Hex colour

Accepts hex, rgb(), hsl(), oklch(), lab() or a CSS colour name.

Picker

Notations

HEX#4C55E2

RGBrgb(76, 85, 226)

HSLhsl(236, 72%, 59%)

HSVhsv(236, 66%, 89%)

CMYKcmyk(66%, 62%, 0%, 11%)

OKLCHoklch(0.53 0.21 274)

CIELABlab(42.35 31.73 -74.41)

Sample colours from an image

Works in every browser, including those without the eyedropper API. Drop an image, then click a pixel - or extract the dominant colours at once.

or drop one here

Contrast checker

WCAG 2.1 relative luminance, with APCA for teams moving toward WCAG 3.

Foreground

Background

The quick brown fox

5.67:1

APCA Lc −83.1 · Minimum for body text

Normal text (AA)4.5:1
Large text (AA)3:1
UI components & icons3:1
Normal text (AAA)7:1
Large text (AAA)4.5:1

Palette

Neighbours on the wheel. Calm and cohesive by construction.

Shade scale

11 steps generated in OKLCH and gamut-mapped back to sRGB, so the hex you copy is the colour you see.

Harmony: Analogous

Hue rotations applied in a perceptual space, not HSL.

This tool answers the question every designer asks eventually: what is the hex code of that exact colour? There are two ways to find out. The eyedropper reads the colour directly from anywhere on your screen, which works on a canvas, a photo, a video frame or another application. The image sampler does the same thing but scoped to one image you load here, which is useful when you want to pull a whole palette out of a logo or a photograph.

Once you have a colour, this page becomes a small colour studio. It shows the value in every notation you will actually meet in code - hex, RGB, HSL, HSV, CMYK, OKLCH and CIELAB - and it explains what OKLCH is for, because perceptual colour spaces are the difference between a generated palette that looks harmonious and one that looks muddy. From a single hex it can build an eleven-step shade scale the way Tailwind does, plus complementary, analogous, triadic and tetradic harmony schemes.

The contrast checker is the part that matters most for real work. It implements WCAG 2.1 relative luminance and reports the exact ratio against every AA and AAA threshold, plus an APCA lightness contrast value for teams moving toward WCAG 3. It also simulates protanopia, deuteranopia and tritanopia, which is how you catch the pairing that looks fine to you and unreadable to roughly one in twelve men.

Colour Picker & Palette Generator features

Screen eyedropper plus universal image sampler

Uses the native EyeDropper API where available and falls back to sampling an image you load, so the tool is never a dead button.

Dominant colour extraction

Downsamples the image and clusters the pixels into five to eight representative colours, ranked by how much of the image each one covers.

Nine colour notations at once

Hex, RGB, HSL, HSV, CMYK, OKLCH, CIELAB, XYZ and Pantone-style approximations, all live-linked to the current colour.

Tailwind-compatible shade scale

Generates the 50 to 950 scale by sweeping OKLCH lightness, then gamut-maps each result back into sRGB so the emitted hex is the colour you actually see.

Six harmony schemes

Complementary, analogous, triadic, tetradic, split-complementary and monochrome, computed on the colour wheel in a perceptual space rather than naive HSL.

WCAG 2.1 and APCA contrast

Relative-luminance ratios for AA and AAA at normal and large text sizes and 3:1 for UI components, alongside APCA Lc for WCAG 3 readiness.

Colour blindness simulation

Protanopia, deuteranopia and tritanopia previews built from the Brettel/Viénot matrices, plus grayscale, so you can check a palette before your users find the problem.

Export to CSS, SCSS, Tailwind, SVG or JSON

One-click output for CSS custom properties, SCSS variables, a Tailwind v4 @theme block, an SVG swatch grid, and JSON for Style Dictionary.

Saved palettes

Palettes are stored in your browser only. Nothing is sent anywhere, and clearing site data removes them permanently.

How to use the Colour Picker & Palette Generator

Pick a colour from your screen
Click Pick from screen and click anywhere on the page or another window. The eyedropper is supported in Chromium-based browsers; on Safari and Firefox use the image sampler below, which works everywhere.
Or load an image and sample it
Drop an image into the sampler, then click the pixel you want. You can also click Analyse image to extract the five to eight dominant colours automatically, with the share of the image each one covers.
Read the value in any notation
The panel shows hex, RGB, HSL, HSV, CMYK, OKLCH and CIELAB side by side. Click any of them to copy it. Change the format with the hex, RGB, HSL or OKLCH input to type a value directly.
Build a palette
Generate a Tailwind-style shade scale, or a harmony scheme based on complementary, analogous, triadic, split-complementary or tetradic relationships. Every swatch is one click to copy and one click to make current.
Check it is readable
Set a foreground and background colour to get the WCAG 2.1 ratio and the APCA Lc value, with a plain pass/fail for normal text, large text and UI components. Toggle the colour-blindness simulations to check whether the pairing survives.
Export it
Copy the palette as CSS custom properties, SCSS variables, a Tailwind v4 @theme block, an SVG swatch grid or JSON for a design-token pipeline.

Frequently asked questions

What is the hex code of this colour?

Click the swatch to pick a colour, or use the eyedropper to sample it from your screen or from an image. The hex value appears at the top of the notation panel and copies to your clipboard on a single click.

Why do I get 8-digit hex codes like #3B82F680?

That is hex with an alpha channel: the last two digits are opacity from 00 to FF. ToolForge shows hex with alpha whenever the current colour is translucent, because dropping the alpha silently changes how the colour renders.

What is OKLCH and why should I care?

OKLCH is a perceptually uniform colour space: a fixed step in lightness looks like the same step to your eye everywhere on the wheel, which is not true of HSL. That is why it is the right space for generating shade scales and gradients, and why the shade ramps here look evenly stepped. You can still paste the hex output into any project.

What contrast ratio do I actually need?

For WCAG 2.1 AA, body text needs 4.5:1 and text at 18pt or 14pt bold needs 3:1. UI component borders, icons and focus rings need 3:1 against their background. AAA wants 7:1 and 4.5:1 respectively. Aim for at least 4.5:1 anywhere users will be reading more than a label.

What is APCA and should I use it instead of WCAG 2.1?

APCA is the perceptual model being developed for WCAG 3 and is what most new accessibility tooling will report. It is not yet a published recommendation, so audits and legal requirements still key off WCAG 2.1. Use APCA as an additional signal and keep meeting 2.1 AA.

Why does the eyedropper not work in my browser?

The native EyeDropper API is only implemented in Chromium-based browsers such as Chrome and Edge. Safari and Firefox users should use the image sampler instead: drop an image into it and click a pixel. It works identically everywhere.

Are my saved palettes sent anywhere?

No. Saved palettes live in your browser's localStorage on your own device. Nothing is uploaded, and the palettes disappear if you clear your browsing data.

How do I check a colour pair that is still being designed?

Enter the foreground and background values in the contrast panel directly instead of using the eyedropper. The panel composites translucent colours against the backdrop first, because an alpha colour has no meaningful contrast ratio on its own.

CSS Previewer & Design PlaygroundPaste CSS and watch it render. Build gradients and shadows by dragging.Open Image ConverterConvert images between formats with drag and drop. Nothing is uploaded.Open HTML & CSS Snippet GeneratorBuild clean HTML and CSS boilerplate from a form and copy it straight into your project.Open

Every tool, in one place

ToolForge has colour picker & palette generator plus a growing set of image, colour and developer tools. All of them run locally in your browser, free and without an account.

Browse all tools