Other Colors

These colors are fixed and do not change with any color theme. These color values are available for use as backgrounds, or textual elements and utilize CSS variables.

Example: Background Colors

.bg-pink

.bg-pink-dark-50

.bg-pink-dark-40

.bg-pink-dark-30

.bg-pink-dark-20

.bg-pink-dark-10

.bg-pink-90

.bg-pink-80

.bg-pink-70

.bg-pink-60

.bg-pink-50

.bg-pink-40

.bg-pink-30

.bg-pink-20

.bg-pink-10

.bg-pink-5

.bg-pink-3

Copy

                                            
                                                <div class="bg-pink">...</div>

.bg-red

.bg-red-dark-50

.bg-red-dark-40

.bg-red-dark-30

.bg-red-dark-20

.bg-red-dark-10

.bg-red-90

.bg-red-80

.bg-red-70

.bg-red-60

.bg-red-50

.bg-red-40

.bg-red-30

.bg-red-20

.bg-red-10

.bg-red-5

.bg-red-3

Copy

                                            
                                                <div class="bg-red">...</div>

.bg-orange

.bg-orange-dark-50

.bg-orange-dark-40

.bg-orange-dark-30

.bg-orange-dark-20

.bg-orange-dark-10

.bg-orange-90

.bg-orange-80

.bg-orange-70

.bg-orange-60

.bg-orange-50

.bg-orange-40

.bg-orange-30

.bg-orange-20

.bg-orange-10

.bg-orange-5

.bg-orange-3

Copy

                                            
                                                <div class="bg-orange">...</div>

.bg-yellow

.bg-yellow-dark-50

.bg-yellow-dark-40

.bg-yellow-dark-30

.bg-yellow-dark-20

.bg-yellow-dark-10

.bg-yellow-90

.bg-yellow-80

.bg-yellow-70

.bg-yellow-60

.bg-yellow-50

.bg-yellow-40

.bg-yellow-30

.bg-yellow-20

.bg-yellow-10

.bg-yellow-5

.bg-yellow-3

Copy

                                            
                                                <div class="bg-yellow">...</div>

.bg-lime

.bg-lime-dark-50

.bg-lime-dark-40

.bg-lime-dark-30

.bg-lime-dark-20

.bg-lime-dark-10

.bg-lime-90

.bg-lime-80

.bg-lime-70

.bg-lime-60

.bg-lime-50

.bg-lime-40

.bg-lime-30

.bg-lime-20

.bg-lime-10

.bg-lime-5

.bg-lime-3

Copy

                                            
                                                <div class="bg-lime">...</div>

.bg-mint

.bg-mint-dark-50

.bg-mint-dark-40

.bg-mint-dark-30

.bg-mint-dark-20

.bg-mint-dark-10

.bg-mint-90

.bg-mint-80

.bg-mint-70

.bg-mint-60

.bg-mint-50

.bg-mint-40

.bg-mint-30

.bg-mint-20

.bg-mint-10

.bg-mint-5

.bg-mint-3

Copy

                                            
                                                <div class="bg-mint">...</div>

.bg-green

.bg-green-dark-50

.bg-green-dark-40

.bg-green-dark-30

.bg-green-dark-20

.bg-green-dark-10

.bg-green-90

.bg-green-80

.bg-green-70

.bg-green-60

.bg-green-50

.bg-green-40

.bg-green-30

.bg-green-20

.bg-green-10

.bg-green-5

.bg-green-3

Copy

                                            
                                                <div class="bg-green">...</div>

.bg-sage

.bg-sage-dark-50

.bg-sage-dark-40

.bg-sage-dark-30

.bg-sage-dark-20

.bg-sage-dark-10

.bg-sage-90

.bg-sage-80

.bg-sage-70

.bg-sage-60

.bg-sage-50

.bg-sage-40

.bg-sage-30

.bg-sage-20

.bg-sage-10

.bg-sage-5

.bg-sage-3

Copy

                                            
                                                <div class="bg-sage">...</div>

.bg-teal

.bg-teal-dark-50

.bg-teal-dark-40

.bg-teal-dark-30

.bg-teal-dark-20

.bg-teal-dark-10

.bg-teal-90

.bg-teal-80

.bg-teal-70

.bg-teal-60

.bg-teal-50

.bg-teal-40

.bg-teal-30

.bg-teal-20

.bg-teal-10

.bg-teal-5

.bg-teal-3

Copy

                                            
                                                <div class="bg-teal">...</div>

.bg-cyan

.bg-cyan-dark-50

