╰ * rosētum / flōs

Alright, I was going to post this on beneficii or codekraft, but I’m too lazy to log out right this moment. So, I’m just going to post it here. This is going to be a little guide to Color Theory and how it can be applied to iconing, making edits and the color scheming of your themes in a way that makes it pretty while also keeping it’s readability.

A good site for much of this information including an HSL Color Wheel/Picker, color schemer and more is right here.

First off? We’re going to start off with the types of colors/coloring you can utilize when matching or using colors in general, these are the most important within the world of design. Also, I will be using the HSL Color Wheel/Picker as the base:

Complementary colors : by definition a complementary set of colors are two colors that are at the opposite ends of the color wheel – so blue would be a complementary color to orange as they are at the opposite ends of the wheel. A simpler way to remember this is that complementary colors are contrasted colors.

Monochromatic colors : these colors are defined as being different shades of the same color – basically the hue remains the same as lightness and or saturation are altered, either brightening or muting the hue.

Analogous colors : these colors, simply put, are colors that are right next to each other on the color wheel – like blue would blend into teal to get to green; thus blue, teal and green are all analogous colors.

Now, I imagine you’re wondering what HSL might mean as you’re most likely most familiar with the RGB ( Red Green Blue ), or possibly even the CMYK ( Cyan Magenta Yellow Key, where Key represents black ), color format – it means:

Hue : the base color, within the format it is number of the angle at which the base color lies on the color wheel.

Saturation : the purity of the hue, within the format it is essentially it’s richness of color – a pure color is 100% saturated while grays are unsaturated.

Lightness : the lightness or darkness of a hue, white is 100% lightness and black is 0% lightness.

The latter two aspects of the HSL Color Wheel operate as what determines the contrast or lack there of in a color – either brightening it/making it richer or dulling it/making it more muted as a tone. Remember all that is above is crucial to design as it can be a determining factor of the readability of your theme or even the discernability of your images and edits.

Here are a few tips to remember when picking colors for your icons, themes, edits, etc:

using a muted color ( a color lacking in saturation ) against a highly saturated color can prove to be hard to read no matter which way you flip it – for example don’t put a muted dark gray against a bright hot pink or even a rich red, purple or really any richer color; instead use a pale gray or even a white to ensure readability.

pastel colors are alright to use against a white background so long as their lightness ( or closeness to white ) is not so much that you can barely discern them from one another.

black backgrounds are fine with paler text colors, especially within icons and edits, but for a theme/website it can prove to be a little bit rough on one’s eyes.

there IS a difference in the way color is displayed on a PC versus a Mac in terms of contrast and lightness; an icon could seem perfectly contrasted on a PC and then be too dark on a Mac – not certain what causes this, but it can occur. so remember that not every coloring looks great on every system.

if you can’t read or discern it all that well yourself? don’t do it.