Palette Generator

Create accessible color schemes

239°
84%
67%
0
0
Copied!
#D0D1FB
Click to copy
Copied!
#7678F5
Click to copy
Copied!
#191CF3
Click to copy
Copied!
#0609A6
Click to copy
Copied!
#02034B
Click to copy

Website Preview

See how your palette looks on a sample layout

Palette Shades

Full tonal range based on your base color

Copied!
100#E8E8FDHSL(240, 84%, 95%)
Copied!
200#B9BAF9HSL(239, 84%, 85%)
Copied!
300#8A8BF5HSL(239, 84%, 75%)
Copied!
400#5B5DF1HSL(239, 84%, 65%)
Copied!
500#1418EBHSL(239, 84%, 50%)
Copied!
600#1013BCHSL(239, 84%, 40%)
Copied!
700#0C0E8DHSL(239, 84%, 30%)
Copied!
800#080A5EHSL(239, 84%, 20%)
Copied!
900#04052FHSL(239, 84%, 10%)

Extended Scale

Complete monochrome scale from light to dark

Copied!
50#F6F6FEHSL(240, 80%, 98%)
Copied!
100#D3D3F8HSL(240, 73%, 90%)
Copied!
200#A1A3F7HSL(239, 84%, 80%)
Copied!
300#7274F3HSL(239, 84%, 70%)
Copied!
400#4346EFHSL(239, 84%, 60%)
Copied!
500#1418EBHSL(239, 84%, 50%)
Copied!
600#1013BCHSL(239, 84%, 40%)
Copied!
700#0C0E8DHSL(239, 84%, 30%)
Copied!
800#010265HSL(239, 98%, 20%)
Copied!
900#00013DHSL(239, 100%, 12%)
Copied!
1000#000119HSL(238, 100%, 5%)

Accessibility Check

Quick select foreground

Accessibility Contrast Check

Large Text Preview

Normal body text preview for accessibility testing. This helps you visualize how your color choices will appear in real content.

Contrast Ratio4.47:1
Normal Text
WCAG 2.1(Fail)

Requires 4.5:1 for AA, 7:1 for AAA

Large Text (18pt+)
WCAG 2.1(AA Large)

Requires 3:1 for AA, 4.5:1 for AAA

WCAG Guidelines

  • AAA: Highest level of accessibility compliance
  • AA: Minimum recommended for web content
  • AA Large: Acceptable only for large text (18pt+ or 14pt bold)
  • Fail: Does not meet accessibility standards