Color theory is one of the most complex aspects of visual design. Changing shades slightly can completely shift the visual impact and emotional effect of a color. It’s one reason many designers who have been in the industry for years still struggle with color.
While many books have been written about color theory, there are some very basic principles that designer-developers can learn to get started. Combine those with any of the multitude of color design tools available, and a pleasing color palette can be created fairly easily.
First, the difference between warm colors, cool colors, and neutrals. Warm colors include red, orange, and yellow. Warm colors will generally be vibrant and energizing. Cool colors include green, blue, and purple. These colors are usually calmer and relaxing.
Neutrals include white, black, gray, brown, and beige. Adding white, black, or gray to warm or cool colors alters their meaning and impact. White will lighten colors and generally make their effect less intense or more positive (for example, purple is considered a mysterious, regal color, while lilac is often associated with spring and happiness). Gray will mute colors and can lessen their impact. Black darkens colors and can make them appear more conservative (consider the different impact of a color like bright blue vs navy blue).
Once a designer has a basic understanding of color meanings, they can use tools like Coolors, Design Seeds, or Colormind to come up with a final, coordinated palette for their design.
Using HSL color When a designer thinks of web colors, they often think in terms of hex values. While this has become the industry standard in terms of web colors, developers may find that working with HSL color values make more sense.
To most people (designers included), hex values seemingly have no correlation to one another. Two colors that look very similar might have completely different hex values. For example, #68B4D4 and #92C8E0 are fairly similar shades of blue (one is simply a little brighter and lighter than the other) and yet their hex values have no apparent correlation.
Their HSL values, however, show how closely related they are: #68B4D4 becomes HSL (198, 58%, 62%) and #92C8E0 becomes HSL (198, 56%, 73%). The first number in the sequence (198 in this case) indicates the particular hue. The second number is the percent of saturation (how bright or vibrant the color is). The third number is the percent of lightness (or added white) of the color.
Because the correlations between color values are so easily seen with HSL vs hex, developers often find that manipulating colors via code with HSL is significantly easier.