Skip to main content

Choosing a color palette

· 2 min read

Choosing a color palette is no easy task—especially if you have already chosen your favorite color as the theme color.

Take a look at this picture:

(If you are in dark mode, you'd better turn it off briefly.)

This is the feature picture on the front page. Each logo looks good by itself; the problem, though, is that they don't fit together. Consider the fact that there are four shades of red, three shades of yellow, and a whole range of blue. Plus, some logos are shaded (PHP and the three shields), while others are flat. The result is a hotchpotch of different designs and styles with no unified theme.

Putting it into a bigger context, one realize that the entire website is built with the theme color turquoise, which is also used in the other feature pictures. However, we observe zero use of this color in the collage. That makes it inconsistent with the page as a whole.

The solution, therefore, is to re-design the picture and fine-tune each color. I hypothesize that the most harmonic color palette should be one that has colors of uniform saturation and value on the HSV scale (a.k.a. equidistant to the center on the color wheel); hence I picked 12 colors evenly distributed on the circle.

There is only one painful thing: the purple color that PHP uses has a saturation too low to be approximated with any of the colors on that circle. Plus, the dark green in Vue also has a value too small.

For the purple color, we substituted it with blue (sorry to PHP if they want it original!); for the dark green, we used the same hue as the light green, but adjusted the value according to the original color.

If you ever switched to dark mode, you will also notice how I've hollowed out the white parts of every logo to achieve some level of consistency.