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

11–20 of 72 posts

Re: Practical Color Theory for People Who Code

#11

Post by cmurf »

Razengan wrote: post #7

I really wish color-related talks and tools would upgrade to wider-than-sRGB color gamuts, now that many modern devices can display them.

The problem is there's divergence from sRGB, and as yet no convergence on a new single standard. So all image content is rendered to sRGB still. Further, there's substantial inconsistency in various tools when it comes to compensation for the difference in color encoding between the image file, and the display. The technology to do this compensation is old, but it's weakly implemented on mobile outside of web browsers on the client side. And only major apps honor and preserve this color encoding metadata.

So the state with color management on mobile is approximately where color management was on the desktop about 15-20 years ago.

Re: Practical Color Theory for People Who Code

#12

Post by cmurf »

scribu wrote: post #8
jacobolus wrote: post #2

Ugh. This is well meaning, but because based on a color model with a very tenuous relation to human color perception, with further decisions built on loose heuristics without rigorous support (and apparently ported from paint mixing advice), the choices made are pretty arbitrary, yielding poor results. This part in particular ... > Pick any color by selecting its hue (0-360) on the color wheel at full saturation (100…

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.

Color vision deficiencies (specifically dichromacy and monochromacy) need to be taken into account; the more important it is to convey (hazards) the more necessary it needs consideration.

Re: Practical Color Theory for People Who Code

#13

Post by Razengan »

cmurf wrote: post #11
Razengan wrote: post #7

I really wish color-related talks and tools would upgrade to wider-than-sRGB color gamuts, now that many modern devices can display them.

The problem is there's divergence from sRGB, and as yet no convergence on a new single standard. So all image content is rendered to sRGB still. Further, there's substantial inconsistency in various tools when it comes to compensation for the difference in color encoding between the image file, and the display. The technology to do this compensation is old, but it's weakly implemented on mobile outside of web browser…

Apple have made good progress on this. All of their devices (iPhones, iPads and Macs, with the last iMac having a 10-bits-per-channel screen) are now capable of accurately displaying DCI-P3, and their software supports it very well [1][2].

Other companies are also expanding outside sRGB, with Samsung's new phones, the Surface Studio from Microsoft, and Razer's Blade [Pro] also supporting wide color gamuts, although the last time I checked Windows and Android didn't seem to be as color-aware as macOS and iOS.

[1] https://webkit.org/blog/6682/improving-color-on-the-web/

[2] https://developer.apple.com/videos/play/wwdc2016/712/

To me seeing sRGB now feels like looking at EGA after VGA was invented; the phase where the tech is available but waiting for the content supply to catch up.

Re: Practical Color Theory for People Who Code

#14

Post by kuldeepk »

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 recently saw this cool video talking about colors in storytelling - https://www.youtube.com/watch?v=aXgFcNUWqX0

Re: Practical Color Theory for People Who Code

#15

Post by justinpombrio »

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 hexagon. It isn't. It's warped, and the warping isn't subtle.

Use CIELAB. CIELAB is designed to match what our eyes see.

https://en.wikipedia.org/wiki/Lab_color_space

In a little more detail, distances in the CIELAB colorspace approximate perceptual distance (how different two colors look). Distances in the RGB colorspace do not.

Re: Practical Color Theory for People Who Code

#16

Post by Baeocystin »

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…

Take an art history course. Pay close attention to how the artists that Western culture* holds up as ideals used color.

There are no shortcuts. Emotionally evocative use of color is 90% cultural, and the only way to learn how we in the West interpret color use is long-term study over time, the same as learning to interpret literature, philosophy, or sculpture.

(*assuming your intended audience is Western. You'll still want to at least touch on other major systems as well to increase contextual knowledge.)

Re: Practical Color Theory for People Who Code

#17

Post by jfoutz »

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…

It's non obvious. I really enjoyed this a few years ago [1]. I'd suggest looking up color correction in movies. There are more blogs about that, and due to the nature of the media they focus on the really effective stuff first. If there are cars, make the brake lights red, and all the same red. Make taxis that iconic yellow, even if they aren't that specific yellow in the shot.

Heavy handed, but if you're doing advertising where the best you can get is a fraction of a second, those heavy techniques will serve you well.

[1] http://theabyssgazes.blogspot.com/2010/03/teal-and-orange-ho...

Re: Practical Color Theory for People Who Code

#18

Post by fenomas »

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 once worked in a room full of graphic designers - which was pretty educational - and quite often their process for this was simply: (1) spend some time searching for images that evoke the feelings you're going for, and then (2) pick out a palette of colors from the images you've collected.

Re: Practical Color Theory for People Who Code

#19

Post by bluetwo »

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…

RGB and HSL are related, but I wouldn't say HSL is based on RGB.

From a design point-of-view RGB actually has some problems, as it is difficult to manipulate in a reliable manner. However, from a data point-of-view if is useful because it can scale up or down depending on how much room you have to store information. Also, it relates to the way TV and many video standards transmit information.

In HSL, you have saturation and brighness, which can scale nicely depending on how much information you have, but hue is a a position on a circle, which is a different type of measurement.

Also, how exactly is lab color useful in web programming? How do you support it in CSS or HTML?

Re: Practical Color Theory for People Who Code

#20

Post by jacobolus »

bluetwo wrote: post #19
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…

RGB and HSL are related, but I wouldn't say HSL is based on RGB. From a design point-of-view RGB actually has some problems, as it is difficult to manipulate in a reliable manner. However, from a data point-of-view if is useful because it can scale up or down depending on how much room you have to store information. Also, it relates to the way TV and many video standards transmit information. In HSL, you have saturat…

“HSL” is a trivial transformation of RGB. It’s what you get when you prop an RGB cube up on one corner, squish 6 of the other corners into the same plane, and then inflate it until it fills a cylinder shape. (Note that none of these steps make any reference to human perception.) Here’s my 2010 diagram showing that visually https://en.wikipedia.org/wiki/File:Hsl-and-hsv.svg

> Also, how exactly is lab color useful in web programming? How do you support it in CSS or HTML?

Implementing CIELAB in Javascript is straightforward. https://github.com/jrus/chromatist/blob/master/src/cielab.co...

You could alternately use a model like CIECAM02, but that gets a whole lot more complicated. https://github.com/jrus/chromatist/blob/master/src/ciecam.co...

Post reply on HN