Bootstrap Color Reference

The Bootstrap color palette reference lists the eight theme colours — primary, secondary, success, danger, warning, info, light and dark — each expanded into an eleven-step ramp with hex values.

What is Bootstrap Color Reference?

• This is a short list compared with the hue-heavy frameworks, and that is the point of it.
• Bootstrap's colour system is built on eight semantic tokens rather than a wheel of families: primary at #0d6efd, secondary at #6c757d, success at #198754, danger at #dc3545, warning at #ffc107, info at #0dcaf0, light at #f8f9fa and dark at #212529.
• Each one gets a block of eleven tiles labelled 50 through 950, with the hex printed beneath every swatch.

The semantic naming is what makes the reference different from a hue list. A reader arrives knowing they want the danger colour or the success colour and needing its value, not knowing which blue to pick — and the eight tokens answer that directly. The two neutrals, light and dark, sit at the ends of the luminance range, which is why their ramps behave so differently from the other six: the base of light is nearly white and the base of dark is nearly black, so a fixed lightness ladder pushes both towards the middle.

Every base hex above is Bootstrap's own published theme value, and those are the numbers that belong in a project. The eleven numbered steps are generated from each base rather than sampled from the framework's compiled CSS, computed at a fixed lightness with the base's hue and chroma held constant — so a step gives you a preview of the ramp in the right hue, while an exact compiled value may differ.

One gap is worth knowing about in advance. Bootstrap's compiled output does not stop at a plain ramp: its utilities include subtle backgrounds, emphasis variants and border colours derived from the same eight tokens, and none of those appear here. What the page shows is the token and a scale under it, which covers most lookups but not every class the framework ships.

In use this is a fast reference for anyone styling against Bootstrap: pull the primary value, check what a pale step of info looks like as a background, or confirm that the warning yellow is as light as it appears. Because there are only eight blocks, the whole system fits in one screen or two, which no other reference on this site manages.

Comparing the tokens against each other is where the eight-block layout earns its place. Success and danger are close in luminance, which is why they work as a pair in a status row; warning is much lighter than either and needs a dark text colour on it; info and primary are close enough in hue that using both in one interface usually reads as a mistake rather than as a decision. Reading the ramps side by side makes those relationships explicit before a component is styled, which is far harder to judge from a documentation page showing one token at a time.

• Limits: eight tokens, eleven generated steps each, no search, no copy buttons, no subtle or emphasis variants, and no dark-mode values.
• As a bootstrap color palette reference it covers the bootstrap theme colors completely — the bootstrap color names are the framework's own and every bootstrap palette hex value is printed under its swatch, which is what the eight bootstrap css colors were always meant to be looked up for.

How to use Bootstrap Color Reference

1. Find the theme token you need — primary, secondary, success, danger, warning, info, light or dark.
2. Read the eleven steps in that block, from 50 at the lightest to 950 at the darkest.
3. Use the printed hex, or take the family's base value which is Bootstrap's own published colour.

When to use Bootstrap Color Reference vs related tools

Use this when a project is built on Bootstrap and a theme colour's value is needed quickly, or when checking whether a pale step of a token works as a background. Use the Tailwind or Material references when a broader set of hue families is wanted. When the theme values should come from a brand palette instead of the framework's own, the bootstrap color exporter writes that block, and the state tokens that have to carry text are worth putting through the contrast checker.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Bootstrap Color Reference