Dev Tools, 7 tools

Converters, 4 tools

Text Tools, 5 tools

Color Tools, 2 tools

Generators, 3 tools

Image Tools, 4 tools

PDF Tools, 6 tools

Calculators, 4 tools

Open tools · 0

About

Color Picker

Drag across the colour square, pick straight from the screen, or paste a colour written any way at all, and read it back in eleven formats, each a click to copy. A colour outside what an ordinary screen can show is brought to the nearest one as CSS Color 4 specifies, and its contrast as text is measured against WCAG.

What it does

  • A colour square with hue and opacity sliders, and the eyedropper in Chrome and Edge.
  • Pasted colours in any form: hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3), the 148 CSS names, hsv(), cmyk(), 0xAARRGGBB.
  • Read back as HEX, RGB, HSL, HSV, HWB, OKLCH, OKLab, CIE Lab and LCH, Display P3 and CMYK, with the nearest CSS name.
  • Nine tints and nine shades.
  • WCAG 2 contrast on white, on black and on a background of your choosing: AA, AAA and large text.
  • A wide-gamut colour mapped into sRGB, with a note saying so.
  • The colours you picked kept for the visit; Make a palette hands one to the Palette Maker.

How to use it

  1. Pick a colour on the square, with the eyedropper, or by pasting one.
  2. Copy it in the format your code wants.
  3. Check its contrast against the background it will sit on.
  4. Press Make a palette to build from it.

What it does not do

  • Colours from a picture: the Palette Maker finds a photo’s main colours.
  • A colour in the address bar: the address carries the window, not what is in it.
  • APCA contrast: it belongs to WCAG 3, which is still a draft, and audits check WCAG 2.

Questions

What is OKLCH?

A way of writing a colour by lightness, chroma and hue that follows how the eye sees, so two colours with the same L look equally light. CSS supports it, and Tailwind 4 writes its palette in it.

Why did my Display P3 colour change?

Because sRGB cannot show it. It was mapped to the nearest colour that can be shown, by reducing chroma as CSS Color 4 specifies, and the tool says when it does that.

What contrast do I need?

4.5:1 for normal text and 3:1 for large text at level AA; 7:1 and 4.5:1 at AAA.

Does the eyedropper work in Firefox or Safari?

No. The EyeDropper API is in Chrome, Edge and Opera only; in other browsers the tool says so.

Everything here runs in your browser. Nothing you type, paste or open is uploaded, and there is no account and no queue. How that works.

For one job

  • HEX to RGB: A hex colour code read as rgb() or rgba(), short codes and alpha included.
  • RGB to HEX: An rgb() colour as a hex code, six digits or eight with alpha.
  • HEX to HSL: A hex colour code as hsl(), exact enough to come back to the same hex.

Often used with

All toolsAbout utilbrewPrivacy