Product Colors

The fastest way to create a practical color palette for your app or website.

A modern app or website design needs more than just a single shade of grey to create an appealing UI. Product Colors gives you step-by-step guidance in how to create a functional and accessible color palette from just a few starting shades of color.

Step 1: Create Color Palettes

All colors used in your UI should serve a specific functionality. Do not use a color just because it looks nice in a particular situation. Consistency is key! There is a common language of what colors mean in any given culture. Try to leverage your user's existing expectations (e.g. green for success) whenever possible to ease onboarding. Finally, there should be sufficient contrast between the shades in your color palette to ensure that is accessible for users with poor vision (and it'll help your SEO too).

The background color for your color palettes will be selected in Step 2.

Primary Color

Usually this color is the same as your brand color. The primary color, as the name suggests, is used for the primary action on any given page. For example, the call-to-action button would use this color. You want to train the user to look for this color.

Base Color

Base Color Position

500

Saturation Rate

-06.8%

Lightness Rate

11.1%

000

#F6F4FA

hsl(261.7, 41.9%, 96.9%)

100

#DAD0ED

hsl(261.7, 45%, 87.2%)

200

#C1AEE3

hsl(261.7, 48.3%, 78.5%)

300

#A98DDB

hsl(261.7, 51.8%, 70.7%)

400

#946FD6

hsl(261.7, 55.6%, 63.6%)

· 500 ·

#8051D3

hsl(261.7, 59.6%, 57.3%)

600

#6F3CC7

hsl(261.7, 55.6%, 50.9%)

700

#6338AF

hsl(261.7, 51.8%, 45.2%)

800

#593598

hsl(261.7, 48.3%, 40.2%)

900

#503284

hsl(261.7, 45%, 35.8%)

Secondary Color

Typically the accent color for your brand. The secondary color is less common since it does not fill any particular functionality niche. It can be very useful when creating illustrations or other marketing materials.

Contextual Color: Success

Usually green. This accent color is to highlight positive trends or events. A success message upon logging in or number going up will use this color.

Base Color

Base Color Position

400

Saturation Rate

-01.0%

Lightness Rate

15.4%

000

#F4FBF5

hsl(122.4, 41.2%, 97%)

100

#C5E7C7

hsl(122.4, 41.6%, 84.1%)

200

#9DD79F

hsl(122.4, 42%, 72.9%)

300

#79C97C

hsl(122.4, 42.4%, 63.1%)

· 400 ·

#5ABD5E

hsl(122.4, 42.9%, 54.7%)

500

#44A848

hsl(122.4, 42.4%, 46.3%)

600

#3A8E3D

hsl(122.4, 42%, 39.2%)

700

#317834

hsl(122.4, 41.6%, 33.1%)

800

#2A652C

hsl(122.4, 41.2%, 28%)

900

#245526

hsl(122.4, 40.8%, 23.7%)

Contextual Color: Danger

Usually red (though in not all cultures). This accent color is used to warn the user of a negative event that is irreversible like deleting a resource.

Base Color

Base Color Position

400

Saturation Rate

-14.2%

Lightness Rate

10.8%

000

#FBF4F3

hsl(4.1, 52.4%, 96.9%)

100

#F3CECC

hsl(4.1, 61.1%, 87.5%)

200

#F0A8A3

hsl(4.1, 71.2%, 79%)

300

#F38179

hsl(4.1, 83%, 71.3%)

· 400 ·

#FC584C

hsl(4.1, 96.7%, 64.3%)

500

#EC4438

hsl(4.1, 83%, 57.4%)

600

#DB362A

hsl(4.1, 71.2%, 51.2%)

700

#BB372D

hsl(4.1, 61.1%, 45.6%)

800

#9E3931

hsl(4.1, 52.4%, 40.7%)

900

#863933

hsl(4.1, 45%, 36.3%)

Contextual Color: Warning

Usually yellow. This accent color is used to warn the user of a negative event that is either irreversible or can be resolved later. It is a lower-use accent color.

Contextual Color: Info

Usually blue. This accent color is used to notify the user without making a judgement of whether if it is positive or negative. It is a lower-use accent color.

Step 2: Pick a Neutral Color

The most common color used in UIs is grey. The background is some off-white, the text is an off-black and the borders are some shade that is in between. This is no accident! We want to use the more vibrant colors tactically as a way to communicate meaning. That requires there to be neutral color with no meaning to avoid overwhelming your users.

Neutral Color: Grey

The neutral color is almost always some sort shade of grey. You will need to decide if you want your grey to have a warmer or cooler tone. Your color section here will determine the background color for all of your color shades! 000 will be the background in light mode and 900 will be used in dark mode.

Base Color

Base Color Position

700

Saturation Rate

-25.0%

Lightness Rate

18.5%

000

#F8F8F8

hsl(208.9, 2.4%, 97.1%)

100

#D0D1D3

hsl(208.9, 3.2%, 82%)

200

#ADB1B4

hsl(208.9, 4.2%, 69.2%)

300

#8F959B

hsl(208.9, 5.7%, 58.4%)

400

#747E87

hsl(208.9, 7.5%, 49.3%)

500

#5F6A75

hsl(208.9, 10.1%, 41.6%)

600

#4D5A65

hsl(208.9, 13.4%, 35.1%)

· 700 ·

#3E4C59

hsl(208.9, 17.9%, 29.6%)

800

#353E46

hsl(208.9, 13.4%, 24.1%)

900

#2D3237

hsl(208.9, 10.1%, 19.7%)

Step 3: Export Your Colors

Product colors will automatically save your color selections to your browser. When you are done creating your color palette you can export them to various formats here.

xxxxxxxxxx
 
:root {
  --grey-000: #F8F8F8;
  --grey-100: #D0D1D3;
  --grey-200: #ADB1B4;
  --grey-300: #8F959B;
  --grey-400: #747E87;
  --grey-500: #5F6A75;
  --grey-600: #4D5A65;
  --grey-700: #3E4C59;
  --grey-800: #353E46;
  --grey-900: #2D3237;
​
  --primary-000: #F6F4FA;
  --primary-100: #DAD0ED;
  --primary-200: #C1AEE3;
  --primary-300: #A98DDB;
  --primary-400: #946FD6;
  --primary-500: #8051D3;
  --primary-600: #6F3CC7;
  --primary-700: #6338AF;
  --primary-800: #593598;
  --primary-900: #503284;
​
  --success-000: #F4FBF5;
  --success-100: #C5E7C7;
  --success-200: #9DD79F;
  --success-300: #79C97C;
  --success-400: #5ABD5E;
  --success-500: #44A848;
  --success-600: #3A8E3D;
  --success-700: #317834;
  --success-800: #2A652C;
  --success-900: #245526;
​
  --danger-000: #FBF4F3;
  --danger-100: #F3CECC;
  --danger-200: #F0A8A3;
  --danger-300: #F38179;
  --danger-400: #FC584C;
  --danger-500: #EC4438;
  --danger-600: #DB362A;
  --danger-700: #BB372D;
  --danger-800: #9E3931;
  --danger-900: #863933;
}

From Toronto, Canada with social distance.