.bg-cyan-dark-40

.bg-cyan-dark-30

.bg-cyan-dark-20

.bg-cyan-dark-10

.bg-cyan-90

.bg-cyan-80

.bg-cyan-70

.bg-cyan-60

.bg-cyan-50

.bg-cyan-40

.bg-cyan-30

.bg-cyan-20

.bg-cyan-10

.bg-cyan-5

.bg-cyan-3

Copy

                                            
                                                <div class="bg-cyan">...</div>

.bg-blue

.bg-blue-dark-50

.bg-blue-dark-40

.bg-blue-dark-30

.bg-blue-dark-20

.bg-blue-dark-10

.bg-blue-90

.bg-blue-80

.bg-blue-70

.bg-blue-60

.bg-blue-50

.bg-blue-40

.bg-blue-30

.bg-blue-20

.bg-blue-10

.bg-blue-5

.bg-blue-3

Copy

                                            
                                                <div class="bg-blue">...</div>

.bg-slate

.bg-slate-dark-50

.bg-slate-dark-40

.bg-slate-dark-30

.bg-slate-dark-20

.bg-slate-dark-10

.bg-slate-90

.bg-slate-80

.bg-slate-70

.bg-slate-60

.bg-slate-50

.bg-slate-40

.bg-slate-30

.bg-slate-20

.bg-slate-10

.bg-slate-5

.bg-slate-3

Copy

                                            
                                                <div class="bg-slate">...</div>

.bg-navy

.bg-navy-dark-50

.bg-navy-dark-40

.bg-navy-dark-30

.bg-navy-dark-20

.bg-navy-dark-10

.bg-navy-90

.bg-navy-80

.bg-navy-70

.bg-navy-60

.bg-navy-50

.bg-navy-40

.bg-navy-30

.bg-navy-20

.bg-navy-10

.bg-navy-5

.bg-navy-3

Copy

                                            
                                                <div class="bg-navy">...</div>

.bg-indigo

.bg-indigo-dark-50

.bg-indigo-dark-40

.bg-indigo-dark-30

.bg-indigo-dark-20

.bg-indigo-dark-10

.bg-indigo-90

.bg-indigo-80

.bg-indigo-70

.bg-indigo-60

.bg-indigo-50

.bg-indigo-40

.bg-indigo-30

.bg-indigo-20

.bg-indigo-10

.bg-indigo-5

.bg-indigo-3

Copy

                                            
                                                <div class="bg-indigo">...</div>

.bg-magenta

.bg-magenta-dark-50

.bg-magenta-dark-40

.bg-magenta-dark-30

.bg-magenta-dark-20

.bg-magenta-dark-10

.bg-magenta-90

.bg-magenta-80

.bg-magenta-70

.bg-magenta-60

.bg-magenta-50

.bg-magenta-40

.bg-magenta-30

.bg-magenta-20

.bg-magenta-10

.bg-magenta-5

.bg-magenta-3

Copy

                                            
                                                <div class="bg-magenta">...</div>

.bg-purple

.bg-purple-dark-50

.bg-purple-dark-40

.bg-purple-dark-30

.bg-purple-dark-20

.bg-purple-dark-10

.bg-purple-90

.bg-purple-80

.bg-purple-70

.bg-purple-60

.bg-purple-50

.bg-purple-40

.bg-purple-30

.bg-purple-20

.bg-purple-10

.bg-purple-5

.bg-purple-3

Copy

                                            
                                                <div class="bg-purple">...</div>

.bg-brown

.bg-brown-dark-50

.bg-brown-dark-40

.bg-brown-dark-30

.bg-brown-dark-20

.bg-brown-dark-10

.bg-brown-90

.bg-brown-80

.bg-brown-70

.bg-brown-60

.bg-brown-50

.bg-brown-40

.bg-brown-30

.bg-brown-20

.bg-brown-10

.bg-brown-5

.bg-brown-3

Copy

                                            
                                                <div class="bg-brown">...</div>

.bg-gray

.bg-gray-dark-50

.bg-gray-dark-40

.bg-gray-dark-30

.bg-gray-dark-20

.bg-gray-dark-10

.bg-gray-90

.bg-gray-80

.bg-gray-70

.bg-gray-60

.bg-gray-50

.bg-gray-40

.bg-gray-30

.bg-gray-20

.bg-gray-10

.bg-gray-5

.bg-gray-3

Copy

                                            
                                                <div class="bg-gray">...</div>

.bg-black

.bg-black-90

.bg-black-80

.bg-black-70

.bg-black-60

