Color Picker

Pick a colour, get its codes, explore shades and harmonies, and check accessible contrast — all in one place.

FreeNo sign-upRuns in your browserMobile-friendly

Loading tool…

Need help with this tool or found a problem? WhatsApp support Email

What does the Color Picker do?

Use the colour picker or type a HEX value to get HEX, RGB, HSL and CMYK codes. Nine shades and tints at the same hue help you build UI palettes, and harmonies (complementary, analogous and triadic) suggest colours that work together.

The contrast checker compares your colour as text on any background using the WCAG 2.x formula and shows pass/fail for AA normal text (4.5:1), AA large text (3:1) and AAA (7:1).

How to use the Color Picker

  1. Pick a colour or type a HEX code.
  2. Copy the format you need.
  3. Click a shade or harmony to copy it.
  4. Choose a background colour to check contrast.

Examples

Accessible button

White text on #4F46E5 has a contrast of about 6.3:1 — passes AA for normal text.

Common use cases

  • Website and app design
  • Building brand palettes
  • Accessibility checks
  • Presentation and print colours

Features and benefits

  • Private by design — your data is processed on your device and never uploaded.
  • Free with no account, no watermark and no usage limits.
  • Works on phones, tablets and desktops in any modern browser.

Limitations to know

  • Contrast results apply to solid colours; text over images needs separate checking.

Frequently asked questions

What contrast ratio is needed?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text.

What is a complementary colour?

The colour opposite on the colour wheel (hue + 180°).

Can I pick colours from an image?

Use the Image Color Picker.

All utility tools
Need help?