Color Picker

About this Color Picker

The Color Picker lets you choose a color visually using your browser's built-in color picker, then instantly shows the matching HEX, RGB and HSL codes. It is a quick way to grab a color value without typing a code by hand.

Picking a color visually and instantly seeing its HEX, RGB and HSL values saves the back-and-forth of guessing color codes by eye, which is especially useful for matching a color from a design mockup, photo or brand guideline to its exact numeric code.

For related tasks, try Color Converter, Number Base Converter or URL Encoder / Decoder.

How the calculation works

The browser's native color input returns a HEX value directly; RGB and HSL are calculated from that HEX value using standard color-space conversion formulas.

How to use it

1. Select the color swatch to open the picker.
2. Choose any color.
3. Read the HEX, RGB and HSL values shown below the swatch.

Practical example

Picking a shade of blue might show HEX #3157d5, which the tool also displays as RGB and HSL values.

Picking a shade of teal might return HEX #14B8A6, RGB(20, 184, 166) and HSL(173deg, 80%, 40%), and any of these three values can be pasted directly into CSS, since all major browsers accept them interchangeably.

Things to double-check

Colors can render slightly differently across different screens depending on their calibration and color profile, so a color picked and copied here should look consistent in most contexts, but always double-check critical brand colors on the actual target device when accuracy is essential.

Picking and copying a colour

Choose a colour from the picker to see its HEX, RGB and HSL values, and copy the one your project needs. HEX such as #3157D5 is compact for CSS and design tools, RGB such as rgb(49, 87, 213) matches how screens mix light, and HSL such as hsl(227, 66%, 51%) separates hue, saturation and lightness. All three describe the same colour, so use whichever your tool accepts.

Building a palette

A simple palette starts from one base colour. Complementary colours sit 180 degrees apart on the colour wheel, so a blue with a hue of 227 pairs with a warm orange near hue 47. Analogous colours sit about 30 degrees on either side and look harmonious. A common guideline is the 60-30-10 rule: 60 percent a dominant colour, 30 percent a secondary colour and 10 percent an accent. Adjust lightness in HSL to create tints and shades.

Contrast and accessibility

Text must be readable against its background. The Web Content Accessibility Guidelines ask for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. Light grey on white often fails. Test your combinations with a contrast checker, and do not use colour alone to convey meaning, since many people have colour vision deficiency. For example, mark errors with an icon or text as well as red.

Screens, print and consistency

The colour you see depends on your display, its brightness and its profile. Print uses ink in the CMYK system, which cannot show every bright screen colour, so a vivid blue may print duller. For brand work, record the exact codes in a style guide and ask for printed proofs. Use the same value everywhere in your site's stylesheet, ideally as a variable, so a change is made once.

Using the values in code

Copy the format that your tool accepts. In CSS you might write color: #3157d5, background: rgb(49, 87, 213) or border-color: hsl(227, 66%, 51%). A good habit is to define the colour once as a variable, such as brand equals #3157d5, and use it everywhere, so that a change is made in one place. For hover and active states, keep the same hue and change only the lightness in HSL, which gives related shades without guessing new values.

Worked example: a teal brand colour

Imagine you pick the colour #0F766E. It converts to rgb(15, 118, 110) and hsl(175, 77%, 26%). In HSL, the hue of 175 degrees is a blue-green, the saturation is fairly rich at 77 percent and the lightness is a deep 26 percent. To create a light tint for a background, keep the hue and saturation and raise the lightness to about 95 percent, and for a darker hover shade, lower it to about 20 percent. Working in HSL makes the relationships between the shades obvious, and you can copy the values into your stylesheet.

Building a palette for an interface

A usable interface palette usually has a primary colour for key actions, a secondary or accent colour, a set of neutral greys for text and backgrounds, and status colours for success, warning and error. Create steps of lightness for each colour, such as 95, 90, 80, 60, 40 and 20 percent, and keep the hue consistent. The 60-30-10 guide suggests that a layout is mostly neutral, with a smaller share of the main colour and a little accent. Define each value once as a variable and reuse it, and plan a dark mode early, since simply inverting colours rarely works.

Picking colours from images and brand guides

When you pick a colour from a photograph, the pixel may differ from the colour that you perceive because of shadows, compression and edges, so sample several nearby pixels. If a brand has official colours, use the codes in its guidelines instead of sampling from a logo file, which may have been compressed. Colours also look different from one screen to another, so check important choices on more than one device. Record the codes in a shared document so that every designer and developer uses the same values.

Accessibility and states

Colour choices must work for everyone. Check the contrast of text and background, at least 4.5 to 1 for normal text, and make sure that links are distinguishable by more than colour, for example with an underline. Provide a visible focus outline for keyboard users, and avoid relying on red and green alone, since many people cannot tell them apart. Pure black on pure white is very high contrast and can be tiring over long reading, so some designers choose a very dark grey. Test with a colour blindness simulator and with a real screen in different lighting.

Key terms explained

A colour picker lets you choose a colour visually and read its code. Hue is the position on the colour wheel, saturation is how vivid the colour is and lightness is how bright. A palette is a set of colours used together. A tint is a colour mixed with white and a shade is one mixed with black. Complementary colours sit opposite each other on the wheel. Contrast is the difference between colours. A colour space defines the range of colours a device can show.

Rules of thumb and quick checks

Use a dominant colour for about 60 percent of a design, a secondary for 30 percent and an accent for 10. Analogous colours sit within about 30 degrees of each other. Keep text contrast at 4.5 to 1 or more. To make a hover state, change the lightness by 5 to 10 points. Save your chosen values as variables in your stylesheet, and test the colours on a phone and a desktop screen.

Frequently asked questions