Colormind Website Colors Templates Image Upload
Generate
See the color palette applied to a demo landing page. For this palette, lighter shades will appear on the
left.
For best results try selecting the main (middle) color and generating the rest of the palette.
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
Beginning Graphic Design: Color
Bootstrap
Bootstrap is awesome, but the default styles tend to get a bit repetitive. Liven up
your color design with the suggestions from Colormind.
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.
ATHENS GRAY MANHATTAN LOGAN
Light shades Light accent Main brand color
Use this color as the background Accent colors can be used to This color should be eye-catching
for your dark-on-light designs, or bring attention to design elements but not harsh. It can be liberally
the text color of an inverted by contrasting with the rest of the applied to your layout as its main
design. palette. identity.
GULL GRAY BOSTON BLUE
Dark accent Dark shades
Another accent color to consider. Use as the text color for dark-on-
Not all colors have to be used - light designs, or as the
sometimes a simple color background for inverted designs.
scheme works best.
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
COLOR EXAMPLES
Applying a color palette is an interpretive art. This page might give you
some ideas.
Beautiful Stranger 342 · 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 5 min read
CREATIVE BLENDING
Incorporate colors in your graphics
Colors look more natural when blended into shadows and gradients
Reed 5 min read
Twitter
A shade of the dark color can be used for differentiation, or to provide more
contrast.
Jane 2.4K · 45
Light on dark
PHOTOGRAPHY
Inject your color scheme into
photography
Photo manipulations can be a great way to emphasize brand
colors.
ARTICLE LINK 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 2.4K · 45
BALLOON
Color photos
Color manipulation of photos is a quick way to add interest and reinforce the color scheme.
Reed 5 min read
RELAX
Colors should be fun, not stressful. Have a cup of coffee
Jane 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 Nav bar
Bootstrap's UI colors contain semantic information
and shouldn't be changed arbitrarily. However we LINK LINK DROPDOWN
can tweak them to better Wt the color palette.
Logan #aaa4c6 Primary
Boston Blue #368abe Info
Aqua Forest #68ac73 Success
Tabs
Fire Bush #e69c3b Warning
Pomegranate #f44336 Danger
DASHBOARD
Buttons
DEFAULT PRIMARY SCHEDULE
INFO SUCCESS
WARNING DANGER
Table
# Name Actions
1 Andrew Mike
Dropdown menu
2 John Doe
REGULAR
Inputs
Success input
Success
Error input
Error Input
Here can be your nice text
Colormind Bootstrap UI Templates Blog
API Access