Gamut

OKLCH theme builder with contrast checking

#3b82f6

Scales

#3b82f6
#737373

Contrast ratios

Stepvs whitevs black
50
1.1✕19.3AAA
100
1.2✕17.1AAA
200
1.5✕14.2AAA
300
2.0✕10.4AAA
400
2.9✕7.2AAA
500
5.0AA4.2✕
600
6.7AA3.1✕
700
9.5AAA2.2✕
800
12.9AAA1.6✕
900
16.7AAA1.3✕
950
19.5AAA1.1✕

Palette

primary
50
#f0f6ff
100
#dbe9ff
200
#bcd6ff
300
#8db8ff
400
#5696ff
500
#246bdd
600
#1156c0
700
#01409b
800
#002d74
900
#001a4f
950
#00092c

Preview

Typography

Heading

Body text with standard contrast for readability.

Secondary text for less prominent information.

BadgeActiveOutline

Buttons

Inputs

Notifications

Cards

Analytics

12 new insights

Settings

3 pending changes

Export

:root {
  /* primary */
  --primary-50: #f0f6ff;
  --primary-100: #dbe9ff;
  --primary-200: #bcd6ff;
  --primary-300: #8db8ff;
  --primary-400: #5696ff;
  --primary-500: #246bdd;
  --primary-600: #1156c0;
  --primary-700: #01409b;
  --primary-800: #002d74;
  --primary-900: #001a4f;
  --primary-950: #00092c;

  /* neutral */
  --neutral-50: #f5f5f5;
  --neutral-100: #e8e8e8;
  --neutral-200: #d4d4d4;
  --neutral-300: #b7b7b7;
  --neutral-400: #989898;
  --neutral-500: #717171;
  --neutral-600: #5d5d5d;
  --neutral-700: #484848;
  --neutral-800: #333333;
  --neutral-900: #1f1f1f;
  --neutral-950: #0d0d0d;

  /* Semantic tokens (light) */
  --background: #f5f5f5;
  --surface: #f5f5f5;
  --surface-raised: #e8e8e8;
  --text-primary: #1f1f1f;
  --text-secondary: #5d5d5d;
  --text-muted: #989898;
  --border: #d4d4d4;
  --border-strong: #b7b7b7;
  --primary-solid: #246bdd;
  --primary-text: #f0f6ff;
  --primary-subtle: #dbe9ff;
  --secondary-solid: #246bdd;
  --accent-solid: #246bdd;
}