Hex to Bootstrap Color
Convert any hex code to its closest Bootstrap 5 theme color — primary, secondary, success, danger, warning, info, light, or dark — by color distance.
How Hex to Bootstrap Conversion Works
Bootstrap 5 ships 8 theme color roles — primary, secondary, success, danger, warning, info, light, and dark — each tied to an official hex value from getbootstrap.com. This tool compares your hex input against all 8 using the redmean weighted-Euclidean color-distance formula, a perceptually-aware measure of how close two colors look on screen, and returns the nearest role along with a similarity percentage.
Hex to Bootstrap Example, Step by Step
#0D6EFD = primary
#0D6EFD (hex) = primary (0D6EFD) — exact match
Compare #0D6EFD against all 8 Bootstrap theme colors Distance to primary (#0D6EFD) = 0 -> exact match Distance to every other role > 0 Result: primary (0D6EFD) — exact match
| Step | Description | Result |
|---|---|---|
| Take the input hex | #0D6EFD | input color |
| Compare to all 8 theme colors | redmean distance to primary, secondary, success, danger, warning, info, light, dark | 8 distances |
| Find the smallest distance | primary (#0D6EFD) has distance 0 | primary |
| Report the match | distance 0 means an exact hit | primary (0D6EFD) — exact match |
When the input isn't one of the 8 official values, the tool still returns the closest role, but labels it as a percentage match instead of exact — e.g. #2563EB resolves to primary at 93.3% similar.
Common Mistakes With Hex to Bootstrap
- Assuming any blue-ish hex will map to primary — the closest match depends on the exact RGB distance, not just hue.
- Treating a "closest match" result as an official Bootstrap value rather than the nearest of only 8 fixed options.
- Forgetting that Bootstrap's theme colors are semantic roles (danger, success) rather than a full palette, so many hex inputs won't be a tight match to any of them.
Frequently Asked Questions
What are Bootstrap 5's theme colors?
Bootstrap 5 defines 8 theme color roles: primary (#0D6EFD), secondary (#6C757D), success (#198754), danger (#DC3545), warning (#FFC107), info (#0DCAF0), light (#F8F9FA), and dark (#212529). These are the official values from getbootstrap.com.
How does this tool pick the closest Bootstrap color?
It compares your hex input against all 8 official Bootstrap theme colors using the redmean weighted-Euclidean color-distance formula, which weights red, green, and blue differently based on how the eye perceives them, then returns the nearest match.
What does 'closest Bootstrap match, 93.3% similar' mean?
It means no theme color is an exact hit, so the tool returns the nearest one by color distance along with a similarity percentage. For example, #2563EB isn't a Bootstrap color, but it resolves to primary (#0D6EFD) at 93.3% similar.
Is #0D6EFD always an exact match for primary?
Yes — entering the official Bootstrap primary hex value returns "primary (0D6EFD) — exact match" since the distance to itself is zero.
Can I use this to theme a design outside Bootstrap?
Yes — it's useful for checking whether a brand or design color already lines up with a familiar Bootstrap role, or how far off it is, even if you're not using the framework itself.