Skip to main content
Toolbox
Developer

Color Palette Generator & WCAG Matrix

Generate harmonious color palettes, Tailwind 50–950 shade scales, inspect OKLCH gamuts, and test WCAG 2.2 AA & AAA accessibility contrast ratios.

Quick Answer & Summary

Pick any base color to generate Tailwind 50–950 color scales, color harmonies (Complementary, Analogous, Triadic), and evaluate WCAG 2.2 contrast ratios against white and black with instant AA/AAA compliance feedback.

WCAG 2.2 Contrast Ratio Formula
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color (ranging from 0.0 for black to 1.0 for white).

Base Color & Gamut Inspector

Pick a color to generate palettes, scales, and WCAG accessibility scores

RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
OKLCH (Gamut)0.623 0.188 259.8°
Presets:

Color Harmonies & Shades

50
#ecf3fe
100
#d3e3fd
200
#accafb
300
#7bacf9
400
#4b8df7
500
#3b82f6
600
#1068f4
700
#0a54cd
800
#0842a1
900
#063075
950
#031e49

WCAG 2.2 Contrast Matrix

Against White (#FFFFFF)
3.68:1 (AA Large)
AA Normal (4.5:1)AA Large (3:1)AAA Normal (7:1)
Against Black (#000000)
5.71:1 (AA)
AA Normal (4.5:1)AA Large (3:1)AAA Normal (7:1)
Against Warm Cream Canvas (#F5EFE4)
3.21:1 (AA Large)
AA Normal (4.5:1)AA Large (3:1)AAA Normal (7:1)
Against Deep Mocha Dark (#1E1814)
4.77:1 (AA)
AA Normal (4.5:1)AA Large (3:1)AAA Normal (7:1)

Color Blindness Simulator

Protanopia (Red-Blind)
#5a5ada
Deuteranopia (Green-Blind)
#5650d3
Tritanopia (Blue-Blind)
#3fc4bf
Achromatopsia (Monochrome)
#7a7a7a

Share This Tool

Help your team and fellow developers save time with free, private client-side utilities.

TB
Toolbox Editorial TeamVerified Authors

Systems & Security Engineers • Applied Cryptography & High-Performance Web Tools

Updated:
100% In-BrowserZero server storage
Standards AuditedRFC & ISO compliant
Peer ReviewedEditorial Policy
Documentation & Guide

How to Use Color Palette Generator & WCAG Matrix

1

Select a Base Color

Use the interactive color picker, enter a HEX/RGB/HSL code, or pick from curated designer presets.

2

Explore Harmonies & Scales

Switch between Tailwind 50–950 tint/shade scale, Analogous, Complementary, Triadic, Tetradic, and Monochromatic harmony modes.

3

Verify WCAG 2.2 Contrast

Check automatic contrast ratios against pure white and black, complete with AA/AAA compliance badges for normal and large text.

4

Simulate Color Blindness & Export

Preview how your color appears under Protanopia, Deuteranopia, Tritanopia, and Achromatopsia, and copy as CSS custom properties or JSON.

Pro Tips
Click any swatch to copy its HEX code instantly to your clipboard
Export the complete scale directly as CSS variables or JSON for your design system

Practical Examples & Conversions

Input
#3b82f6 (Tailwind Blue)
Output
50: #edf4fe | 100: #dbe9fd | 500: #3b82f6 | 700: #295cb0 | 900: #173566

Frequently Asked Questions (PAA)

Related Tools & Converters

Authoritative Standards & Citations

Calculations and algorithms on this page are implemented and verified in strict accordance with the following official technical specifications: