Bootstrap Color Generator
Generate Bootstrap theme color variables from a base color.
About the Bootstrap Color Generator
Generate Bootstrap theme color variables from a base color. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.
How to use
Choose a color
Enter a HEX value or use the picker.
Generate variables
Bootstrap-style color variables are produced.
Review the snippet
See Sass and CSS custom property versions.
Copy and theme
Paste into your Bootstrap override file.
Benefits
Theme Bootstrap fast
Get the variables needed to recolor components.
Sass and CSS output
Use whichever your build pipeline expects.
No manual math
The RGB channels are pre-calculated for you.
Features & supported formats
Features
- Sass variable output
- CSS custom property output
- RGB channel triplet
- Copy-ready snippet
- Live preview
Supported formats
Frequently asked questions
Where do I paste these?
Into your custom Sass map or your :root overrides when theming Bootstrap.
Why does Bootstrap need an RGB triplet?
Bootstrap uses the --bs-primary-rgb channels to build translucent backgrounds and borders.
Will this restyle every component?
Setting the primary variables updates the components that reference them, such as buttons and links.
Do I need to recompile Sass?
If you use the Sass variables, yes; the CSS custom properties work without a build step.
Can I theme more than the primary color?
Yes. Generate each theme color you need and combine the variables in one override file.