Bootstrap is awesome, but the default styles tend to get a bit repetitive. Liven up your color design with the suggestions from Colormind.



Colormind has been trained on popular real-world user interfaces - we extract the background, text, branding and highlight colors for contextual awareness.


Color Structure

The palette consists of a light color, a dark color, main brand color and two highlight colors. The main color is in the center of the palette and has the largest impact on the overall look.

Sunny Beige

Light shades

Use this color as the background for your dark-on-light designs, or the text color of an inverted design.

Danger Red

Light accent

Accent colors can be used to bring attention to design elements by contrasting with the rest of the palette.

Royal purple

Main brand color

This color should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity.

Brilliant Blue

Dark accent

Another accent color to consider. Not all colors have to be used - sometimes a simple color scheme works best.

Dark Red

Dark shades

Use as the text color for dark-on-light designs, or as the background for inverted designs.


Cards are a part of the material design guidelines, but beyond that they're easy to use and look great on desktop and mobile.


Accent colors should be used sparingly to draw attention to important design elements. Overuse of accent colors can make your design look haphazard.

visibility  Color examples

Applying a color palette is an interpretive art. This page might give you some ideas.


Be subtle

Layer colors with an abstract design or subtle background pattern. Patterns load a lot faster than images and can support retina resolutions automatically via SVG.

perm_media   Creative blending

Incorporate colors in your graphics

Colors look more natural when blended into shadows and gradients


A shade of the dark color can be used for differentiation, or to provide more contrast.

Light on dark


Inject your color scheme into photography

Photo manipulations can be a great way to emphasize brand colors.

subject Article link watch_later Watch Later

Dark on Light


Cards layout with a dark on light theme. Combine photos, text and inverted cards.


Use inverted cards to grab attention


Color photos

Color manipulation of photos is a quick way to add interest and reinforce the color scheme.

trending_up Relax

Colors should be fun, not stressful. Have a cup of coffee

Another accent card

Have some lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam accumsan lorem at dignissim aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Functional colors

UI Components

Color Semantics

Bootstrap's UI colors contain semantic information and shouldn't be changed arbitrarily. However we can tweak them to better fit the color palette.

Primary Color #fff Primary
Info Color #fff Info
Success Color #fff Success
Warning Color #fff Warning
Danger Color #fff Danger
Nav bar
# Name Actions
1 Andrew Mike
2 John Doe