Color Scales & Palettes
Since every UI will need multiple colors, and we want to keep color usage consistent, it helps to organize hues into scales in your palette.
A definition I like is that a color scale is a set of related colors (often of a similar hue):
Whereas a color palette is made up of all the colors used in your design system:
In other words, your color palette is comprised of all of your color scales.
Musical Scales and Color Scales
A great comparison here comes in the natural world from music, the same way scales in music sound harmonious to the ear, color scales can appear harmonious to the eye.
A scale in music is a set of steps that map to sounds of different frequencies, high and low. This is what the C note roughly looks like represented as a wave and as a value:
It may not be as intuitive to think about colors in this way, but they too have frequencies. Consider a simple blue color represented by a numeric value:
Visible blue light clocks in around 620 Terrahertz, meaning the wave bounces up and down 620 trillion times a second.
Below is a C Major scale, it has 8 notes: C, D, E, F, G, A, B, and C. When combined in different ways, it produces harmonious chords. Try clicking the 1, 2, and 3 buttons to play different chords, or click on individual keys to play individual notes:
A color palette operates much the same way.
The same way you can play individual notes of a musical scale, you can use individual colors in a scale and they function well on their own. The best musicians (and the best designers) know how to combine colors from a palette in harmonious ways.
If you pay attention to the interactive examples in this lesson, colors in a scale can be used in almost the same ways that notes in a musical scale are used. Try clicking the 1, 2, and 3 buttons in the example color palette below to see how the colors work together in the UI on the right:
By simply taking similarly spaced steps between notes or colors in a scale, you can produce harmony in the resulting work.
Finding harmony and making a scale
The trick then in working with color is understanding that all colors can be broken down into numbers, and all numbers are easy to manipulate. Increment a number, decrement a number, or take half of a number, then apply a similar strategy to different types of colors and you can find ways to continually reproduce harmony.
Musical scales rely on mathmatical steps to find harmony, and color scales can use a similar approach. Tools and generators can be great at computing these kinds of scales, though you need to make sure that these tools are factoring in other important considerations like accessibility with color pairs and perceived brightness (discussed in a following section). If you'd like to speed up the process you can use a generator or find a ready built scale, here are some interesting ones you could try:
Tools for Color Scales
Tools for Color Palettes
Manually creating a scale
If you find yourself in a place of wanting to derive your own palette, you need to start somewhere. Like many of the tools and generators linked in this lesson, you still need to start with a base color.
I recommend using HSL for this exercise, as explained in the last lesson, so you can use numbers to help derive new colors.
1. Find a base color:
Aim for something not too light and not too dark. A color that is too light (the L in HSL is somewhere >75%)
hsl(209, 62%, 75%)or too dark (the L in HSL is somewhere <25%):
hsl(209, 62%, 25%)will give you problems finding enough steps to give yourself the flexibility you'll need as you're actually designing things later. All of the other colors in your scale will be derived from this color so you want to find something that is somewhere in around 50% saturation regardless of hue.
hsl(209, 62%, 50%)When you've found that color, it will go in the middle of your scale. These colors should be labeled with a name and number, and the number should allow you to drop in a new shade in between at a future date if you need. That means primary-50 or primary-500 is a better name than primary-5. We use the name primary here because this blue hue is the primary color, another name like blue-500 is also fine, though primary carries greater meaning. You'll sometimes see this labeled as brand, primary, or even main color.
This color will be used for main elements that are very visually important like primary buttons and logos.
hsl(209, 75%, 50%)2. Find the colors at each end of the tail
Next, there needs to be a lightest tint and darkest shade from your base color. To find them start with the base color and drop the lightness and saturation for your darker shade and crank up the lightness and saturation for your lighter shade.
Your lightest shade (primary-100) works great as a background for something that needs to stand out just a little more, and the darkest shade (primary-900) will work great as a text color.
hsl(209, 100%, 95%)hsl(209, 40%, 25%)You can combine these together to see how they harmonize:
If this value doesn't feel light enough, consider sliding in another color below it that treads the line between white and your lightest tint.
3. Find the midpoints between each color
Now that you have the tails and the center of your scale, you can simply derive the middle color between each of the colors you already have.
Average the saturation and lightness of the nearest 2 colors to find one in the middle and then trust your eye to wiggle the values around a little more if you think something is off.
These 5 colors may be enough for you UI, but it can help to have some more flexibility, so normally it's best to repeat this step again and average the values between the rest of your colors to find another 4 in between shades.
Once you have labeled each of these colors your scale is complete. You can repeat those steps for each additional hue to flesh out your palette.