Color Preview

Pick a color and see it applied to a complete UI mockup with automatic tint/shade scale.

Primary Color

Color Scale

50100200300400500600700800900950

CSS Variables

css

:root {
  --color-50: #dadbfc;
  --color-100: #cdcefb;
  --color-200: #b3b4f8;
  --color-300: #999af6;
  --color-400: #7e80f4;
  --color-500: #6467f2;
  --color-600: #2529ec;
  --color-700: #1013bd;
  --color-800: #0b0d7e;
  --color-900: #05063f;
  --color-950: #03031f;
}

UI Preview

New Feature