Applying the palette

This page was built with Material Kit, an awesome Bootstrap UI kit. Download it for free from Creative Tim, and also check out the pro version:


Material Kit Material Kit Pro

25% off code: CMIND18

dashboard

Bootstrap

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

invert_colors

Colormind

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

settings_input_component

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

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

  Accents

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

Inverted button
visibility  Color examples

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

... Beautiful Stranger
favorite 342 · chat_bubble 45
Backgrounds

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.

... Avery
schedule 5 min read
perm_media   Creative blending

Incorporate colors in your graphics

Colors look more natural when blended into shadows and gradients

... Reed
schedule 5 min read
Twitter

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

... Jane
favorite 2.4K · share 45

Light on dark

Photography

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

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

Twitter

Use inverted cards to grab attention

... Beautiful Stranger
favorite 2.4K · share 45
Balloon

Color photos

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

... Reed
schedule 5 min read
trending_up Relax

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

... Jane
schedule 5 min read
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.

Button
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
Buttons
Dropdown menu
Regular
Inputs
Nav bar
Tabs
Table
# Name Actions
1 Andrew Mike
2 John Doe