Bootstrap 5.3 Harmonized Color Scheme Generator

Generate a color scheme for your Bootstrap 5.3 project.

1. Select Theme Colors

2. Generated CSS

Copy the CSS variables below and add them to your project's CSS file within a :root selector.

:root {
    /* CSS variables will appear here */
}

3. Live Preview

Components Preview

Buttons
Alerts
Cards
Primary Card
Primary card title

Uses primary colors.

Footer
Success Card
Success card title

Uses success colors.

Footer
Progress Bars
25%
50%
75%
100%
60%
Links
Primary | Secondary | Success | Danger | Warning | Info | Light | Dark
Text & Background Utilities

.text-primary on .bg-primary-subtle

.text-success-emphasis on .bg-success-subtle

.text-bg-info

.text-bg-warning

.text-bg-danger

.text-bg-light

.text-bg-dark

.border-secondary-subtle