Color system

Learn about the color system built on top of Tailwind colors used in Pigment.

Brand scales

Pigment provides 17 scales you can use for your brand or primary color:

Green

#f2fdf5

100

#defce9

200

#bbf7d0

300

#85efac

400

#4ade80

500

#21c45d

600

#158e41

700

#157f3c

800

#166434

900

#14522d

950

#052e16

Emerald

#edfdf5

100

#d1fae5

200

#a5f3cf

300

#6ee7b7

400

#36d399

500

#10b77f

600

#049064

700

#047756

800

#066046

900

#064c39

950

#022c22

Teal

#f2fdfa

100

#cbfbf0

200

#98f6e3

300

#5dead5

400

#2bd4bd

500

#14b8a5

600

#0d8c81

700

#0f756d

800

#115f5a

900

#134e4a

950

#042f2e

Cyan

#ebfeff

100

#cdfafe

200

#a6f4fc

300

#67e8f9

400

#20d3ee

500

#07b6d5

600

#0886a6

700

#0e7490

800

#155f75

900

#164f64

950

#083344

Sky

#f0f9ff

100

#e1f3fe

200

#bae5fd

300

#7ed4fc

400

#3abff8

500

#0da2e7

600

#027dbb

700

#0369a0

800

#075783

900

#0c4a6e

950

#082f49

Blue

#f0f6ff

100

#dcebfe

200

#bedbfe

300

#91c3fd

400

#61a6fa

500

#3c83f6

600

#2463eb

700

#1d4fd7

800

#1e3fae

900

#1e3b8a

950

#172554

Indigo

#f0f3ff

100

#e0e8ff

200

#c8d3fe

300

#a6b4fc

400

#828df8

500

#6467f2

600

#5048e5

700

#463acb

800

#372fa2

900

#312e7f

950

#1e1b4b

Violet

#f7f5ff

100

#ebe7fe

200

#ded7fe

300

#c3b4fd

400

#a689fa

500

#895af6

600

#7c3bed

700

#6b26d9

800

#5a21b5

900

#4d1d95

950

#2e1065

Purple

#faf5ff

100

#f2e6ff

200

#ead6ff

300

#d8b4fe

400

#bf83fc

500

#a855f7

600

#9234ea

700

#7e22ce

800

#6a21a6

900

#591c87

950

#3c0764

Fuchsia

#fdf5ff

100

#f9e6ff

200

#f5d2fe

300

#f0abfc

400

#e87bf9

500

#d948ef

600

#bf27d3

700

#a31daf

800

#85198f

900

#711a75

950

#4a044e

Pink

#fdf2f8

100

#fce8f4

200

#fbd0e8

300

#f9a9d5

400

#f471b5

500

#ec4699

600

#db2979

700

#bf185d

800

#9b174c

900

#811842

950

#500724

Rose

#fff0f1

100

#ffe6e7

200

#fecdd3

300

#fda5af

400

#fb6f84

500

#f43e5c

600

#e21d48

700

#bf123d

800

#a1123a

900

#861336

950

#4d0519

Red

#fef1f1

100

#fee1e1

200

#fec8c8

300

#fca6a6

400

#f87272

500

#ef4343

600

#dc2828

700

#ba1c1c

800

#981b1b

900

#811d1d

950

#430a0a

Orange

#fff6eb

100

#ffedd6

200

#fed6a9

300

#fdba72

400

#fb923c

500

#f97415

600

#d95108

700

#c03f0c

800

#9b3412

900

#7d2d12

950

#451507

Amber

#fffbeb

100

#fef3c8

200

#fde68b

300

#fcd44f

400

#fbbd23

500

#f59f0a

600

#db7706

700

#b35309

800

#91400d

900

#76350f

950

#451a03

Yellow

#fefce7

100

#fef9c3

200

#fef08b

300

#fddf49

400

#facc14

500

#e7b008

600

#c88a04

700

#a26107

800

#864e0e

900

#733f12

950

#412006

Lime

#f7fee7

100

#ebfcca

200

#d9f99f

300

#bef263

400

#a1e633

500

#82cb15

600

#66a50d

700

#4c7b0f

800

#406312

900

#355214

950

#1a2e05

Gray scales

Pigment provides 7 gray scales which can be used for texts, borders and backgrounds:

Gray

#fafafa

100

#f5f5f5

200

#e6e6e6

300

#d4d4d4

400

#a3a3a3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

950

#0a0a0a

Mauve

#faf9fb

100

#f5f3f6

200

#e8e5eb

300

#d6d1db

400

#a69cb0

500

#766b80

600

#574b63

700

#463852

800

#2d1f37

900

#1e1127

950

#0b0311

Slate

#f9fafb

100

#f3f5f6

200

#e5e8eb

300

#d1d6db

400

#9ca5b0

500

#6b7380

600

#4b5263

700

#383f52

800

#1f2537

900

#111727

950

#030611

Sage

#f9fbf9

100

#f3f6f4

200

#e5ebe7

300

#d1dbd5

400

#9cb0a3

500

#6b8072

600

#4b6353

700

#385241

800

#1f3729

900

#11271a

950

#031109

Olive

#fafbf9

100

#f5f6f3

200

#e9ebe5

300

#d8dbd1

400

#a8b09c

500

#77806b

600

#59634b

700

#475238

800

#2d371f

900

#1d2711

950

#0a1103

Sand

#fbfbf9

100

#f6f6f3

200

#ebeae5

300

#dbd9d1

400

#b0ac9c

500

#807b6b

600

#635b4b

700

#524738

800

#372c1f

900

#271b11

950

#110903

Marron

#fbf9f9

100

#f6f3f3

200

#ebe5e5

300

#dbd1d1

400

#b09c9c

500

#806b6b

600

#634b4b

700

#523838

800

#371f1f

900

#271111

950

#110303

gray is pure gray.
mauve is based on desaturated purple hues.
slate is based on desaturated blue hues.
sage is based on desaturated green hues.
olive is based on desaturated lime hues.
sand is based on desaturated yellow hues.
maroon is based on desaturated red hues.

Composing a color palette

Neutral pairing

gray work well with any hue if you want a neutral vibe.

Natural pairing

Choose the gray scale which is saturated with the hue closest to your brand color to create a more harmonious vibe.