How to use the color picker
- 1Click the swatch next to Color (any format) to open your system's color picker, type a code, or press Pick from screen where your browser supports it.
- 2Adjust with the Red, Green, Blue and Alpha sliders and copy a code from Codes.
- 3Click any swatch under Tints and shades to switch to a lighter or darker version.
- 4In the Contrast checker, set the Text color (or press Use white / Use black) and read the ratio and the AA and AAA results.
- 5To sample a photo or logo, choose a file under Pick a color from an image and click the pixel you want.
Example
#ff5722 background with white text, then black text
White text: 3.16:1 (passes AA large text and UI components only) Black text: 6.63:1 (passes AA normal text, fails AAA normal text)
Ratios are cut, not rounded, to two decimals, so a 4.499:1 color never shows as passing 4.5:1.
Picking colors
There are three ways to choose a color. The swatch button opens your operating system's own picker, which often has an eyedropper built in. Pick from screen uses the browser's EyeDropper API to sample any pixel on your screen, including other windows; it is available in Chrome and Edge on desktop, and the button only appears where it works. Or type a code you already have in any format (HEX, RGB, HSL, HWB, HSV, CMYK or a CSS name).
The Codes panel then gives every format at once, with the closest CSS color name.
Shades, tints and palettes
A tint mixes the color with white and a shade mixes it with black. The tool shows five of each, in even steps from about 17% to 83%, so you can build hover, pressed and background states from one brand color. Click a swatch to make it the current color and copy its codes.
Mixing in RGB keeps the hue but can make mid-tones look a little grayish. For a design system, check each step in the contrast checker: a tint that works as a background may need dark rather than white text.
Contrast ratio and WCAG
WCAG 2.2 measures text legibility as a contrast ratio from 1:1 (no contrast) to 21:1 (black on white), based on the relative luminance of the two colors.
| Level | Normal text | Large text (24 px, or 18.7 px bold) | UI components and icons |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | not defined |
AA is the usual legal and accessibility target. #767676 is the lightest gray that passes AA for body text on white (4.54:1). Semi-transparent colors are measured as laid over the background, and a transparent background as laid over white. The panel also says whether white or black text gives more contrast.
Picking a color from an image
Choose a photo, screenshot or logo under Pick a color from an image (or paste an image), then click any point: that pixel's exact color becomes the current color. The image is drawn on a canvas in your browser and never uploaded; large images are scaled to 1,200 px for display, which can blend neighbouring pixels slightly at fine edges. JPEG compression also shifts colors a little, so for exact brand colors, sample a PNG or SVG export or ask for the official codes. Once you have the color, the favicon generator can use it as a background.
Is anything I enter stored?
This tool runs entirely in your browser. Your text is not uploaded to our servers.