Material and Bootstrap Color Reference
Compare familiar Material-style and Bootstrap-style color roles with HEX values and practical UI usage.
Framework Color Roles
| Role | Example HEX | Common use |
|---|---|---|
| Primary |
#0D6EFD
|
Main actions, links, active navigation |
| Success |
#198754
|
Positive status, confirmations |
| Warning |
#FFC107
|
Warnings, pending states, caution labels |
| Danger |
#DC3545
|
Errors, destructive actions, validation failures |
| Surface |
#F8F9FA
|
Light panels and page backgrounds |
Framework colors still need context
Predefined roles are useful, but a framework color is not automatically accessible in every pairing. Check the final text, icon, and border colors against the surfaces where they appear.
FAQ
How should I use this framework color reference? v
Use it as a starting point, then test the exact foreground, background, and UI state colors in the context where they will appear.
Are the HEX values ready to copy? v
Yes. The listed values are formatted for CSS, design files, and token documentation.
Should I still check contrast? v
Yes. Any color used for text, icons, controls, or status messages should be checked against its actual background.
Related Color Tools
Open the next tool for this color task.
CSS Color Tools - Gradients, Mixers & OKLCH
tool-hubTools for CSS gradients, color mixing, named colors, and modern color formats.
Color Palette Tools - Generators & Guides
tool-hubPalette generators, extractors, and practical color combination guides.
Tailwind Color Palette Converter
educationalTailwind-style palette stops with HEX and RGB values.
CSS Named Colors Table with HEX and RGB
educationalCSS named color reference with HEX and RGB values.