Color picker from image

How it works

Your image is drawn onto a canvas in your browser, and the tool reads the red, green and blue values of the pixel under your pointer. The image is not uploaded. A magnified view next to the image helps you hit small details, and the 3 × 3 or 5 × 5 options average neighbouring pixels, which helps with photos and JPG noise, where single pixels vary.

From the RGB value it works out the other formats:

• HEX is the same red, green and blue as two hexadecimal digits each, as used in CSS and design tools.
• HSL (hue, saturation, lightness) and HSV (hue, saturation, value) describe the same colour in ways that are easier to adjust by hand.
• CMYK uses the simple formula K = 1 − max(R, G, B), C = (1 − R − K) ÷ (1 − K) and so on. Printers convert with colour profiles for their paper and inks, so real printed CMYK values will differ. Treat this as a starting point and ask your printer for exact values.

Nearest colour name: the closest of the 148 named colours in CSS, measured in CIE Lab, a colour space built so that equal distances look roughly equally different. The distance (ΔE) is shown: under about 2 is hard to tell apart, over 10 is clearly a different shade.

Main colours: the palette groups similar pixels with k-means clustering and shows each group's average colour and its share of the image.

Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 that of the darker

This is the WCAG 2 formula. WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 18.66 px bold) and for icons and input borders. Level AAA asks for 7:1 and 4.5:1.

Worked example

Say you pick the blue #3a7bd5 from a logo.

• RGB: 3a = 58, 7b = 123, d5 = 213, so rgb(58, 123, 213).
• HSL: the largest channel is blue (213 ÷ 255 = 0.835) and the smallest red (0.227). Lightness is their average, 53%. Saturation is 0.608 ÷ (1 − |2 × 0.531 − 1|) = 65%, and the hue works out to 215°: hsl(215, 65%, 53%).
• CMYK: K = 1 − 0.835 = 16%, C = (1 − 0.227 − 0.165) ÷ 0.835 = 73%, M = 42%, Y = 0%.
• Nearest name: cornflowerblue (#6495ed), ΔE about 10.7, so a noticeably different shade.
• Contrast: its relative luminance is 0.199. On white that gives 1.05 ÷ 0.249 = 4.22:1, enough for large text and icons (3:1) but not for normal body text (4.5:1). With black text on it the ratio is 4.97:1, which passes AA for normal text. A darker blue such as #1f4e8c reaches 8.31:1 on white.

Tips

• Screenshots keep exact colours. Photos and JPGs blur edges and add noise, so use the 3 × 3 or 5 × 5 sample, or pick from the middle of a flat area.
• Colours on screen can shift. Your screen's colour profile, browser colour management and image colour profiles can change what you see. The values shown are the ones the browser decoded from the file.
• Pick from anywhere: in browsers that support the EyeDropper feature (Chromium-based desktop browsers such as Chrome and Edge), the "Pick from anywhere on screen" button picks a colour outside the page too.