InputTestHub

Colour Picker

Picks any colour and shows its HEX, RGB, HSL, HSV, CMYK and LAB values, plus tints, shades and the nearest named colour.

Colour & Design Nothing uploaded No sign-up Free, unlimited
Colour & Design tool
Pick a colour to see every value.
In short A colour picker's real output is not the hex code — you could have typed that. It is everything printed beside it: the same colour in six formats, ten tints and ten shades, the harmony colours around it, and the contrast ratio against both white and black. That last figure is the one worth looking at first, because it decides whether the colour can carry text at all. Anything under 4.5:1 against your background fails WCAG AA for body copy, and a colour that fails on both white and black is a colour you can only use for large shapes. The tints and shades matter for a different reason. A single brand colour is not a palette; you need lighter and darker versions of it for hover states, borders, backgrounds and disabled controls, and generating them from one hue keeps them related in a way hand-picking never does. Pick with the eyedropper if you are matching something on screen, but check the numbers before committing. A colour that looks right in a swatch behaves differently as 14px text on a coloured background, and the ratio tells you that before your users do.

How to use the Colour Picker

  1. Pick a colour with the picker or paste a HEX, RGB or HSL value.
  2. Every other format and the generated variations update instantly.
  3. Click any value or swatch to copy it.

About the Colour Picker

The Colour Picker picks any colour and shows its HEX, RGB, HSL, HSV, CMYK and LAB values, plus tints, shades and the nearest named colour. It runs as plain JavaScript inside the page, which means there is no upload step, no queue and no size limit imposed by a server — the only limit is your own device.

What people use it for

  • Getting the exact code for a colour you can see.
  • Converting a brand colour into every format you need.
  • Building a set of tints and shades from one base.

Details

Formats shownHEX, HEX with alpha, RGB, RGBA, HSL, HSLA, HSV, CMYK, LAB and the nearest CSS named colour
VariationsTen tints, ten shades, complementary, analogous, triadic and split-complementary
ContrastWCAG contrast ratio against white and black shown for every colour

Frequently asked questions

Do I need an account to use the Colour Picker?
There is no cost and no cap. The Colour Picker is not a demo of a paid product, so nothing is held back or watermarked.
Is my data uploaded anywhere?
No. The Colour Picker runs entirely in your browser using JavaScript. Nothing is transmitted, logged or stored, which you can verify yourself in the Network tab of your browser's developer tools.
When would I actually need the Colour Picker?
Typical uses: getting the exact code for a colour you can see. Converting a brand colour into every format you need. Building a set of tints and shades from one base. It is built for exactly those cases rather than being a general-purpose tool with this bolted on.
Which values should I know?
Formats shown is HEX, HEX with alpha, RGB, RGBA, HSL, HSLA, HSV, CMYK, LAB and the nearest CSS named colour. Variations is Ten tints, ten shades, complementary, analogous, triadic and split-complementary. Contrast is WCAG contrast ratio against white and black shown for every colour. These are printed on the page itself, so you do not have to take them on trust.
Does the Colour Picker work on a phone?
Yes. The page is responsive and the utility works in Chrome, Safari, Firefox, Edge and Samsung Internet on both Android and iOS. There is no app to install and nothing to sign into.

Related colour & design tools

All 33
01

Colour Code Converter

Converts colours between HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, LAB and named CSS colours.

02

HEX to RGB Converter

Converts HEX colour codes to RGB and RGBA values, handling 3, 4, 6 and 8 digit hex.

03

RGB to HEX Converter

Converts RGB and RGBA values into HEX colour codes, including 8-digit hex with alpha.

04

HSL Colour Converter

Converts between HSL, HEX and RGB, so you can adjust lightness and saturation predictably.

05

CMYK Colour Converter

Converts between CMYK and RGB or HEX for print work, with a note on gamut differences.

08

Colour Contrast Checker

Calculates WCAG contrast ratio between two colours and reports AA and AAA pass or fail for…

10

Tailwind Colour Converter

Finds the nearest Tailwind colour class for any hex value, and shows the hex for any Tailwind…