🎨 Color Palette Generator

Generate beautiful color palettes following the Tailwind CSS 50-950 system

Base Color:

Export Design Tokens

Download W3C Design Tokens JSON compatible with Figma plugins (Tokens Studio, etc.)

Primary Palette

50

#eff1f6

100

#dfe4ec

200

#abc4ed

300

#82a7e3

400

#3c83f6

500

#0b64f4

600

#0950c3

700

#073c92

800

#002766

900

#001333

950

#000a1a

50

#eff1f6

100

#dfe4ec

200

#abc4ed

300

#82a7e3

400

#3c83f6

500

#0b64f4

600

#0950c3

700

#073c92

800

#002766

900

#001333

950

#000a1a

50

#eff1f6

100

#dfe4ec

200

#abc4ed

300

#82a7e3

400

#3c83f6

500

#0b64f4

600

#0950c3

700

#073c92

800

#002766

900

#001333

950

#000a1a

Success Colors

50

#f1f5ef

100

#e3ebe0

200

#bfe6b2

300

#9fda8b

400

#73e44e

500

#50dd22

600

#40b11b

700

#308514

800

#1c6006

900

#0e3003

950

#071801

50

#f1f5ef

100

#e3ebe0

200

#bfe6b2

300

#9fda8b

400

#73e44e

500

#50dd22

600

#40b11b

700

#308514

800

#1c6006

900

#0e3003

950

#071801

50

#f1f5ef

100

#e3ebe0

200

#bfe6b2

300

#9fda8b

400

#73e44e

500

#50dd22

600

#40b11b

700

#308514

800

#1c6006

900

#0e3003

950

#071801

Warning Colors

50

#f6f2ef

100

#ece5df

200

#ebccad

300

#e0b285

400

#f09942

500

#ed7f12

600

#bd660f

700

#8e4c0b

800

#663300

900

#331900

950

#1a0d00

50

#f6f2ef

100

#ece5df

200

#ebccad

300

#e0b285

400

#f09942

500

#ed7f12

600

#bd660f

700

#8e4c0b

800

#663300

900

#331900

950

#1a0d00

50

#f6f2ef

100

#ece5df

200

#ebccad

300

#e0b285

400

#f09942

500

#ed7f12

600

#bd660f

700

#8e4c0b

800

#663300

900

#331900

950

#1a0d00

Error Colors

50

#f5eff1

100

#ecdfe2

200

#e9afbd

300

#de879c

400

#ed456f

500

#e8174b

600

#ba123c

700

#8b0e2d

800

#65011a

900

#33000d

950

#190006

50

#f5eff1

100

#ecdfe2

200

#e9afbd

300

#de879c

400

#ed456f

500

#e8174b

600

#ba123c

700

#8b0e2d

800

#65011a

900

#33000d

950

#190006

50

#f5eff1

100

#ecdfe2

200

#e9afbd

300

#de879c

400

#ed456f

500

#e8174b

600

#ba123c

700

#8b0e2d

800

#65011a

900

#33000d

950

#190006

Info Colors

50

#f0f5f4

100

#e0ebe8

200

#b3e5d8

300

#8dd8c5

400

#52e0bc

500

#27d8ac

600

#1fad89

700

#178267

800

#085e48

900

#042f24

950

#021712

50

#f0f5f4

100

#e0ebe8

200

#b3e5d8

300

#8dd8c5

400

#52e0bc

500

#27d8ac

600

#1fad89

700

#178267

800

#085e48

900

#042f24

950

#021712

50

#f0f5f4

100

#e0ebe8

200

#b3e5d8

300

#8dd8c5

400

#52e0bc

500

#27d8ac

600

#1fad89

700

#178267

800

#085e48

900

#042f24

950

#021712

Neutral Colors

50

#fafafa

100

#f4f5f5

200

#e4e5e7

300

#d1d3d6

400

#9fa2a8

500

#6d7178

600

#4e5156

700

#3d3f43

800

#242628

900

#161718

950

#0a0a0b

50

#fafafa

100

#f4f5f5

200

#e4e5e7

300

#d1d3d6

400

#9fa2a8

500

#6d7178

600

#4e5156

700

#3d3f43

800

#242628

900

#161718

950

#0a0a0b

50

#fafafa

100

#f4f5f5

200

#e4e5e7

300

#d1d3d6

400

#9fa2a8

500

#6d7178

600

#4e5156

700

#3d3f43

800

#242628

900

#161718

950

#0a0a0b