Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Practical Color Theory for People Who Code

tallys.github.io

Post reply on HN
Print view View original

21–30 of 72 posts

Re: Practical Color Theory for People Who Code

#21

Post by ryandrake »

BadassFractal wrote: post #3

Do you guys know of any solid guides on how to use and mix and match colors in photography and video making to evoke certain specific emotions? It's easy to find materials on entry level color theory "here are complementary colors, here is a triad etc" but I haven't been able to find a good resource on how to use those coloring choices to influence viewer reactions. Seems like something everybody in the visual arts e…

I honestly prefer the "Marissa Mayer" method[1] of A/B testing 41 shades of blue in order to experimentally determine which one produces the best results. If you have even the slightest ability to test at scale this makes the most sense to me.

1: http://www.nytimes.com/2009/03/01/business/01marissa.html

Re: Practical Color Theory for People Who Code

#22

Post by thangalin »

justinpombrio wrote: post #15

If you want to do something meaningful with colors, don't use RGB, and don't use HSL (which is based on RGB). These spaces are problematic. For instance, pure blue and pure green in RGB space have very different lightness. Here's a picture of the region of colors covered by RGB: https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-i... If RGB space corresponded to what our eyes saw, that would be a perfect hexa…

Here's XSLT code that transforms RGB colour space into LCH (and vice versa), which is then used to colourise an arbitrary number of visually distinct and harmonious pie chart wedges:

http://stackoverflow.com/a/25481023/59087

The algorithm is straightforward, albeit verbose.

Re: Practical Color Theory for People Who Code

#24

Post by Coincoin »

jacobolus wrote: post #9
scribu wrote: post #8

Earlier quoted context omitted.

Someone making a color scheme for a chart needs to be very rigorous indeed, because color is actually how the data is represented, in some cases. The tutorial seems to be aimed at front-end developers that want to put together a color scheme for a website. In this case, color is more like decoration, so it doesn't need to be as rigorous, IMHO.

My basic claim is that contrast in perceived lightness (a.k.a. value, in Munsell’s terminology) is the most salient color attribute in graphic design. This is based on the architecture of human vision. When light comes into the retina, it is measured by three different types of detectors called cone cells (“long” L, “medium” M, and “short” S). But the independent signals from these cone cells are not directly passed…

What fascinates me about human color perception is our brain actually interpret everything as a mix of the four colors you mentioned: red, green, blue and yellow; the opposites of the two color axes. It's why it seems so weird at first that yellow is a mix of green and red while our brain perceive it as a totally different color; it is a color of its own in our brain.

Re: Practical Color Theory for People Who Code

#25

Post by 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.

Re: Practical Color Theory for People Who Code

#26

Post by scribu »

b3rry wrote: post #25

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, rotat…

> 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.

Re: Practical Color Theory for People Who Code

#27

Post by boronine »

justinpombrio wrote: post #15

If you want to do something meaningful with colors, don't use RGB, and don't use HSL (which is based on RGB). These spaces are problematic. For instance, pure blue and pure green in RGB space have very different lightness. Here's a picture of the region of colors covered by RGB: https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-i... If RGB space corresponded to what our eyes saw, that would be a perfect hexa…

See also http://www.hsluv.org for a perceptually uniform colour space based on CIELUV.

Re: Practical Color Theory for People Who Code

#28

Post by kybernetyk »

That's really handy (especially for someone who's as aesthetically challenged as me) - but it would be nice what mix() actually does/means.

I mean it seems to be a handy sass built-in(?) but it would be nice for us who are not webdevs to know how to manually "mix" HSL colors to get the same results.

Re: Practical Color Theory for People Who Code

#29

Post by b3rry »

scribu wrote: post #26
b3rry wrote: post #25

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, rotat…

> 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 compl…

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.

Re: Practical Color Theory for People Who Code

#30

Post by TeMPOraL »

thangalin wrote: post #22
justinpombrio wrote: post #15

If you want to do something meaningful with colors, don't use RGB, and don't use HSL (which is based on RGB). These spaces are problematic. For instance, pure blue and pure green in RGB space have very different lightness. Here's a picture of the region of colors covered by RGB: https://en.wikipedia.org/wiki/HSL_and_HSV#/media/File:Srgb-i... If RGB space corresponded to what our eyes saw, that would be a perfect hexa…

Here's XSLT code that transforms RGB colour space into LCH (and vice versa), which is then used to colourise an arbitrary number of visually distinct and harmonious pie chart wedges: http://stackoverflow.com/a/25481023/59087 The algorithm is straightforward, albeit verbose.

I'll add my shot at converting RGB to CIE (XY + brightness) I wrote for my command line controller for Hue lights:

https://github.com/TeMPOraL/hju/blob/39b0c2c27f5f076a93b360d...

(code in Common Lisp)

Hue documentation (available after registering with them) also has example algorithm in (AFAIR) Objective-C.

EDIT: replaced Github link with commit permalink, in case I change the file in the future.

Post reply on HN