Color System Toolkit

Back to app

Primary

#6366f1

50

F7F7F8

100

ECECF2

200

D2D3E9

300

B3B4E7

400

8E90E9

500

6467F2

600

2E31E2

700

2123A8

800

1B1C68

900

0F102E

950

070713

Secondary

#a864f2

50

F7F7F8

100

EFECF2

200

DDD2E9

300

CCB3E7

400

BA8EEA

500

A863F2

600

852CE3

700

6220A9

800

401B68

900

1E0F2E

950

0D0713

Success

#22c55e

50

F7F8F7

100

E5ECE8

200

BCDAC7

300

8BD1A4

400

51CF7F

500

21C45D

600

21974C

700

1E6D3B

800

184629

900

0E2215

950

08120B

Warning

#f59e0b

50

F8F8F7

100

EEEBE6

200

E2D4BD

300

DEC08B

400

E5AE4F

500

F59F0A

600

BA7D12

700

855C14

800

543C12

900

281D0B

950

130E06

Danger

#ef4444

50

F8F7F7

100

F0EAEA

200

E5CACA

300

E2A4A4

400

E57777

500

EF4343

600

D61E1E

700

981E1E

800

5E1919

900

2B0E0E

950

130707

Neutral

#70718f

50

F7F7F7

100

E9EAEB

200

CDCDD2

300

AFB0BA

400

9091A4

500

70718F

600

5B5C71

700

454654

800

2F2F37

900

18181B

950

0C0C0E

CSS
:root {
  /* Primary */
  --color-primary-50: #f7f7f8;
  --color-primary-100: #ececf2;
  --color-primary-200: #d2d3e9;
  --color-primary-300: #b3b4e7;
  --color-primary-400: #8e90e9;
  --color-primary-500: #6467f2;
  --color-primary-600: #2e31e2;
  --color-primary-700: #2123a8;
  --color-primary-800: #1b1c68;
  --color-primary-900: #0f102e;
  --color-primary-950: #070713;
  /* Secondary */
  --color-secondary-50: #f7f7f8;
  --color-secondary-100: #efecf2;
  --color-secondary-200: #ddd2e9;
  --color-secondary-300: #ccb3e7;
  --color-secondary-400: #ba8eea;
  --color-secondary-500: #a863f2;
  --color-secondary-600: #852ce3;
  --color-secondary-700: #6220a9;
  --color-secondary-800: #401b68;
  --color-secondary-900: #1e0f2e;
  --color-secondary-950: #0d0713;
  /* Success */
  --color-success-50: #f7f8f7;
  --color-success-100: #e5ece8;
  --color-success-200: #bcdac7;
  --color-success-300: #8bd1a4;
  --color-success-400: #51cf7f;
  --color-success-500: #21c45d;
  --color-success-600: #21974c;
  --color-success-700: #1e6d3b;
  --color-success-800: #184629;
  --color-success-900: #0e2215;
  --color-success-950: #08120b;
  /* Warning */
  --color-warning-50: #f8f8f7;
  --color-warning-100: #eeebe6;
  --color-warning-200: #e2d4bd;
  --color-warning-300: #dec08b;
  --color-warning-400: #e5ae4f;
  --color-warning-500: #f59f0a;
  --color-warning-600: #ba7d12;
  --color-warning-700: #855c14;
  --color-warning-800: #543c12;
  --color-warning-900: #281d0b;
  --color-warning-950: #130e06;
  /* Danger */
  --color-danger-50: #f8f7f7;
  --color-danger-100: #f0eaea;
  --color-danger-200: #e5caca;
  --color-danger-300: #e2a4a4;
  --color-danger-400: #e57777;
  --color-danger-500: #ef4343;
  --color-danger-600: #d61e1e;
  --color-danger-700: #981e1e;
  --color-danger-800: #5e1919;
  --color-danger-900: #2b0e0e;
  --color-danger-950: #130707;
  /* Neutral */
  --color-neutral-50: #f7f7f7;
  --color-neutral-100: #e9eaeb;
  --color-neutral-200: #cdcdd2;
  --color-neutral-300: #afb0ba;
  --color-neutral-400: #9091a4;
  --color-neutral-500: #70718f;
  --color-neutral-600: #5b5c71;
  --color-neutral-700: #454654;
  --color-neutral-800: #2f2f37;
  --color-neutral-900: #18181b;
  --color-neutral-950: #0c0c0e;
}
Saved (0)

No saved colors yet. Click swatches to save.