Complete showcase of all 495 color utility classes with visual examples
.text-{color}-{shade} - Text color utilities (99 classes).bg-{color}-{shade} - Background color utilities (99 classes).border-{color}-{shade} - Border color utilities (99 classes).text-bg-{color}-{shade} - Combined background + auto-contrast text (99 classes).text-outline-{color}-{shade} - Outline chip variant (99 classes)Total: 495 utility classes • 11 colors × 9 shades × 5 utility types
Click any color card to copy its class name to clipboard
Use .text-{color}-{shade} to apply text colors. All 99 shades available.
This is blue-100 text (lightest - needs dark background)
This is blue-200 text
This is blue-300 text
This is blue-400 text
This is blue-500 text
This is blue-600 text
This is blue-700 text
This is blue-800 text
This is blue-900 text (darkest)
Body text in gray-600 for optimal readability.
Success message in green-600
Error message in red-600
Warning message in orange-600
Info message in blue-600
Use .bg-{color}-{shade} to apply background colors. Combine with text colors for contrast.
These classes automatically choose readable text color based on background lightness. Perfect for badges and chips!
Outlined chips with transparent background - great for tag selections!
Use .border-{color}-{shade} to apply border colors. Combine with Bootstrap's .border class.
Content inside a card with a blue-500 border.
Green background with green-400 border for success states.
Red background with red-400 border for error states.
All shades work with directional borders too:
.border-start
.border-end
.border-top
.border-bottom
colors.css!important to ensure they override other styles.text-bg-* for automatic text color contrast - great for badges!class="bg-blue-100 text-blue-900 border border-blue-500 rounded p-3"COLORS-GUIDE.md for complete documentation495 Color Utilities • 11 Colors × 9 Shades × 5 Utility Types
Generated from Bootstrap 5.3 Sass maps • Auto-contrast text colors • All utilities additive