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

Step 1

Choose a color

Enter a HEX value or use the picker.

Step 2

Generate variables

Bootstrap-style color variables are produced.

Step 3

Review the snippet

See Sass and CSS custom property versions.

Step 4

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

HEXRGBSass / CSS variables

Accuracy & limitations

These variables cover Bootstrap's color values, including the RGB triplet its translucent styles depend on — but not every component picks them up automatically.

The variables cover the color values themselves. Components that hard-code a different variable, or that use Bootstrap's own color-contrast function, may not update.
Sass variables require a rebuild to take effect; the CSS custom properties do not.
The RGB triplet is included because Bootstrap uses it for translucent backgrounds and borders — omitting it leaves those variants on the old hue.
Generated values are not contrast-checked against Bootstrap's default text colors.

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.