3 ms·

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

by b3rry 10y ago

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-vibrating-color-combinations--cms-25621 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 10y ago
> 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 10y ago
  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 10y ago
    >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
douche 10y ago
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.
lostboys67 10y ago
red green is bad because of colour blindness
- ddebernardy 10y ago
  All colors are potentially problematic. https://en.wikipedia.org/wiki/Color_blindness#Types https://en.wikipedia.org/wiki/Color_blindness#Types
  - k__ 10y ago
    I once read, contrast is the key. All colors are problematic, but if you get your contrast high enough, this doesn't matter.
    - 0xcde4c3db 10y ago
      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.
jacobolus 10y ago
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.
anotheryou 10y ago
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.
acjohnson55 10y ago
> 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 https://en.wikipedia.org/wiki/Complementary_colors

by b3rry 10y ago

scribu 10y ago

> 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 10y ago
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 10y ago
  >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

douche 10y ago

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.

lostboys67 10y ago

red green is bad because of colour blindness

ddebernardy 10y ago
All colors are potentially problematic. https://en.wikipedia.org/wiki/Color_blindness#Types https://en.wikipedia.org/wiki/Color_blindness#Types
- k__ 10y ago
  I once read, contrast is the key. All colors are problematic, but if you get your contrast high enough, this doesn't matter.
  - 0xcde4c3db 10y ago
    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.

jacobolus 10y ago

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.

anotheryou 10y ago

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.

acjohnson55 10y ago

> 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 https://en.wikipedia.org/wiki/Complementary_colors