.bg-black-50

.bg-black-40

.bg-black-30

.bg-black-20

.bg-black-10

.bg-black-5

.bg-black-3

Copy

                                            
                                                <div class="bg-black">...</div>

.bg-white

.bg-white-90

.bg-white-80

.bg-white-70

.bg-white-60

.bg-white-50

.bg-white-40

.bg-white-30

.bg-white-20

.bg-white-10

.bg-white-5

.bg-white-3

Copy

                                            
                                                <div class="bg-white">...</div>

Example: Border Colors

.bc-pink

.bc-pink-dark-50

.bc-pink-dark-40

.bc-pink-dark-30

.bc-pink-dark-20

.bc-pink-dark-10

.bc-pink-90

.bc-pink-80

.bc-pink-70

.bc-pink-60

.bc-pink-50

.bc-pink-40

.bc-pink-30

.bc-pink-20

.bc-pink-10

.bc-pink-5

.bc-pink-3

Copy

                                            
                                                <div class="bc-pink">...</p>

.bc-red

.bc-red-dark-50

.bc-red-dark-40

.bc-red-dark-30

.bc-red-dark-20

.bc-red-dark-10

.bc-red-90

.bc-red-80

.bc-red-70

.bc-red-60

.bc-red-50

.bc-red-40

.bc-red-30

.bc-red-20

.bc-red-10

.bc-red-5

.bc-red-3

Copy

                                            
                                                <div class="bc-red">...</p>

.bc-orange

.bc-orange-dark-50

.bc-orange-dark-40

.bc-orange-dark-30

.bc-orange-dark-20

.bc-orange-dark-10

.bc-orange-90

.bc-orange-80

.bc-orange-70

.bc-orange-60

.bc-orange-50

.bc-orange-40

.bc-orange-30

.bc-orange-20

.bc-orange-10

.bc-orange-5

.bc-orange-3

Copy

                                            
                                                <div class="bc-orange">...</p>

.bc-yellow

.bc-yellow-dark-50

.bc-yellow-dark-40

.bc-yellow-dark-30

.bc-yellow-dark-20

.bc-yellow-dark-10

.bc-yellow-90

.bc-yellow-80

.bc-yellow-70

.bc-yellow-60

.bc-yellow-50

.bc-yellow-40

.bc-yellow-30

.bc-yellow-20

.bc-yellow-10

.bc-yellow-5

.bc-yellow-3

Copy

                                            
                                                <div class="bc-yellow">...</p>

.bc-lime

.bc-lime-dark-50

.bc-lime-dark-40

.bc-lime-dark-30

.bc-lime-dark-20

.bc-lime-dark-10

.bc-lime-90

.bc-lime-80

.bc-lime-70

.bc-lime-60

.bc-lime-50

.bc-lime-40

.bc-lime-30

.bc-lime-20

.bc-lime-10

.bc-lime-5

.bc-lime-3

Copy

                                            
                                                <div class="bc-lime">...</p>

.bc-mint

.bc-mint-dark-50

.bc-mint-dark-40

.bc-mint-dark-30

.bc-mint-dark-20

.bc-mint-dark-10

.bc-mint-90

.bc-mint-80

.bc-mint-70

.bc-mint-60

.bc-mint-50

.bc-mint-40

.bc-mint-30

.bc-mint-20

.bc-mint-10

.bc-mint-5

.bc-mint-3

Copy

                                            
                                                <div class="bc-mint">...</p>

.bc-green

.bc-green-dark-50

.bc-green-dark-40

.bc-green-dark-30

.bc-green-dark-20

.bc-green-dark-10

.bc-green-90

.bc-green-80

.bc-green-70

.bc-green-60

.bc-green-50

.bc-green-40

.bc-green-30

.bc-green-20

.bc-green-10

.bc-green-5

.bc-green-3

Copy

                                            
                                                <div class="bc-green">...</p>

.bc-sage

.bc-sage-dark-50

.bc-sage-dark-40

.bc-sage-dark-30

.bc-sage-dark-20

.bc-sage-dark-10

.bc-sage-90

.bc-sage-80

.bc-sage-70

.bc-sage-60

.bc-sage-50

.bc-sage-40

.bc-sage-30

.bc-sage-20

.bc-sage-10

.bc-sage-5

.bc-sage-3

Copy

                                            
                                                <div class="bc-sage">...</p>

.bc-teal

.bc-teal-dark-50

.bc-teal-dark-40

.bc-teal-dark-30

.bc-teal-dark-20

.bc-teal-dark-10

