[b3rry]

This is pretty flawed. First off, never, ever use complementary colors as the foundation for your design. A red green color scheme (for example) will produce a result that "vibrates." Open your image editor of choice and look at green text (#00FF00) on a red background (#FF0000). Illegible. Painful to the eye. Don't do it. Read more here: https://webdesign.tutsplus.com/articles/why-you-should-avoid...

Secondly, rotating around HSL will not produce true complementary colors. Quick: what are the primary colors? Red, Yellow, and Blue. Here is where the problem lies; In an HSL rotation the primaries occupy the following H values: red (0°), yellow (60°), and blue (240°). These colors are not equidistant. The opposite of red SHOULD be pure green, yet 0°+(360/2)=180° which is #00FFFF (blue-green). The opposite of yellow SHOULD be pure purple, yet 60°+(360/2)=240° which is #0000FF (pure blue). Which means... you guessed it: the opposite of blue SHOULD be orange, but (240°+(360/2))%360)=60° which is #FFFF00 (yellow).

This is because color theory is based on pigmented color. ALL of the most common color models used are equidistant between the Red Green Blue values when rotated, instead of the Red Yellow Blue values.

No calculation will produce harmonious color schemes. Color theory, like any "creative" skill, is something you can hone through practice and experimentation. There is no formulaic solution.

Tl;dr: light and pigment do not have the same "primary" colors. Color theory is based on pigmented colors. RGB, HSB/HSL, etc do not allow for equal transformations between RYB, so you cannot use them to calculate accurate complements.

[scribu]

> First off, never, ever use complementary colors as the foundation for your design. A red green color scheme (for example) will produce a result that "vibrates."

That's an interesting effect, but I don't see it in the final website layout produced by the tutorial, because neutral colours are introduced between the two complementary colours.

So, I don't see how this example supports your assertion against using complementary colours as a starting point.

[b3rry]

To clarify: As a foundation… not a starting point. You're more than welcome to begin with complementary colors, but they should not be the foundation of your final system. Properly segmenting complementary colors of a similar lightness works to reduce this effect, but you are now imposing artificial constraints on your design system: you have to intentionally isolate your colors from one another in order to prevent this from happening. This is less than ideal when trying to create a flexible system of color. When codifying these relationships, you run the risk of improper use, especially if you have multiple developers designing views from this system.

One solution, if you must maintain a complementary color scheme is to vary the lightness of a color (as Shelburne's side begins to do): "The conditions for these varying effects occur between colors which are contrasting in their hues but also close or similar in light intensity. […] This initially exciting effect also feels aggressive and often even uncomfortable to our eyes. One finds it is rarely used except for a screaming effect in advertising, and as a result it is unpleasant, disliked, and avoided" -Josef Albers, Interaction of Color: XXII Vibrating boundaries — enforced contours

Probably not the best idea to use a scheme that one of the most pre-eminent color theorists describes as “unpleasant, disliked, and avoided.” Shelburne's site goes on to lessen this effect by introducing desaturated values, however the site fails to explain that these shades and tint shifts are just one option when it comes to avoiding this vibrating effect; instead it's solely attributed to the desaturation of these hues. There are many color schemes that mix high-vibrancy colors, and do so by avoiding complements.

[accountface]

>You're more than welcome to begin with complementary colors, but they should not be the foundation of your final system.

...that's what this demo does

[acjohnson55]

> First off, never, ever use complementary colors as the foundation for your design. A red green color scheme (for example) will produce a result that "vibrates."

Depending on color model and individual visual anatomy, red and green aren't necessarily complementary [1].

[1] https://en.wikipedia.org/wiki/Complementary_colors

[douche]

I would hope that no one would pick red and green as their primary complementary colors, since to a non-trivial subset of users they would be indistinguishable.

[anotheryou]

I might add: Mixing complementary colors is also just greying them down. You might consider tinting your colors (mixing both with a single 3rd color) instead.

[jacobolus]

The reason bright red + bright green “vibrates” is because they don’t have enough lightness contrast (see my other comments in this thread).

If you choose a dark red (say, #C2454F in sRGB) and a light green (say, #51E6AF) you’ll be fine (albeit a bit garish in this particular example). Or choose a light red and a dark green if you prefer. Where you wind up in trouble is with two colors of the same lightness, say #DC555E and #047E54.

[lostboys67]

red green is bad because of colour blindness

[ddebernardy]

All colors are potentially problematic.

https://en.wikipedia.org/wiki/Color_blindness#Types

[k__]

I once read, contrast is the key.

All colors are problematic, but if you get your contrast high enough, this doesn't matter.

[0xcde4c3db]

A more reliable and helpful approach is to make sure that colors meant to convey information are augmented by some other indicator (symbols/shapes, text labels, line styles, etc.) whenever possible. In addition to avoiding colorblindness issues, this makes the difference easier to recognize in general. It also helps accommodate non-ideal viewing conditions such as a washed-out display, coordinating between displays that are calibrated differently, monochrome print/e-ink, and so on.