Colors
Colors.
Make use of Tailwind's unique Colors styles to improve accessibility. CSS offers a wide range of color properties and functions to customize and harmonize your website's visual appearance.
ColorsColors
Solid Background Colors
.bg-primary
.bg-primary/10
.bg-secondary
.bg-secondary/10
.bg-success
.bg-success/10
.bg-danger
.bg-danger/10
.bg-warning
.bg-warning/10
.bg-info
.bg-info/10
.bg-light
.bg-dark
.bg-bodybg
.bg-black
.bg-white
.bg-transparent
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-3 col-span-12 p-3 bg-primary text-white">.bg-primary</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-primary/10 text-primary">.bg-primary/10</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-secondary dark:bg-[#1f2025] text-white">.bg-secondary</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-secondary/10 text-secondary">.bg-secondary/10</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-success text-white">.bg-success</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-success/10 text-success">.bg-success/10</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-danger text-white">.bg-danger</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-danger/10 text-danger">.bg-danger/10</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-warning text-secondary">.bg-warning</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-warning/10 text-warning">.bg-warning/10</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-info text-secondary">.bg-info</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-info/10 text-info">.bg-info/10</div>
<div class="xl:col-span-3 col-span-12 p-3 btn-light">.bg-light</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-dark text-white">.bg-dark</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-bodybg text-body">.bg-bodybg</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-black text-white">.bg-black</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-white text-black">.bg-white</div>
<div class="xl:col-span-3 col-span-12 p-3 bg-transparent text-body">.bg-transparent</div>
</div>
Background Gradient
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-sky-500 to-indigo-500"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-violet-500 to-fuchsia-500"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-fuchsia-500 to-pink-500"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-pink-500 to-rose-500"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-fuchsia-600 to-pink-600"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-blue-800 to-indigo-900"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-emerald-500 to-emerald-900"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-teal-200 to-teal-500"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-teal-400 to-yellow-200"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-violet-200 to-pink-200"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-pink-200 via-rose-400 to-pink-600"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-b from-pink-200 via-rose-400 to-rose-600"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-b from-pink-200 via-purple-400 to-indigo-600"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-l from-gray-800 via-blue-700 to-gray-900"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-pink-500 via-rose-500 to-pink-500"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-br from-cyan-200 via-blue-400 to-indigo-600"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-pink-200 via-rose-400 to-rose-600"></div>
<div class="xl:col-span-3 col-span-6 h-14 bg-linear-to-r from-blue-200 via-blue-400 to-blue-600"></div>
</div>
Background Opacity
This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success/75 p-2 text-white">This is 75% opacity success background</div>
<div class="bg-success/50 p-2 text-secondary">This is 50% opacity success background</div>
<div class="bg-success/25 p-2 text-secondary">This is 25% opacity success background</div>
<div class="bg-success/10 p-2 text-secondary">This is 10% opacity success background</div>
Other Colors
.blue-100
.blue-200
.blue-300
.blue-400
.blue-500
.blue-600
.blue-700
.blue-800
.blue-900
.indigo-100
.indigo-200
.indigo-300
.indigo-400
.indigo-500
.indigo-600
.indigo-700
.indigo-800
.indigo-900
.lime-100
.lime-200
.lime-300
.lime-400
.lime-500
.lime-600
.lime-700
.lime-800
.lime-900
.pink-100
.pink-200
.pink-300
.pink-400
.pink-500
.pink-600
.pink-700
.pink-800
.pink-900
.rose-100
.rose-200
.rose-300
.rose-400
.rose-500
.rose-600
.rose-700
.rose-800
.rose-900
.violet-100
.violet-200
.violet-300
.violet-400
.violet-500
.violet-600
.violet-700
.violet-800
.violet-900
.amber-100
.amber-200
.amber-300
.amber-400
.amber-500
.amber-600
.amber-700
.amber-800
.amber-900
.green-100
.green-200
.green-300
.green-400
.green-500
.green-600
.green-700
.green-800
.green-900
.teal-100
.teal-200
.teal-300
.teal-400
.teal-500
.teal-600
.teal-700
.teal-800
.teal-900
.cyan-100
.cyan-200
.cyan-300
.cyan-400
.cyan-500
.cyan-600
.cyan-700
.cyan-800
.cyan-900
.stone-100
.stone-200
.stone-300
.stone-400
.stone-500
.stone-600
.stone-700
.stone-800
.stone-900
.gray-100
.gray-200
.gray-300
.gray-400
.gray-500
.gray-600
.gray-700
.gray-800
.gray-900
.bg-black
.bg-white
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-blue-100 text-white">.blue-100</div>
<div class="p-3 mb-2 bg-blue-200 text-white">.blue-200</div>
<div class="p-3 mb-2 bg-blue-300 text-white">.blue-300</div>
<div class="p-3 mb-2 bg-blue-400 text-white">.blue-400</div>
<div class="p-3 mb-2 bg-blue-500 text-white">.blue-500</div>
<div class="p-3 mb-2 bg-blue-600 text-white">.blue-600</div>
<div class="p-3 mb-2 bg-blue-700 text-white">.blue-700</div>
<div class="p-3 mb-2 bg-blue-800 text-white">.blue-800</div>
<div class="p-3 mb-2 bg-blue-900 text-white">.blue-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-indigo-100 text-white">.indigo-100</div>
<div class="p-3 mb-2 bg-indigo-200 text-white">.indigo-200</div>
<div class="p-3 mb-2 bg-indigo-300 text-white">.indigo-300</div>
<div class="p-3 mb-2 bg-indigo-400 text-white">.indigo-400</div>
<div class="p-3 mb-2 bg-indigo-500 text-white">.indigo-500</div>
<div class="p-3 mb-2 bg-indigo-600 text-white">.indigo-600</div>
<div class="p-3 mb-2 bg-indigo-700 text-white">.indigo-700</div>
<div class="p-3 mb-2 bg-indigo-800 text-white">.indigo-800</div>
<div class="p-3 mb-2 bg-indigo-900 text-white">.indigo-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-lime-100 text-white">.lime-100</div>
<div class="p-3 mb-2 bg-lime-200 text-white">.lime-200</div>
<div class="p-3 mb-2 bg-lime-300 text-white">.lime-300</div>
<div class="p-3 mb-2 bg-lime-400 text-white">.lime-400</div>
<div class="p-3 mb-2 bg-lime-500 text-white">.lime-500</div>
<div class="p-3 mb-2 bg-lime-600 text-white">.lime-600</div>
<div class="p-3 mb-2 bg-lime-700 text-white">.lime-700</div>
<div class="p-3 mb-2 bg-lime-800 text-white">.lime-800</div>
<div class="p-3 mb-2 bg-lime-900 text-white">.lime-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-pink-100 text-white">.pink-100</div>
<div class="p-3 mb-2 bg-pink-200 text-white">.pink-200</div>
<div class="p-3 mb-2 bg-pink-300 text-white">.pink-300</div>
<div class="p-3 mb-2 bg-pink-400 text-white">.pink-400</div>
<div class="p-3 mb-2 bg-pink-500 text-white">.pink-500</div>
<div class="p-3 mb-2 bg-pink-600 text-white">.pink-600</div>
<div class="p-3 mb-2 bg-pink-700 text-white">.pink-700</div>
<div class="p-3 mb-2 bg-pink-800 text-white">.pink-800</div>
<div class="p-3 mb-2 bg-pink-900 text-white">.pink-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-rose-100 text-white">.rose-100</div>
<div class="p-3 mb-2 bg-rose-200 text-white">.rose-200</div>
<div class="p-3 mb-2 bg-rose-300 text-white">.rose-300</div>
<div class="p-3 mb-2 bg-rose-400 text-white">.rose-400</div>
<div class="p-3 mb-2 bg-rose-500 text-white">.rose-500</div>
<div class="p-3 mb-2 bg-rose-600 text-white">.rose-600</div>
<div class="p-3 mb-2 bg-rose-700 text-white">.rose-700</div>
<div class="p-3 mb-2 bg-rose-800 text-white">.rose-800</div>
<div class="p-3 mb-2 bg-rose-900 text-white">.rose-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-violet-100 text-white">.violet-100</div>
<div class="p-3 mb-2 bg-violet-200 text-white">.violet-200</div>
<div class="p-3 mb-2 bg-violet-300 text-white">.violet-300</div>
<div class="p-3 mb-2 bg-violet-400 text-white">.violet-400</div>
<div class="p-3 mb-2 bg-violet-500 text-white">.violet-500</div>
<div class="p-3 mb-2 bg-violet-600 text-white">.violet-600</div>
<div class="p-3 mb-2 bg-violet-700 text-white">.violet-700</div>
<div class="p-3 mb-2 bg-violet-800 text-white">.violet-800</div>
<div class="p-3 mb-2 bg-violet-900 text-white">.violet-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-amber-100 text-white">.amber-100</div>
<div class="p-3 mb-2 bg-amber-200 text-white">.amber-200</div>
<div class="p-3 mb-2 bg-amber-300 text-white">.amber-300</div>
<div class="p-3 mb-2 bg-amber-400 text-white">.amber-400</div>
<div class="p-3 mb-2 bg-amber-500 text-white">.amber-500</div>
<div class="p-3 mb-2 bg-amber-600 text-white">.amber-600</div>
<div class="p-3 mb-2 bg-amber-700 text-white">.amber-700</div>
<div class="p-3 mb-2 bg-amber-800 text-white">.amber-800</div>
<div class="p-3 mb-2 bg-amber-900 text-white">.amber-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-green-100 text-white">.green-100</div>
<div class="p-3 mb-2 bg-green-200 text-white">.green-200</div>
<div class="p-3 mb-2 bg-green-300 text-white">.green-300</div>
<div class="p-3 mb-2 bg-green-400 text-white">.green-400</div>
<div class="p-3 mb-2 bg-green-500 text-white">.green-500</div>
<div class="p-3 mb-2 bg-green-600 text-white">.green-600</div>
<div class="p-3 mb-2 bg-green-700 text-white">.green-700</div>
<div class="p-3 mb-2 bg-green-800 text-white">.green-800</div>
<div class="p-3 mb-2 bg-green-900 text-white">.green-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-teal-100 text-white">.teal-100</div>
<div class="p-3 mb-2 bg-teal-200 text-white">.teal-200</div>
<div class="p-3 mb-2 bg-teal-300 text-white">.teal-300</div>
<div class="p-3 mb-2 bg-teal-400 text-white">.teal-400</div>
<div class="p-3 mb-2 bg-teal-500 text-white">.teal-500</div>
<div class="p-3 mb-2 bg-teal-600 text-white">.teal-600</div>
<div class="p-3 mb-2 bg-teal-700 text-white">.teal-700</div>
<div class="p-3 mb-2 bg-teal-800 text-white">.teal-800</div>
<div class="p-3 mb-2 bg-teal-900 text-white">.teal-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-cyan-100 text-white">.cyan-100</div>
<div class="p-3 mb-2 bg-cyan-200 text-white">.cyan-200</div>
<div class="p-3 mb-2 bg-cyan-300 text-white">.cyan-300</div>
<div class="p-3 mb-2 bg-cyan-400 text-white">.cyan-400</div>
<div class="p-3 mb-2 bg-cyan-500 text-white">.cyan-500</div>
<div class="p-3 mb-2 bg-cyan-600 text-white">.cyan-600</div>
<div class="p-3 mb-2 bg-cyan-700 text-white">.cyan-700</div>
<div class="p-3 mb-2 bg-cyan-800 text-white">.cyan-800</div>
<div class="p-3 mb-2 bg-cyan-900 text-white">.cyan-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-stone-100 text-white">.stone-100</div>
<div class="p-3 mb-2 bg-stone-200 text-white">.stone-200</div>
<div class="p-3 mb-2 bg-stone-300 text-white">.stone-300</div>
<div class="p-3 mb-2 bg-stone-400 text-white">.stone-400</div>
<div class="p-3 mb-2 bg-stone-500 text-white">.stone-500</div>
<div class="p-3 mb-2 bg-stone-600 text-white">.stone-600</div>
<div class="p-3 mb-2 bg-stone-700 text-white">.stone-700</div>
<div class="p-3 mb-2 bg-stone-800 text-white">.stone-800</div>
<div class="p-3 mb-2 bg-stone-900 text-white">.stone-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-gray-100 text-white">.gray-100</div>
<div class="p-3 mb-2 bg-gray-200 text-white">.gray-200</div>
<div class="p-3 mb-2 bg-gray-300 text-white">.gray-300</div>
<div class="p-3 mb-2 bg-gray-400 text-white">.gray-400</div>
<div class="p-3 mb-2 bg-gray-500 text-white">.gray-500</div>
<div class="p-3 mb-2 bg-gray-600 text-white">.gray-600</div>
<div class="p-3 mb-2 bg-gray-700 text-white">.gray-700</div>
<div class="p-3 mb-2 bg-gray-800 text-white">.gray-800</div>
<div class="p-3 mb-2 bg-gray-900 text-white">.gray-900</div>
</div>
<div class="xl:col-span-3 sm:col-span-6 col-span-12">
<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
<div class="p-3 mb-2 bg-white border">.bg-white</div>
</div>
</div>