.bc-teal-90

.bc-teal-80

.bc-teal-70

.bc-teal-60

.bc-teal-50

.bc-teal-40

.bc-teal-30

.bc-teal-20

.bc-teal-10

.bc-teal-5

.bc-teal-3

Copy

                                            
                                                <div class="bc-teal">...</p>

.bc-cyan

.bc-cyan-dark-50

.bc-cyan-dark-40

.bc-cyan-dark-30

.bc-cyan-dark-20

.bc-cyan-dark-10

.bc-cyan-90

.bc-cyan-80

.bc-cyan-70

.bc-cyan-60

.bc-cyan-50

.bc-cyan-40

.bc-cyan-30

.bc-cyan-20

.bc-cyan-10

.bc-cyan-5

.bc-cyan-3

Copy

                                            
                                                <div class="bc-cyan">...</p>

.bc-blue

.bc-blue-dark-50

.bc-blue-dark-40

.bc-blue-dark-30

.bc-blue-dark-20

.bc-blue-dark-10

.bc-blue-90

.bc-blue-80

.bc-blue-70

.bc-blue-60

.bc-blue-50

.bc-blue-40

.bc-blue-30

.bc-blue-20

.bc-blue-10

.bc-blue-5

.bc-blue-3

Copy

                                            
                                                <div class="bc-blue">...</p>

.bc-slate

.bc-slate-dark-50

.bc-slate-dark-40

.bc-slate-dark-30

.bc-slate-dark-20

.bc-slate-dark-10

.bc-slate-90

.bc-slate-80

.bc-slate-70

.bc-slate-60

.bc-slate-50

.bc-slate-40

.bc-slate-30

.bc-slate-20

.bc-slate-10

.bc-slate-5

.bc-slate-3

Copy

                                            
                                                <div class="bc-slate">...</p>

.bc-navy

.bc-navy-dark-50

.bc-navy-dark-40

.bc-navy-dark-30

.bc-navy-dark-20

.bc-navy-dark-10

.bc-navy-90

.bc-navy-80

.bc-navy-70

.bc-navy-60

.bc-navy-50

.bc-navy-40

.bc-navy-30

.bc-navy-20

.bc-navy-10

.bc-navy-5

.bc-navy-3

Copy

                                            
                                                <div class="bc-navy">...</p>

.bc-indigo

.bc-indigo-dark-50

.bc-indigo-dark-40

.bc-indigo-dark-30

.bc-indigo-dark-20

.bc-indigo-dark-10

.bc-indigo-90

.bc-indigo-80

.bc-indigo-70

.bc-indigo-60

.bc-indigo-50

.bc-indigo-40

.bc-indigo-30

.bc-indigo-20

.bc-indigo-10

.bc-indigo-5

.bc-indigo-3

Copy

                                            
                                                <div class="bc-indigo">...</p>

.bc-magenta

.bc-magenta-dark-50

.bc-magenta-dark-40

.bc-magenta-dark-30

.bc-magenta-dark-20

.bc-magenta-dark-10

.bc-magenta-90

.bc-magenta-80

.bc-magenta-70

.bc-magenta-60

.bc-magenta-50

.bc-magenta-40

.bc-magenta-30

.bc-magenta-20

.bc-magenta-10

.bc-magenta-5

.bc-magenta-3

Copy

                                            
                                                <div class="bc-magenta">...</p>

.bc-purple

.bc-purple-dark-50

.bc-purple-dark-40

.bc-purple-dark-30

.bc-purple-dark-20

.bc-purple-dark-10

.bc-purple-90

.bc-purple-80

.bc-purple-70

.bc-purple-60

.bc-purple-50

.bc-purple-40

.bc-purple-30

.bc-purple-20

.bc-purple-10

.bc-purple-5

.bc-purple-3

Copy

                                            
                                                <div class="bc-purple">...</p>

.bc-brown

.bc-brown-dark-50

.bc-brown-dark-40

.bc-brown-dark-30

.bc-brown-dark-20

.bc-brown-dark-10

.bc-brown-90

.bc-brown-80

.bc-brown-70

.bc-brown-60

.bc-brown-50

.bc-brown-40

.bc-brown-30

.bc-brown-20

.bc-brown-10

.bc-brown-5

.bc-brown-3

Copy

                                            
                                                <div class="bc-brown">...</p>

.bc-gray

.bc-gray-dark-50

.bc-gray-dark-40

.bc-gray-dark-30

.bc-gray-dark-20

.bc-gray-dark-10

.bc-gray-90

