Bootstrap to Hex Converter
Look up the official hex code behind any Bootstrap 5 theme color name — primary, secondary, success, danger, warning, info, light, or dark.
How Bootstrap to Hex Conversion Works
Bootstrap 5 defines 8 theme color roles, each with one official hex value: primary (#0D6EFD), secondary (#6C757D), success (#198754), danger (#DC3545), warning (#FFC107), info (#0DCAF0), light (#F8F9FA), and dark (#212529). This tool looks up your input by name (case-insensitive) against that fixed set and returns the matching hex code.
Bootstrap to Hex Example, Step by Step
primary = #0D6EFD
primary = #0D6EFD
Input: "primary" Lowercase and compare against 8 known role names Match found: primary Result: #0D6EFD
| Step | Description | Result |
|---|---|---|
| Take the input name | "primary" | input string |
| Normalize casing | lowercase for comparison | "primary" |
| Match against the 8 role names | exact string match | found: primary |
| Return the hex value | primary's official hex | #0D6EFD |
The lookup requires an exact name match (ignoring case) — there's no fuzzy matching, so 'primry' or 'main' won't resolve, even though they might mean the same thing to a person.
Common Mistakes With Bootstrap to Hex
- Typing a CSS class name like "btn-primary" instead of just the role name "primary".
- Assuming Bootstrap 4 and Bootstrap 5 share the same hex values — several theme colors changed between versions.
- Looking for extended palette shades (like primary-subtle or primary-emphasis) that aren't part of this base 8-color set.
Frequently Asked Questions
Which Bootstrap color names does this tool support?
All 8 Bootstrap 5 theme roles: primary, secondary, success, danger, warning, info, light, and dark — the official set from getbootstrap.com.
Is the name lookup case-sensitive?
No — "primary", "Primary", and "PRIMARY" all resolve to the same hex value, #0D6EFD.
What happens if I misspell a color name?
The tool returns an error asking you to check the spelling, since it only matches exact Bootstrap role names, not partial or fuzzy text.
What's the hex code for Bootstrap's primary color?
#0D6EFD — Bootstrap 5's default primary blue.
Are these the same hex values across all Bootstrap 5 versions?
Yes, these are the current official Bootstrap 5 theme color values. Bootstrap 4 used a different palette (e.g. primary was #007BFF), so double-check your Bootstrap version if the numbers look off.