BrowserTools

Color Picker

HEX, RGB, HSL with shades and tints

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-09-21
Free Private No uploads
What is Color Picker?

Type or pick a colour and everything else is derived from it. The HEX field is the input; RGB and HSL are computed for you and shown read-only, each with its own copy button, and a three-digit shorthand such as #069 expands to #006699 on the way in. Below sit hue, saturation, lightness and the sRGB relative luminance WCAG is defined in terms of. A contrast panel paints the colour twice — once under white text, once under near-black — and reports the exact ratio along with whether it clears 4.5 to 1 for normal text or 3 to 1 for large text. Eleven swatches run from 90% lighter through the base colour to 80% darker, enough to build a whole interface ramp from one brand value. Three harmony swatches add the complement at 180 degrees and the neighbours at plus and minus 30.

Pick any color and get its HEX, RGB and HSL values, a full tint-and-shade scale, and complementary color — with one-click copy for every format.

Private Color Picker In Your Browser

Color Picker is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use Color Picker

1

Choose a colour with the native picker, or type a six-digit or three-digit hex value into the HEX field.

2

Read the derived RGB and HSL values, each with its own copy button, plus the hue, saturation, lightness and luminance tiles.

3

Check the Contrast panel for the ratio against white and near-black, and whether it passes AA for normal or large text.

4

Click a swatch in Tints & shades or Harmonies to make that value the new base colour.

Key Capabilities
  • Three-digit hex shorthand is expanded automatically, so #069 and #006699 produce identical values downstream.
  • Relative luminance uses the sRGB transfer function, matching the WCAG definition rather than a plain average of the channels.
  • Contrast is reported as a real ratio against both white and near-black, labelled AA pass, large-text-only or failing.
  • The ramp runs 90% lighter to 80% darker in eleven steps, and every swatch becomes the base colour when clicked.
Common Use Cases
  • A developer checks that body text on a new brand colour clears the 4.5 to 1 ratio before it goes anywhere near production.
  • A designer builds a hover and disabled ramp for a button from the darker percentages in the tints strip.
  • Someone matching a screenshot picks a colour, then checks the two analogous swatches to confirm the palette still holds together.
Clear Answers

Frequently Asked Questions

What counts as large text for the contrast rules?
WCAG treats 18 point as large, which is 24 CSS pixels, and any size above 14 point bold, which is about 18.66 pixels. Anything below those sizes is held to the 4.5 to 1 ratio instead of 3 to 1.
Why do the lighter and darker steps look uneven?
Tints interpolate each channel towards white and shades scale each towards black, which is linear in RGB and not in perceived lightness. A 50% tint therefore looks much lighter than a 50% shade looks dark — a consequence of how the two are constructed rather than a bug.
Is this the same colour space as the one in my design file?
For hex and rgb values, yes. HSL and the harmonies are computed from those channels directly, so a design tool using OKLCH may disagree with the lightness and the derived ramp even for the same hex. Convert at the start of a project and stay in one model.
What is a good contrast target for a UI?
Text on a background needs 4.5 to 1, large text 3 to 1, and interface components such as input borders 3 to 1. If a colour fails for body text you need a different pairing rather than a different shade of the same hue — moving lightness changes the contrast, the hue does not.