.bc-gray-80

.bc-gray-70

.bc-gray-60

.bc-gray-50

.bc-gray-40

.bc-gray-30

.bc-gray-20

.bc-gray-10

.bc-gray-5

.bc-gray-3

Copy

                                            
                                                <div class="bc-gray">...</p>

.bc-black

.bc-black-90

.bc-black-80

.bc-black-70

.bc-black-60

.bc-black-50

.bc-black-40

.bc-black-30

.bc-black-20

.bc-black-10

.bc-black-5

.bc-black-3

Copy

                                            
                                                <div class="bc-black">...</p>

.bc-white

.bc-white-90

.bc-white-80

.bc-white-70

.bc-white-60

.bc-white-50

.bc-white-40

.bc-white-30

.bc-white-20

.bc-white-10

.bc-white-5

.bc-white-3

Copy

                                            
                                                <div class="bc-white">...</p>

Example: Text Colors

.text-pink

.text-pink-dark-50

.text-pink-dark-40

.text-pink-dark-30

.text-pink-dark-20

.text-pink-dark-10

.text-pink-90

.text-pink-80

.text-pink-70

.text-pink-60

.text-pink-50

.text-pink-40

.text-pink-30

.text-pink-20

.text-pink-10

.text-pink-5

.text-pink-3

Copy

                                            
                                                <p class="text-pink">...</p>

.text-red

.text-red-dark-50

.text-red-dark-40

.text-red-dark-30

.text-red-dark-20

.text-red-dark-10

.text-red-90

.text-red-80

.text-red-70

.text-red-60

.text-red-50

.text-red-40

.text-red-30

.text-red-20

.text-red-10

.text-red-5

.text-red-3

Copy

                                            
                                                <p class="text-red">...</p>

.text-orange

.text-orange-dark-50

.text-orange-dark-40

.text-orange-dark-30

.text-orange-dark-20

.text-orange-dark-10

.text-orange-90

.text-orange-80

.text-orange-70

.text-orange-60

.text-orange-50

.text-orange-40

.text-orange-30

.text-orange-20

.text-orange-10

.text-orange-5

.text-orange-3

Copy

                                            
                                                <p class="text-orange">...</p>

.text-yellow

.text-yellow-dark-50

.text-yellow-dark-40

.text-yellow-dark-30

.text-yellow-dark-20

.text-yellow-dark-10

.text-yellow-90

.text-yellow-80

.text-yellow-70

.text-yellow-60

.text-yellow-50

.text-yellow-40

.text-yellow-30

.text-yellow-20

.text-yellow-10

.text-yellow-5

.text-yellow-3

Copy

                                            
                                                <p class="text-yellow">...</p>

.text-lime

.text-lime-dark-50

.text-lime-dark-40

.text-lime-dark-30

.text-lime-dark-20

.text-lime-dark-10

.text-lime-90

.text-lime-80

.text-lime-70

.text-lime-60

.text-lime-50

.text-lime-40

.text-lime-30

.text-lime-20

.text-lime-10

.text-lime-5

.text-lime-3

Copy

                                            
                                                <p class="text-lime">...</p>

.text-mint

.text-mint-dark-50

.text-mint-dark-40

.text-mint-dark-30

.text-mint-dark-20

.text-mint-dark-10

.text-mint-90

.text-mint-80

.text-mint-70

.text-mint-60

.text-mint-50

.text-mint-40

.text-mint-30

.text-mint-20

.text-mint-10

.text-mint-5

.text-mint-3

Copy

                                            
                                                <p class="text-mint">...</p>

.text-green

.text-green-dark-50

.text-green-dark-40

.text-green-dark-30

.text-green-dark-20

.text-green-dark-10

.text-green-90

.text-green-80

.text-green-70

.text-green-60

.text-green-50

.text-green-40

.text-green-30

.text-green-20

.text-green-10

.text-green-5

.text-green-3

Copy

                                            
                                                <p class="text-green">...</p>

.text-sage

.text-sage-dark-50

.text-sage-dark-40

.text-sage-dark-30

.text-sage-dark-20

.text-sage-dark-10

.text-sage-90

.text-sage-80

.text-sage-70

.text-sage-60

.text-sage-50

.text-sage-40

.text-sage-30

.text-sage-20

.text-sage-10

.text-sage-5

.text-sage-3

Copy

                                            
                                                <p class="text-sage">...</p>

.text-teal

.text-teal-dark-50

.text-teal-dark-40

.text-teal-dark-30

.text-teal-dark-20

.text-teal-dark-10

