Color Picker

Choose a colour with your system colour wheel, fine-tune it with hue, saturation and lightness sliders, or grab any colour on your screen with the eyedropper in Chrome and Edge. Every format is shown with a copy button, and contrast ratios against white and black text tell you whether the colour passes WCAG AA and AAA.

How to use the Color Picker

1. Click the colour wheel, drag the sliders or type any colour value.
2. In Chrome or Edge, press From screen to sample a colour anywhere.
3. Copy the format you need.
4. Check the white and black text contrast badges.

Features

• Native colour input plus HSL sliders
• EyeDropper API support where available
• HEX, RGB, HSL, HSV/HSB and CMYK values
• WCAG 2.x contrast ratios with AA/AAA badges
• Accepts typed colours in any common format

Benefits

• Match colours from screenshots, sites and designs
• Choose text colours that are readable for everyone
• Get the right format for CSS, design tools or print

Frequently asked questions

Why is the From screen button missing?

The EyeDropper API is currently available in Chromium-based browsers such as Chrome, Edge and Opera on desktop. Firefox and Safari do not support it yet.

What do AA and AAA mean?

They are WCAG accessibility levels. AA requires a contrast of at least 4.5:1 for normal text (3:1 for large text); AAA requires 7:1 (4.5:1 for large text).

Are the CMYK values print-accurate?

They are a straightforward conversion from screen RGB. Actual print colours depend on the printer and paper profile, so ask your printer for exact values.

Related tools

• Color Palette Generator — Generate complementary, analogous, triadic and monochrome palettes or random ones, lock colours and export CSS, Tailwind or PNG.
• Color Converter — Convert any colour between HEX, RGB, RGBA, HSL, HSV, CMYK and all 148 CSS colour names, including alpha transparency.
• Percentage Calculator — Work out X% of Y, what percent one number is of another, percentage change, or increase and decrease a value by a percent.
• Loan EMI Calculator — Calculate the monthly EMI for any loan, plus total interest, total payment and a year-by-year repayment breakdown.
• Invoice Generator — Create a professional invoice with your details, line items, discounts, tax and shipping, then download it as a PDF or print it.
• Word Counter — Count words, characters, sentences and paragraphs live, with reading time and top keywords.