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.

Embed this tool on your website

Add the free Color Picker to your blog or website. Paste the code into your page’s HTML; the tool runs in your visitors’ browsers and stays up to date automatically. Please keep the credit line below the tool.

Free to use on any website. The tool runs inside an iframe served from viptools.pk; nothing your visitors type is sent to your site or ours. Preview the embedded version.

All utility tools

Color Converter

Convert colours between HEX, RGB, HSL, HSV and CMYK.

Developer Tools

Image Color Picker

Pick colours from any image and get HEX, RGB and HSL values.

Image Tools

RGB Color Converter

Mix colours with RGB sliders and convert to HEX, HSL and CMYK.

Converter Tools

HEX to RGB Converter

Convert HEX colour codes to RGB and RGBA values.

Developer Tools

Random Number Generator

Pick random numbers in a range, with or without repeats.

RGB to HEX Converter

Convert RGB values to HEX colour codes.

Developer Tools