.text-teal-90

.text-teal-80

.text-teal-70

.text-teal-60

.text-teal-50

.text-teal-40

.text-teal-30

.text-teal-20

.text-teal-10

.text-teal-5

.text-teal-3

Copy

                                            
                                                <p class="text-teal">...</p>

.text-cyan

.text-cyan-dark-50

.text-cyan-dark-40

.text-cyan-dark-30

.text-cyan-dark-20

.text-cyan-dark-10

.text-cyan-90

.text-cyan-80

.text-cyan-70

.text-cyan-60

.text-cyan-50

.text-cyan-40

.text-cyan-30

.text-cyan-20

.text-cyan-10

.text-cyan-5

.text-cyan-3

Copy

                                            
                                                <p class="text-cyan">...</p>

.text-blue

.text-blue-dark-50

.text-blue-dark-40

.text-blue-dark-30

.text-blue-dark-20

.text-blue-dark-10

.text-blue-90

.text-blue-80

.text-blue-70

.text-blue-60

.text-blue-50

.text-blue-40

.text-blue-30

.text-blue-20

.text-blue-10

.text-blue-5

.text-blue-3

Copy

                                            
                                                <p class="text-blue">...</p>

.text-slate

.text-slate-dark-50

.text-slate-dark-40

.text-slate-dark-30

.text-slate-dark-20

.text-slate-dark-10

.text-slate-90

.text-slate-80

.text-slate-70

.text-slate-60

.text-slate-50

.text-slate-40

.text-slate-30

.text-slate-20

.text-slate-10

.text-slate-5

.text-slate-3

Copy

                                            
                                                <p class="text-slate">...</p>

.text-navy

.text-navy-dark-50

.text-navy-dark-40

.text-navy-dark-30

.text-navy-dark-20

.text-navy-dark-10

.text-navy-90

.text-navy-80

.text-navy-70

.text-navy-60

.text-navy-50

.text-navy-40

.text-navy-30

.text-navy-20

.text-navy-10

.text-navy-5

.text-navy-3

Copy

                                            
                                                <p class="text-navy">...</p>

.text-indigo

.text-indigo-dark-50

.text-indigo-dark-40

.text-indigo-dark-30

.text-indigo-dark-20

.text-indigo-dark-10

.text-indigo-90

.text-indigo-80

.text-indigo-70

.text-indigo-60

.text-indigo-50

.text-indigo-40

.text-indigo-30

.text-indigo-20

.text-indigo-10

.text-indigo-5

.text-indigo-3

Copy

                                            
                                                <p class="text-indigo">...</p>

.text-magenta

.text-magenta-dark-50

.text-magenta-dark-40

.text-magenta-dark-30

.text-magenta-dark-20

.text-magenta-dark-10

.text-magenta-90

.text-magenta-80

.text-magenta-70

.text-magenta-60

.text-magenta-50

.text-magenta-40

.text-magenta-30

.text-magenta-20

.text-magenta-10

.text-magenta-5

.text-magenta-3

Copy

                                            
                                                <p class="text-magenta">...</p>

.text-purple

.text-purple-dark-50

.text-purple-dark-40

.text-purple-dark-30

.text-purple-dark-20

.text-purple-dark-10

.text-purple-90

.text-purple-80

.text-purple-70

.text-purple-60

.text-purple-50

.text-purple-40

.text-purple-30

.text-purple-20

.text-purple-10

.text-purple-5

.text-purple-3

Copy

                                            
                                                <p class="text-purple">...</p>

.text-brown

.text-brown-dark-50

.text-brown-dark-40

.text-brown-dark-30

.text-brown-dark-20

.text-brown-dark-10

.text-brown-90

.text-brown-80

.text-brown-70

.text-brown-60

.text-brown-50

.text-brown-40

.text-brown-30

.text-brown-20

.text-brown-10

.text-brown-5

.text-brown-3

Copy

                                            
                                                <p class="text-brown">...</p>

.text-gray

.text-gray-dark-50

.text-gray-dark-40

.text-gray-dark-30

.text-gray-dark-20

.text-gray-dark-10

.text-gray-90

.text-gray-80

.text-gray-70

.text-gray-60

.text-gray-50

.text-gray-40

.text-gray-30

.text-gray-20

.text-gray-10

.text-gray-5

.text-gray-3

Copy

                                            
                                                <p class="text-gray">...</p>

.text-black

.text-black-90

.text-black-80

.text-black-70

.text-black-60

.text-black-50

.text-black-40

.text-black-30

.text-black-20

