Colour picker

How to use the colour picker

1. Start with a colour. Type or paste a code into the box. It accepts HEX (#6366f1, or the short form #63f), RGB (rgb(99, 102, 241) or simply 99 102 241), HSL (hsl(239, 84%, 67%)) and all 148 CSS colour names, such as teal or rebeccapurple. You can also use the square swatch to open your system's colour chooser, or pick from an image.
2. Adjust it. The hue slider moves round the colour wheel; saturation controls how vivid the colour is; lightness runs from black to white.
3. Copy the code you need. HEX is the usual choice for CSS and design tools. Use RGB or HSL if you want to add transparency or adjust the colour in code.
4. Check text contrast. The two samples show the WCAG contrast ratio for white and black text on your colour, and which thresholds it passes.
5. Build a palette. The harmony rows give colours that relate to yours on the colour wheel. Click any swatch to explore from there.

What the numbers mean

All three codes describe the same colour in the sRGB colour space, the standard for the web. RGB gives the amount of red, green and blue light from 0 to 255. HEX writes those same three numbers in base 16: #6366f1 is 63, 66 and f1 in hexadecimal, which is 99, 102 and 241 in ordinary numbers. Our RGB vs HEX guide walks through the conversion by hand, and the converter shows the working for any colour.

HSL stands for hue, saturation and lightness. It is easier to reason about: to make a darker version of a brand colour you only change the last number. HSL values are rounded to whole numbers for display, so converting HSL back to HEX can occasionally move a channel by one step.

The CSS name line tells you whether your colour is exactly one of the named colours in the CSS specification, or which named colour is closest. Closeness is measured in the CIELAB colour space, which tracks human perception better than raw RGB distance. The default colour, #6366f1, is not a named colour; the nearest is mediumslateblue (#7b68ee). See the full list on our CSS colour names page.

Reading the contrast results

The Web Content Accessibility Guidelines (WCAG) compare the relative luminance of two colours and express the result as a ratio from 1:1 (no difference) to 21:1 (black on white). Normal-size text needs at least 4.5:1 to meet level AA, and large text needs 3:1. The default colour shows why it is worth checking: white text on #6366f1 scores 4.46:1, just short of 4.5:1, so it passes only for large text, while black text scores 4.70:1. We show ratios cut off at two decimal places rather than rounded, because WCAG does not allow a ratio such as 4.499:1 to count as 4.5:1. For any pair of colours, use the contrast checker, and read our WCAG contrast guide for the formula and the rules on text size.

How the harmony palettes are made

Each palette keeps your colour's saturation and lightness and rotates its hue. Complementary adds 180°, analogous takes the neighbours 30° either side, triadic spaces three hues 120° apart, and split-complementary uses the two hues either side of the complement. The monochrome row keeps the hue and saturation and steps the lightness from 15% to 90%.

These are starting points, not finished palettes. Hues at the same HSL lightness can look very different in brightness: the complement of #6366f1 is #f1ee63, a pale yellow with a relative luminance of 0.81 against 0.19 for the original. That is why the yellow needs dark text. Our colour theory guide explains how to turn these relationships into a usable palette, and why the screen colour wheel differs from the painter's wheel you may have learned at school.

Privacy

The picker runs entirely in your browser. Colours you type and images you open are processed on your device and are not sent to us. The site uses Google Analytics and Google AdSense, subject to your cookie choices; see our privacy policy.

Frequently asked questions

Can I paste a colour from Figma, Photoshop or my code?

Yes. Paste a HEX code with or without the #, an rgb() or hsl() value, three numbers such as 99 102 241, or a CSS colour name. Use the Paste button, or click in the box and press Ctrl+V (Cmd+V on a Mac). Some browsers ask permission before a site can read the clipboard.

Why does the same HEX code look different on my phone and laptop?

The code is the same, but screens differ in brightness, calibration and colour gamut, and settings such as night mode or True Tone shift colours. If accuracy matters, compare on a calibrated display.

Does the picker support transparency?

The picker works with solid colours. You can paste an 8-digit HEX code or an rgb() value with alpha, but the alpha part is ignored. Contrast ratios are only meaningful for solid colours, because the result depends on what shows through.

Is ColourPickr free?

Yes. All the tools and guides are free and need no account. The site is funded by advertising.