🎨 Bootstrap Color Utilities

Complete showcase of all 495 color utility classes with visual examples

📚 Available Utilities:

Total: 495 utility classes • 11 colors × 9 shades × 5 utility types

All Color Shades

Click any color card to copy its class name to clipboard

🔵 Blue
Blue 100
.bg-blue-100
Blue 200
.bg-blue-200
Blue 300
.bg-blue-300
Blue 400
.bg-blue-400
500
Blue 500
.bg-blue-500
600
Blue 600
.bg-blue-600
700
Blue 700
.bg-blue-700
800
Blue 800
.bg-blue-800
900
Blue 900
.bg-blue-900
🟣 Indigo
Indigo 100
.bg-indigo-100
Indigo 200
.bg-indigo-200
Indigo 300
.bg-indigo-300
Indigo 400
.bg-indigo-400
500
Indigo 500
.bg-indigo-500
600
Indigo 600
.bg-indigo-600
700
Indigo 700
.bg-indigo-700
800
Indigo 800
.bg-indigo-800
900
Indigo 900
.bg-indigo-900
🟪 Purple
Purple 100
.bg-purple-100
Purple 200
.bg-purple-200
Purple 300
.bg-purple-300
Purple 400
.bg-purple-400
500
Purple 500
.bg-purple-500
600
Purple 600
.bg-purple-600
700
Purple 700
.bg-purple-700
800
Purple 800
.bg-purple-800
900
Purple 900
.bg-purple-900
🩷 Pink
Pink 100
.bg-pink-100
Pink 200
.bg-pink-200
Pink 300
.bg-pink-300
Pink 400
.bg-pink-400
500
Pink 500
.bg-pink-500
600
Pink 600
.bg-pink-600
700
Pink 700
.bg-pink-700
800
Pink 800
.bg-pink-800
900
Pink 900
.bg-pink-900
🔴 Red
Red 100
.bg-red-100
Red 200
.bg-red-200
Red 300
.bg-red-300
Red 400
.bg-red-400
500
Red 500
.bg-red-500
600
Red 600
.bg-red-600
700
Red 700
.bg-red-700
800
Red 800
.bg-red-800
900
Red 900
.bg-red-900
🟠 Orange
Orange 100
.bg-orange-100
Orange 200
.bg-orange-200
Orange 300
.bg-orange-300
Orange 400
.bg-orange-400
500
Orange 500
.bg-orange-500
600
Orange 600
.bg-orange-600
700
Orange 700
.bg-orange-700
800
Orange 800
.bg-orange-800
900
Orange 900
.bg-orange-900
🟡 Yellow
Yellow 100
.bg-yellow-100
Yellow 200
.bg-yellow-200
Yellow 300
.bg-yellow-300
Yellow 400
.bg-yellow-400
500
Yellow 500
.bg-yellow-500
600
Yellow 600
.bg-yellow-600
700
Yellow 700
.bg-yellow-700
800
Yellow 800
.bg-yellow-800
900
Yellow 900
.bg-yellow-900
🟢 Green
Green 100
.bg-green-100
Green 200
.bg-green-200
Green 300
.bg-green-300
Green 400
.bg-green-400
500
Green 500
.bg-green-500
600
Green 600
.bg-green-600
700
Green 700
.bg-green-700
800
Green 800
.bg-green-800
900
Green 900
.bg-green-900
🩵 Teal
Teal 100
.bg-teal-100
Teal 200
.bg-teal-200
Teal 300
.bg-teal-300
Teal 400
.bg-teal-400
500
Teal 500
.bg-teal-500
600
Teal 600
.bg-teal-600
700
Teal 700
.bg-teal-700
800
Teal 800
.bg-teal-800
900
Teal 900
.bg-teal-900
🩵 Cyan
Cyan 100
.bg-cyan-100
Cyan 200
.bg-cyan-200
Cyan 300
.bg-cyan-300
Cyan 400
.bg-cyan-400
500
Cyan 500
.bg-cyan-500
600
Cyan 600
.bg-cyan-600
700
Cyan 700
.bg-cyan-700
800
Cyan 800
.bg-cyan-800
900
Cyan 900
.bg-cyan-900
⚪ Gray
Gray 100
.bg-gray-100
Gray 200
.bg-gray-200
Gray 300
.bg-gray-300
Gray 400
.bg-gray-400
500
Gray 500
.bg-gray-500
600
Gray 600
.bg-gray-600
700
Gray 700
.bg-gray-700
800
Gray 800
.bg-gray-800
900
Gray 900
.bg-gray-900

Text Color Utilities

Use .text-{color}-{shade} to apply text colors. All 99 shades available.

Quick Reference - All Colors (Shade 600)

Blue 600 text
Indigo 600 text
Purple 700 text
Pink 600 text
Red 600 text
Orange 600 text
Yellow 700 text
Green 600 text
Teal 600 text
Cyan 600 text
Gray 700 text

Complete Blue Text Variations

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)

Practical Text Examples

Headings with Color

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

Background Color Utilities

Use .bg-{color}-{shade} to apply background colors. Combine with text colors for contrast.

Light Backgrounds

Blue 100
Indigo 200
Purple 200
Pink 200
Red 100
Orange 100
Yellow 100
Green 100
Teal 100
Cyan 100
Gray 200

Dark Backgrounds with Light Text

Blue 700
Indigo 700
Purple 700
Pink 700
Red 700
Orange 700
Yellow 700
Green 700
Teal 700
Cyan 700
Gray 800

Practical Background Examples

Info Alert: This is an informational message with blue-100 background.
Success Alert: This is a success message with green-100 background.
Warning Alert: This is a warning message with yellow-100 background.
Error Alert: This is an error message with red-100 background.

Chip/Badge Utilities

.text-bg-* Classes (Auto-Contrast)

These classes automatically choose readable text color based on background lightness. Perfect for badges and chips!

Blue - All Shades

Blue 100 Blue 200 Blue 300 Blue 400 Blue 500 Blue 600 Blue 700 Blue 800 Blue 900

All Colors (Shade 500)

Blue Indigo Purple Pink Red Orange Yellow Green Teal Cyan Gray

.text-outline-* Classes (Outline Style)

Outlined chips with transparent background - great for tag selections!

Blue Indigo Purple Pink Red Orange Yellow Green Teal Cyan Gray

Practical Chip Examples

Status Badges:

✓ Active ⏳ Pending ✕ Inactive 📝 Draft

Category Tags:

Design Development Marketing Sales

Priority Labels:

High Priority Medium Priority Low Priority

Border Color Utilities

Use .border-{color}-{shade} to apply border colors. Combine with Bootstrap's .border class.

Basic Border Colors (Shade 500)

Blue 500
Indigo 500
Purple 500
Pink 500
Red 500
Orange 500
Yellow 500
Green 500
Teal 500
Cyan 500
Gray 500

Thick Borders (border-3)

Blue 600
Indigo 600
Purple 600
Pink 600
Red 600
Green 600

Practical Border Examples

Card with Blue Border

Content inside a card with a blue-500 border.

Success Card

Green background with green-400 border for success states.

Error Card

Red background with red-400 border for error states.

Border Variations

All shades work with directional borders too:

.border-start
.border-end
.border-top
.border-bottom

💡 Usage Tips

495 Color Utilities • 11 Colors × 9 Shades × 5 Utility Types

Generated from Bootstrap 5.3 Sass maps • Auto-contrast text colors • All utilities additive