.text-black-10

.text-black-5

.text-black-3

Copy

                                            
                                                <p class="text-black">...</p>

.text-white

.text-white-90

.text-white-80

.text-white-70

.text-white-60

.text-white-50

.text-white-40

.text-white-30

.text-white-20

.text-white-10

.text-white-5

.text-white-3

Copy

                                            
                                                <p class="text-white">...</p>

Example: Fill Colors

.fill-pink

.fill-pink-dark-50

.fill-pink-dark-40

.fill-pink-dark-30

.fill-pink-dark-20

.fill-pink-dark-10

.fill-pink-90

.fill-pink-80

.fill-pink-70

.fill-pink-60

.fill-pink-50

.fill-pink-40

.fill-pink-30

.fill-pink-20

.fill-pink-10

.fill-pink-5

.fill-pink-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-pink" /></svg>

.fill-red

.fill-red-dark-50

.fill-red-dark-40

.fill-red-dark-30

.fill-red-dark-20

.fill-red-dark-10

.fill-red-90

.fill-red-80

.fill-red-70

.fill-red-60

.fill-red-50

.fill-red-40

.fill-red-30

.fill-red-20

.fill-red-10

.fill-red-5

.fill-red-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-red" /></svg>

.fill-orange

.fill-orange-dark-50

.fill-orange-dark-40

.fill-orange-dark-30

.fill-orange-dark-20

.fill-orange-dark-10

.fill-orange-90

.fill-orange-80

.fill-orange-70

.fill-orange-60

.fill-orange-50

.fill-orange-40

.fill-orange-30

.fill-orange-20

.fill-orange-10

.fill-orange-5

.fill-orange-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-orange" /></svg>

.fill-yellow

.fill-yellow-dark-50

.fill-yellow-dark-40

.fill-yellow-dark-30

.fill-yellow-dark-20

.fill-yellow-dark-10

.fill-yellow-90

.fill-yellow-80

.fill-yellow-70

.fill-yellow-60

.fill-yellow-50

.fill-yellow-40

.fill-yellow-30

.fill-yellow-20

.fill-yellow-10

.fill-yellow-5

.fill-yellow-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-yellow" /></svg>

.fill-lime

.fill-lime-dark-50

.fill-lime-dark-40

.fill-lime-dark-30

.fill-lime-dark-20

.fill-lime-dark-10

.fill-lime-90

.fill-lime-80

.fill-lime-70

.fill-lime-60

.fill-lime-50

.fill-lime-40

.fill-lime-30

.fill-lime-20

.fill-lime-10

.fill-lime-5

.fill-lime-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-lime" /></svg>

.fill-mint

.fill-mint-dark-50

.fill-mint-dark-40

.fill-mint-dark-30

.fill-mint-dark-20

.fill-mint-dark-10

.fill-mint-90

.fill-mint-80

.fill-mint-70

.fill-mint-60

.fill-mint-50

.fill-mint-40

.fill-mint-30

.fill-mint-20

.fill-mint-10

.fill-mint-5

.fill-mint-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-mint" /></svg>

.fill-green

.fill-green-dark-50

.fill-green-dark-40

.fill-green-dark-30

.fill-green-dark-20

.fill-green-dark-10

.fill-green-90

.fill-green-80

.fill-green-70

.fill-green-60

.fill-green-50

.fill-green-40

.fill-green-30

.fill-green-20

.fill-green-10

.fill-green-5

.fill-green-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-green" /></svg>

.fill-sage

.fill-sage-dark-50

.fill-sage-dark-40

.fill-sage-dark-30

.fill-sage-dark-20

.fill-sage-dark-10

.fill-sage-90

.fill-sage-80

.fill-sage-70

.fill-sage-60

.fill-sage-50

.fill-sage-40

.fill-sage-30

.fill-sage-20

.fill-sage-10

.fill-sage-5

.fill-sage-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-sage" /></svg>

.fill-teal

.fill-teal-dark-50

.fill-teal-dark-40

.fill-teal-dark-30

.fill-teal-dark-20

.fill-teal-dark-10

.fill-teal-90

.fill-teal-80

.fill-teal-70

.fill-teal-60

.fill-teal-50

.fill-teal-40

.fill-teal-30

.fill-teal-20

.fill-teal-10

.fill-teal-5

.fill-teal-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-teal" /></svg>

.fill-cyan

.fill-cyan-dark-50

.fill-cyan-dark-40

.fill-cyan-dark-30

.fill-cyan-dark-20

.fill-cyan-dark-10

.fill-cyan-90

