Image Colour Picker

Hex, RGB and HSL — the same colour, three ways

A hex code such as #2B6CB0 is just three pairs of hexadecimal digits giving the red, green and blue channels from 00 to FF. RGB writes the same three numbers in decimal, 0 to 255. HSL rewrites them as hue, saturation and lightness, which is far easier to reason about: keep the hue, drop the lightness, and you have a darker version of the same colour rather than a different colour that happens to be darker.

Use whichever your tool wants. CSS accepts all three. Design software usually prefers hex. If you are building a palette by hand, work in HSL and convert at the end.

Building a palette from a photograph

• Pick the dominant colour from a large flat area, not from an edge — edges carry compression artefacts and blended pixels.
• Take a second colour from a shadow and a third from a highlight of the same object. Those three already look like they belong together.
• Find your accent in something small and saturated, then use it sparingly.
• Neutrals are easiest sampled from a grey or near-white area in the picture rather than invented.
• Sample from the largest version of the image you have. A heavily compressed thumbnail shifts colours noticeably.

Check the contrast before you commit

A palette that looks good is not automatically readable. The Web Content Accessibility Guidelines ask for a contrast ratio of at least 4.5 to 1 between body text and its background, and 3 to 1 for large text of 18.66 pixels bold or 24 pixels regular and above. Mid-grey text on a white card fails constantly, and so does white text on a mid-tone brand colour.

The easy fix once you have a hex code is to adjust lightness in HSL until the ratio passes, keeping the hue and saturation. The colour still belongs to your palette; it is simply usable.

Why a picked colour can look different elsewhere

The value you read here is the sRGB value of that pixel as your browser decoded it. Two things can make the same hex look different: the image may carry a colour profile such as Display P3 or Adobe RGB that a different application interprets differently, and the screen itself may be uncalibrated. If colour accuracy genuinely matters — matching a brand colour or preparing artwork for print — sample from a file you know is sRGB, and treat print colour as a separate conversation involving CMYK and a proof.

Quick uses for a picked colour

Matching a heading to the product in a hero photo, pulling a background tint out of a piece of packaging, finding the exact blue in a logo someone sent you as a screenshot, or sampling a colour from a competitor's chart so your own chart is comparable. All of it happens in your browser; the image is never uploaded.

Need the opposite of a colour you picked? Paste its hex into the Color Inverter for its exact inverse, its complementary colour on the wheel and the contrast ratio between them.