Which text reads on which color

Every color shows whether white or black text on it passes WCAG AA, so you can see which text color reads.

Designers starting a brand kit pull starting colors from a client's logo or product shots.

22%of the image
#CFD3D7
Color 1 of 6
White text
fails 1.5:1
Black text
AA 14.0:1
20%of the image
#1B1C21
Color 2 of 6
White text
AA 17.0:1
Black text
fails 1.2:1
18%of the image
#65727F
Color 3 of 6
White text
AA 4.9:1
Black text
fails 4.3:1
16%of the image
#40512F
Color 4 of 6
White text
AA 8.6:1
Black text
fails 2.4:1
15%of the image
#A1AAAF
Color 5 of 6
White text
fails 2.4:1
Black text
AA 8.9:1
9%of the image
#BC813B
Color 6 of 6
White text
fails 3.3:1
Black text
AA 6.4:1

Six lines for your stylesheet

Each swatch has its own copy button, and one more button copies all six as CSS variables.

Developers setting up a theme turn a logo into CSS variables for a first theme, with the contrast already checked.

:root {--brand-1: #CFD3D7;--brand-2: #1B1C21;--brand-3: #65727F;--brand-4: #40512F;--brand-5: #A1AAAF;--brand-6: #BC813B;}

Many products start with a logo file and a few photos, and no written color codes

Picking colors by eye with an eyedropper gives a slightly different shade each time. Then someone sets white text on a pale yellow button, and nobody can read it.

Your browser does the separating

Drop in an image and your browser reads it on your device, samples the pixels and groups them into six main colors. The image is never uploaded.

The image you chose — 1Drop an image Drag in a logo, product photo or mood board, or pick one from your files.

2Let it sample Read at 128 × 160 pixels, so your browser samples the pixels and groups them into six colors.

Grouped into six Similar shades are grouped, and each pixel here is drawn in the main color nearest to it.

#CFD3D7
#1B1C21
#65727F
#40512F
#A1AAAF
#BC813B

Every pixel, sorted into the color it belongs to

Check contrast

See whether white or black text passes WCAG AA on each swatch.

Copy the colors

Copy single hex codes or the full set as CSS variables.

Input: One image, dropped in or picked from your device
Outputs: Six swatches with hex codes, a WCAG AA result for white and black text on each, and CSS variables to copy
Runs in: Your browser. The image is read locally and never uploaded.