Tonal Scale

50 #f0f5ff oklch(0.97 0.0143 263)

100 #dce8ff oklch(0.93 0.0336 263)

200 #bed5ff oklch(0.87 0.0637 263)

300 #91b7ff oklch(0.78 0.1116 263)

400 #5e94ff oklch(0.68 0.1686 263)

500 #2c6cf1 oklch(0.57 0.2105 263)

600 #094ad0 oklch(0.47 0.2147 263)

700 #002fa0 oklch(0.37 0.1867 263)

800 #001d76 oklch(0.29 0.1547 263)

900 #000753 oklch(0.21 0.1322 263)

950 #00012e oklch(0.14 0.0918 263)

Neutral Scale

50 #f3f5fa oklch(0.97 0.007 263)

100 #e5e8ed oklch(0.93 0.007 263)

200 #d2d4d9 oklch(0.87 0.007 263)

300 #b5b7bc oklch(0.78 0.007 263)

400 #96989d oklch(0.68 0.007 263)

500 #75777c oklch(0.57 0.007 263)

600 #595b5f oklch(0.47 0.007 263)

700 #3e4044 oklch(0.37 0.007 263)

800 #292b2f oklch(0.29 0.007 263)

900 #17181c oklch(0.21 0.007 263)

950 #08090c oklch(0.14 0.007 263)

Semantic Tokens

primary #2c6cf1

Button

on-primary #ffffff

primary-container #dce8ff

on-primary-container #000753

surface #f3f5fa

on-surface #17181c

surface-dim #e5e8ed

surface-bright #f3f5fa

outline #96989d

State Colors

error #cc272e

on-error #ffffff

warning #daa400

on-warning #0a0a0a

success #279936

on-success #0a0a0a

Dark Mode Preview

Card title Subtitle text

Primary

Secondary

CSS Output

:root {
  /* Tonal scale */
  --primary-50: #f0f5ff;
  --primary-100: #dce8ff;
  --primary-200: #bed5ff;
  --primary-300: #91b7ff;
  --primary-400: #5e94ff;
  --primary-500: #2c6cf1;
  --primary-600: #094ad0;
  --primary-700: #002fa0;
  --primary-800: #001d76;
  --primary-900: #000753;
  --primary-950: #00012e;

  /* Neutral scale */
  --neutral-50: #f3f5fa;
  --neutral-100: #e5e8ed;
  --neutral-200: #d2d4d9;
  --neutral-300: #b5b7bc;
  --neutral-400: #96989d;
  --neutral-500: #75777c;
  --neutral-600: #595b5f;
  --neutral-700: #3e4044;
  --neutral-800: #292b2f;
  --neutral-900: #17181c;
  --neutral-950: #08090c;

  /* State colors */
  --error: #cc272e;
  --on-error: #ffffff;
  --warning: #daa400;
  --on-warning: #0a0a0a;
  --success: #279936;
  --on-success: #0a0a0a;

  /* Semantic — light */
  --primary: #2c6cf1;
  --on-primary: #ffffff;
  --primary-container: #dce8ff;
  --on-primary-container: #000753;
  --surface: #f3f5fa;
  --on-surface: #17181c;
  --surface-dim: #e5e8ed;
  --surface-bright: #f3f5fa;
  --outline: #96989d;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Semantic — dark */
    --primary: #91b7ff;
    --on-primary: #000753;
    --primary-container: #001d76;
    --on-primary-container: #dce8ff;
    --surface: #08090c;
    --on-surface: #e5e8ed;
    --surface-dim: #17181c;
    --surface-bright: #292b2f;
    --outline: #595b5f;
  }
}