Palette Generator

Enter a color. Get a complete design system — shade scale, semantic tokens, contrast ratios, and exportable code.

name:

Shade Scale

Contrast Ratios

19.6AAA

17.6AAA

14.4AAA

10.4AAA

6.3AA

4.1AA18

2.9Fail

2.2Fail

1.7Fail

1.4Fail

1.2Fail

WCAG 2.1 — AAA: 7:1+ (ideal) · AA: 4.5:1+ (normal text) · AA18: 3:1+ (large text only) · Fail: below 3:1

Semantic Tokens

--brand-background

Page background

#081935

950

--brand-surface

Card / panel background

#0a234d

900

--brand-surface-alt

Alternate surface

#0b316f

800

--brand-border

Borders & dividers

#0b4198

700

--brand-text-muted

Secondary text

#4f8bee

400

--brand-text

Primary text

#e6ebf4

100

--brand-text-emphasis

Headings / emphasis

#f5f7f9

--brand-accent

Interactive elements

#0b64f4

500

--brand-accent-hover

Hover state

#4f8bee

400

Preview Card

This shows how your semantic tokens render as a real UI component. The accent color is used for the left border.

Secondary text uses the muted token.

Export

:root {
  --brand-50: #f5f7f9;
  --brand-100: #e6ebf4;
  --brand-200: #c8d7ef;
  --brand-300: #98b8ec;
  --brand-400: #4f8bee;
  --brand-500: #0b64f4;
  --brand-600: #0950c3;
  --brand-700: #0b4198;
  --brand-800: #0b316f;
  --brand-900: #0a234d;
  --brand-950: #081935;
}