Color Picker

Find and convert color codes

The Color Picker shows any color as HEX, RGB and HSL at once. Type a code into any of the three fields and the other two follow, or choose a color visually with the large swatch, from a photo, or from anywhere on your screen.

You also get a contrast check against white and black and a row of shades and tints. Everything is calculated on your device; an image you pick from is read by your browser, not uploaded.

How to pick a color and get its code

1. Click the large swatch to open your system’s color chooser, or type a value into the HEX, RGB or HSL field.
2. To match a color in a photo or screenshot, click Pick from an image, choose the file, then click the exact spot you want.
3. In Chrome, Edge and other Chromium-based browsers, Pick from screen lets you sample a color from anything visible on your display.
4. Click the copy button next to a field to copy that code in the format shown.
5. Click any square under Shades & tints to switch to that variation.

Reading the contrast cards and palette

• Text on white / Text on black: your color shown as text on each background, with the WCAG contrast ratio, such as 7.10:1 for the starting purple.
• Rating: AAA (7:1 or more), AA (4.5:1 or more), “AA large text only” (3:1 or more) or Fails.
• Shades & tints: nine squares — four steps darker, your color in the middle (outlined), and four steps lighter, each mixed 20% further towards black or white.

When a color picker helps

• Matching a brand color from a logo file or screenshot when nobody has the hex code.
• Converting for CSS: turn a HEX value from a style guide into rgb() or hsl() notation, or the reverse.
• Checking readability: see whether a text color is dark or light enough before using it on a white or black page.
• Reusing it elsewhere: enter the HEX code as the foreground of a QR code or as the backdrop behind a cut-out photo.

Color formats and contrast, briefly

HEX, RGB and HSL describe the same color

RGB lists how much red, green and blue light to mix, each from 0 to 255. HEX is those same three numbers written in base 16, so rgb(109, 40, 217) and #6D28D9 are identical. HSL describes the color as a hue angle on the color wheel (0–360), a saturation and a lightness, which makes it easier to nudge a color lighter or more muted by hand.

What the contrast ratio measures

The ratio compares how bright two colors appear, from 1:1 (no difference) to 21:1 (black on white). Accessibility guidelines (WCAG) ask for at least 4.5:1 for normal body text and 3:1 for large text. The cards here only test against pure white and pure black; a different background needs its own check.

Color Picker: common questions