Blue can suggest trust, while green and red often mark success and errors in interfaces. Those are conventions, not promises about how everyone will feel.
The examples below range from Google and Apple design systems to UI libraries and frameworks like Bootstrap, Tailwind, and Ant Design.
The swatches include both current and older palettes; the version notes explain which is which. Consistent button, link and status colors are useful even during the MVP Development process.
Material Design Colors (Google)
Material Blue 500 (#2196F3) belongs to the classic Material palette. It gives this example its familiar Google-era look; Material 3 also supports dynamic colors and named color roles.
On the text side, dark gray #212121 gives strong contrast against the illustrated white background.
Very light backgrounds like #FAFAFA and #FFFFFF leave this blue as the main accent.
Apple System Colors (iOS HIG)
System Blue (#007AFF), System Red (#FF3B30) and System Green (#34C759) are light-appearance examples here. Blue supplies an action color, while red and green can distinguish error and success messages.
The iOS interface uses dynamic system colors that adapt to light and dark appearances. A fixed HEX swatch shows only one appearance.
Fluent UI Colors (Microsoft)
The blue #0078D4 comes from the Fluent UI v8 default palette, alongside the darker #106EBE and #005A9E.
For text and icons, #323130 provides the dark neutral in this example. The darker blue shades belong to its theme ramp. Fluent 2 color tokens assign values by role and appearance rather than treating this older palette as universal.
Bootstrap 5 Theme Colors
Bootstrap names its theme colors by role: Primary (#0D6EFD), Success (#198754), Danger (#DC3545), Warning (#FFC107) and Info (#0DCAF0).
Classes such as .btn-primary and .text-danger apply those roles to buttons and text.
Tailwind CSS Colors
There is no single brand color in Tailwind CSS; its numbered scales let you choose the shade for each utility.
The blue-500 (#4299E1) swatch shown here is from Tailwind v1. Later versions changed the palette, so that class name does not identify the same color across releases.
Since color names are embedded in utility classes like bg-blue-500 and text-gray-900, both the design and code sides speak the same language.
Tailwind is a utility-first CSS framework, rather than a ready-made component library.
MUI Primary Colors (Material UI)
MUI implements Material Design for React. Its default light-theme primary palette has four tokens:
main: #1976D2light: #42A5F5dark: #1565C0contrastText: #FFFFFF
The light and dark tokens are shades of the main color, not fixed assignments for focus or disabled states.
Ant Design Brand Blue
Primary Blue #1677FF anchors this Ant Design palette. Its lighter #4096FF and darker #0958D9 shades support hover and active colors; #001D66 sits farther along the dark end of the ramp.
Neutral grays leave the blue for emphasis. Ant Design allows that primary color to be customized, so the blue is a starting point rather than a required brand identity.
Chakra UI Theme Colors
The Chakra UI swatches here use its v2 theme, including teal.500 (#319795).
blue.500 (#3182CE) offers another accent. In this light palette, gray.50 (#F7FAFC) supplies a pale surface and gray.800 (#2D3748) a dark text color.
In v2, colorScheme="teal" selects that family on components such as buttons and badges. Chakra v3 renamed the prop to colorPalette.
UI Color Palettes at a Glance
