Color Lab - Generate Accessible Color Palettes

Base Color

Algorithm

Dark Teal

H:173 S:45 L:5

Red

H:353 S:58 L:35

Teal

H:173 S:58 L:65

Light Red

H:353 S:30 L:95

Live Preview

AppName

DashboardSettings

Welcome back

Here is what is happening with your projects today.

Revenue

$12,480

Users

2,340

Growth

+14.5%

NameStatusAmount

Project AlphaActive$4,200

Project BetaPending$1,800

Project GammaDone$6,480

Contrast Grid

4/6 pairs pass WCAG

2 pairs failing. With 4 colors, not every combination will pass WCAG contrast requirements. For full compliance, try reducing your palette to 3–4 colors or swap the failing colors for shades with more lightness contrast.

Sample Text

16.67:1AAA

Sample Text

11.44:1AAA

Sample Text

7.53:1AAA

Sample Text

5.17:1AA

Sample Text

2.21:1Fail

Sample Text

1.46:1Fail

Export

:root {
  --color-1: #071211;
  --color-2: #8d2532;
  --color-3: #72dacd;
  --color-4: #f6eeef;
}