Colours

You can’t build anything with five hex codes. To build something real, you need a much more comprehensive set of colors to choose from.

You can break a good color palette down into three categories.

Greys & Neutrals

Text, backgrounds, panels, form controls — almost everything in an interface is grey.

You’ll need more greys than you think, too — three or four shades might sound like plenty but it won’t be long before you wish you had something a little darker than shade #2 but a little lighter than shade #3. In practice, you want 8-10 shades to choose from. Not so many that you waste time deciding between shade #77 and shade #78, but enough to make sure you don’t have to compromise too much.

True black tends to look pretty unnatural, so start with a really dark grey and work your way up to white in steady increments.

Primary color(s)

Most sites need one, maybe two colors that are used for primary actions, active navigation elements, etc. These are the colors that determine the overall look of a site — the ones that make you think of Facebook as “blue”.Just like with grays, you need a variety (5-10) of lighter and darker shades to choose from.

Ultra-light shades can be useful as a tinted background for things like alerts, while darker shades work great for text.

Accent colors

On top of primary colors, every site needs a few accent colors for communicating different things to the user. For example, you might want to use an eye-grabbing color like yellow, pink, or teal to highlight a new feature.

You might also need colors to emphasize different semantic states, like red for confirming a destructive action, yellow for a warning message or or green to highlight a positive trend.

You’ll want multiple shades for these colors too, even though they should be used pretty sparingly throughout the UI. If you’re building something where you need to use color to distinguish or categorize similar elements (like lines on graphs, events in a calendar, or tags on a project), you might need even more accent colors. All in, it’s not uncommon to need as many as ten different colors with 5-10 shades each for a complex UI.

Primary Colours

#EFFCF6
.bg-primary-50
.text-primary-50
#C6F7E2
.bg-primary-100
.text-primary-100
#8EEDC7
.bg-primary-200
.text-primary-200
#65D6AD
.bg-primary-300
.text-primary-300
#3EBD93
.bg-primary-400
.text-primary-400
#27AB83
.bg-primary-500
.text-primary-500
#199473
.bg-primary-600
.text-primary-600
#147D64
.bg-primary-700
.text-primary-700
#0C6B58
.bg-primary-800
.text-primary-800
#014D40
.bg-primary-900
.text-primary-900

Neutral Colors

#F0F4F8
.bg-neutral-50
.text-neutral-50
#D9E2EC
.bg-neutral-100
.text-neutral-100
#BCCCDC
.bg-neutral-200
.text-neutral-200
#9FB3C8
.bg-neutral-300
.text-neutral-300
#829AB1
.bg-neutral-400
.text-neutral-400
#627D98
.bg-neutral-500
.text-neutral-500
#486581
.bg-neutral-600
.text-neutral-600
#334E68
.bg-neutral-700
.text-neutral-700
#243B53
.bg-neutral-800
.text-neutral-800
#102A43
.bg-neutral-900
.text-neutral-900

Accent Colors

Blue
.bg-blue-50
.text-indigo-50
.bg-blue-100
.text-indigo-100
.bg-blue-200
.text-indigo-200
.bg-blue-300
.text-indigo-300
.bg-blue-400
.text-indigo-400
.bg-blue-500
.text-indigo-500
.bg-blue-600
.text-indigo-600
.bg-blue-700
.text-indigo-700
.bg-blue-800
.text-indigo-800
.bg-blue-900
.text-indigo-900
Purple
.bg-purple-50
.text-pink-50
.bg-purple-100
.text-pink-100
.bg-purple-200
.text-pink-200
.bg-purple-300
.text-pink-300
.bg-purple-400
.text-pink-400
.bg-purple-500
.text-pink-500
.bg-purple-600
.text-pink-600
.bg-purple-700
.text-pink-700
.bg-purple-800
.text-pink-800
.bg-purple-900
.text-pink-900
Red
.bg-red-50
.text-red-50
.bg-red-100
.text-red-100
.bg-red-200
.text-red-200
.bg-red-300
.text-red-300
.bg-red-400
.text-red-400
.bg-red-500
.text-red-500
.bg-red-600
.text-red-600
.bg-red-700
.text-red-700
.bg-red-800
.text-red-800
.bg-red-900
.text-red-900
Yellow
.bg-red-50
.text-red-50
.bg-red-100
.text-red-100
.bg-red-200
.text-red-200
.bg-red-300
.text-red-300
.bg-red-400
.text-red-400
.bg-red-500
.text-red-500
.bg-red-600
.text-red-600
.bg-red-700
.text-red-700
.bg-red-800
.text-red-800
.bg-red-900
.text-red-900