Color Chart

Pick colors you can actually read

WCAG contrast testing, all 22 Tailwind palettes, and harmony schemes — with the math shown, not just the verdict.

← Back to tools

Live preview

Sample Text

The quick brown fox jumps over the lazy dog

Contrast Ratio: 7.92:1

Gradient preview

Pass
AAA (7:1)
Enhanced
Pass
AA (4.5:1)
Normal Text
Pass
AA Large (3:1)
Large Text
Background Color
#6B21A8
bg-purple-800
Text Color
#F3F4F6
text-gray-100
CSS Code
/* CSS */
.my-element {
  background-color: #6B21A8;
  color: #F3F4F6;
}

/* Example Usage */
<div class="my-element">
  Sample Text
</div>

/* Gradient */
.gradient-bg {
  background: linear-gradient(90deg, #6B21A8, #F3F4F6);
}

Harmony schemes

#9e52dd
Click to use
#6B21A8
Click to use
#351053
Click to use
#000000
Click to use

Background color

#6B21A8

Text color

#F3F4F6

Tailwind palette

Left-click: Background | Right-click: Text

slate

50
100
200
300
400
500
600
700
800
900
950

gray

50
100
200
300
400
500
600
700
800
900
950

zinc

50
100
200
300
400
500
600
700
800
900
950

neutral

50
100
200
300
400
500
600
700
800
900
950

stone

50
100
200
300
400
500
600
700
800
900
950

red

50
100
200
300
400
500
600
700
800
900
950

orange

50
100
200
300
400
500
600
700
800
900
950

amber

50
100
200
300
400
500
600
700
800
900
950

yellow

50
100
200
300
400
500
600
700
800
900
950

lime

50
100
200
300
400
500
600
700
800
900
950

green

50
100
200
300
400
500
600
700
800
900
950

emerald

50
100
200
300
400
500
600
700
800
900
950

teal

50
100
200
300
400
500
600
700
800
900
950

cyan

50
100
200
300
400
500
600
700
800
900
950

sky

50
100
200
300
400
500
600
700
800
900
950

blue

50
100
200
300
400
500
600
700
800
900
950

indigo

50
100
200
300
400
500
600
700
800
900
950

violet

50
100
200
300
400
500
600
700
800
900
950

purple

50
100
200
300
400
500
600
700
800
900
950

fuchsia

50
100
200
300
400
500
600
700
800
900
950

pink

50
100
200
300
400
500
600
700
800
900
950

rose

50
100
200
300
400
500
600
700
800
900
950

Quick tips

  • Left click: set background
  • Right click: set text color
  • Dark bg (700–950): pair with light text (50–200)
  • Light bg (50–200): pair with dark text (700–950)

Color theory

  • Complementary: opposite on the hue wheel — maximum tension
  • Analogous: neighbors — calm, cohesive
  • Triadic: three evenly spaced — vivid but balanced
  • Monochromatic: one hue, varied lightness — safest

How contrast is measured

The ratio compares the relative luminance of both colors — not how different they look, but how much light they emit. WCAG requires 4.5:1 for body text and 3:1 for large text; 7:1 (AAA) stays readable for low-vision users. The math runs live in this page — the same formula browsers' dev tools use.