.fill-cyan-80

.fill-cyan-70

.fill-cyan-60

.fill-cyan-50

.fill-cyan-40

.fill-cyan-30

.fill-cyan-20

.fill-cyan-10

.fill-cyan-5

.fill-cyan-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-cyan" /></svg>

.fill-blue

.fill-blue-dark-50

.fill-blue-dark-40

.fill-blue-dark-30

.fill-blue-dark-20

.fill-blue-dark-10

.fill-blue-90

.fill-blue-80

.fill-blue-70

.fill-blue-60

.fill-blue-50

.fill-blue-40

.fill-blue-30

.fill-blue-20

.fill-blue-10

.fill-blue-5

.fill-blue-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-blue" /></svg>

.fill-slate

.fill-slate-dark-50

.fill-slate-dark-40

.fill-slate-dark-30

.fill-slate-dark-20

.fill-slate-dark-10

.fill-slate-90

.fill-slate-80

.fill-slate-70

.fill-slate-60

.fill-slate-50

.fill-slate-40

.fill-slate-30

.fill-slate-20

.fill-slate-10

.fill-slate-5

.fill-slate-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-slate" /></svg>

.fill-navy

.fill-navy-dark-50

.fill-navy-dark-40

.fill-navy-dark-30

.fill-navy-dark-20

.fill-navy-dark-10

.fill-navy-90

.fill-navy-80

.fill-navy-70

.fill-navy-60

.fill-navy-50

.fill-navy-40

.fill-navy-30

.fill-navy-20

.fill-navy-10

.fill-navy-5

.fill-navy-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-navy" /></svg>

.fill-indigo

.fill-indigo-dark-50

.fill-indigo-dark-40

.fill-indigo-dark-30

.fill-indigo-dark-20

.fill-indigo-dark-10

.fill-indigo-90

.fill-indigo-80

.fill-indigo-70

.fill-indigo-60

.fill-indigo-50

.fill-indigo-40

.fill-indigo-30

.fill-indigo-20

.fill-indigo-10

.fill-indigo-5

.fill-indigo-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-indigo" /></svg>

.fill-magenta

.fill-magenta-dark-50

.fill-magenta-dark-40

.fill-magenta-dark-30

.fill-magenta-dark-20

.fill-magenta-dark-10

.fill-magenta-90

.fill-magenta-80

.fill-magenta-70

.fill-magenta-60

.fill-magenta-50

.fill-magenta-40

.fill-magenta-30

.fill-magenta-20

.fill-magenta-10

.fill-magenta-5

.fill-magenta-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-magenta" /></svg>

.fill-purple

.fill-purple-dark-50

.fill-purple-dark-40

.fill-purple-dark-30

.fill-purple-dark-20

.fill-purple-dark-10

.fill-purple-90

.fill-purple-80

.fill-purple-70

.fill-purple-60

.fill-purple-50

.fill-purple-40

.fill-purple-30

.fill-purple-20

.fill-purple-10

.fill-purple-5

.fill-purple-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-purple" /></svg>

.fill-brown

.fill-brown-dark-50

.fill-brown-dark-40

.fill-brown-dark-30

.fill-brown-dark-20

.fill-brown-dark-10

.fill-brown-90

.fill-brown-80

.fill-brown-70

.fill-brown-60

.fill-brown-50

.fill-brown-40

.fill-brown-30

.fill-brown-20

.fill-brown-10

.fill-brown-5

.fill-brown-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-brown" /></svg>

.fill-gray

.fill-gray-dark-50

.fill-gray-dark-40

.fill-gray-dark-30

.fill-gray-dark-20

.fill-gray-dark-10

.fill-gray-90

.fill-gray-80

.fill-gray-70

.fill-gray-60

.fill-gray-50

.fill-gray-40

.fill-gray-30

.fill-gray-20

.fill-gray-10

.fill-gray-5

.fill-gray-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-gray" /></svg>

.fill-black

.fill-black-90

.fill-black-80

.fill-black-70

.fill-black-60

.fill-black-50

.fill-black-40

.fill-black-30

.fill-black-20

.fill-black-10

.fill-black-5

.fill-black-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-black" /></svg>

.fill-white

.fill-white-90

.fill-white-80

.fill-white-70

.fill-white-60

.fill-white-50

.fill-white-40

.fill-white-30

.fill-white-20

.fill-white-10

.fill-white-5

.fill-white-3

Copy

                                            
                                                <svg width="48" height="48"><circle cx="24" cy="24" r="12" class="fill-white" /></svg>