Free · No signup · Works in your browser

The right colour,in every format.Instantly.

Pick a colour and get its HEX, RGB and HSL values at once — then build a palette around it.

Check text contrast against WCAG before you publish, and copy any value in one click.

Free for every designer, developer and student.

Pick a colourBrowse all 22 tools
4
colour tools on one page
3
formats — HEX, RGB, HSL
AAA
WCAG contrast levels checked
0
accounts or uploads

The tool

Work with colour

Color Picker & Converter

Pick a color, get HEX, RGB and HSL — all linked live.

RGB
R45
G109
B168
HSL
H209
S58%
L42%

HEX

#2d6da8

RGB

rgb(45, 109, 168)

HSL

hsl(209, 58%, 42%)

Palette Generator

Build shade, complementary, triadic and analogous palettes.

Tip: click any swatch to copy its HEX.

Contrast Checker

Check WCAG AA / AAA contrast between two colors.

This is how your text looks

on this background color.

5.43:1

Contrast Ratio

✓ AA Normal✓ AA Large✕ AAA Normal✓ AAA Large

Privacy-first: your files are processed in your browser and never uploaded. The few tools that need a server — running C, C++, Java or Python code, reading a public web page, or a speed test — send only what you enter for that job.

Who it's for

Made for the people who actually use it.

  1. Designers

    The pain

    Copying a colour from one app to another means converting HEX to RGB by hand and hoping the shade matches.

    The outcome

    Every format side by side, plus shades and matching palettes, so your posters, logos and posts stay on-brand.

  2. Web developers

    The pain

    The client sends a HEX code, the CSS needs HSL, and nobody knows whether grey text on white is readable.

    The outcome

    Convert in a click and confirm the contrast ratio passes AA or AAA before the page goes live.

  3. Students

    The pain

    Design and web assignments ask for colour schemes, but picking colours that look good together is guesswork.

    The outcome

    Complementary, triadic and analogous palettes worked out for you — learn the theory by seeing it.

How it works

Three steps.
That's the whole manual.

Pick a colour
  1. 01

    Pick a colour

    Use the colour picker or type any HEX, RGB or HSL value — every other format updates as you go.

  2. 02

    Build a palette

    Generate shades, complementary, triadic or analogous colours from your base colour.

  3. 03

    Check and copy

    Test text and background colours for WCAG contrast, then click any value to copy it.

Features

Everything you need.
Nothing you don't.

6 things it does well — and no settings page to get lost in.

  • Live colour picker

    Choose visually or paste a code — the swatch and all values change together.

  • HEX ↔ RGB ↔ HSL

    Convert between the three formats web and design tools use, in either direction.

  • Palette generator

    Shades plus complementary, triadic and analogous schemes from one base colour.

  • WCAG contrast checker

    See the contrast ratio and whether it passes AA and AAA for normal and large text.

  • Click to copy

    Copy any HEX, RGB or HSL value straight into Figma, Canva or your CSS.

  • Private by design

    Everything is worked out in your browser — nothing is sent to a server.

FAQ

Questions,
answered.

6 things people ask before they use the Color Picker.

Still stuck? Talk to us or message us on WhatsApp.

Keep going

21 more tools.
Zero signups.

Images, PDFs, QR codes, code, design — every tool runs right here in your browser, free forever.

Explore all tools
View courses

Try next

Free · No signup

More free tools

Browse all 22 tools

Want to build tools like these? Learn web development, Python and AI at our Patna centre.

Explore courses
CallWhatsAppEnquire