KitJade
Images & DesignRuns in your browserNew

Color Picker

Convert colours and check text contrast.

Use the Color Picker tool

Runs in your browserUpdated Report a problem

What this color picker does

Color Picker converts a colour between HEX, RGB and HSL and reports the WCAG contrast ratio against both white and black. The ratio tells you whether dark or light text will be readable on that background.

Choose a colour with the browser picker or type a value. The calculations use the standard sRGB relative-luminance formula and run entirely in this page.

Why use it

  • Move a colour between CSS formats without manual arithmetic.
  • Check whether a button colour can carry readable text.
  • Build a small consistent palette from a starting hue.

How to use it

  1. 1Pick a colour or type a hex value.
  2. 2Read the converted RGB and HSL values.
  3. 3Check both contrast ratios and the AA/AAA verdicts.
  4. 4Copy the value you need.

Worked examples

Brand blue

Input

#2f6fed

Output

RGB 47, 111, 237; HSL 219, 84%, 56%; white text passes normal-text AA.

Pale yellow

Input

#ffe066

Output

White text fails, black text passes; use dark text on this background.

Common mistakes

  • Judging contrast by eye on an uncalibrated screen.
  • Using a colour with a 3:1 ratio for body text; 4.5:1 is the normal-text AA threshold.
  • Forgetting that hover and disabled states also need readable text.

Frequently asked questions

What do AA and AAA mean?
They are WCAG conformance levels. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 and 4.5:1.
Does the picker sample colours from an image?
No. This tool converts and checks colours you choose. Use an image editor or the browser eyedropper for sampling.
Why do the HSL values differ from my design tool?
HSL conversion can round differently. The RGB values are the authoritative result for rendering.
Is anything uploaded?
No. The calculations are local.

Related tools

All tools

Color Palette Generator

Create harmonious colour palettes from one colour.

Runs locallyNew

CSS Gradient Generator

Build and copy CSS gradients visually.

Runs locallyNew

Favicon Generator

Generate PNG favicons and a multi-size ICO.

Runs locallyNew

Open Graph Image Generator

Make a 1200×630 social share image.

Runs locallyNew