8 ms·
Practical Color Theory for People Who Code (2016)
- PebblesRox 6y agoI think this article is a lot more practical: https://learnui.design/blog/color-in-ui-design-a-practical-framework.html https://learnui.design/blog/color-in-ui-design-a-practical-f... Eric Kennedy does a great job of giving me rules-of-thumb to work with so that I don't feel like I'm just making arbitrary adjustments to numbers. And I think the examples he provides look a lot better than the result of the original tutorial above.
- cjohnson318 6y agoI'm a painter and I learned a lot from this. (Granted, knowing how color theory works on paper doesn't get you very far in CSS.)
- klodolph 6y agoWhy do all these color theory sites generate a complementary color just by flipping the hue 180°? I feel like the reason we do that is just because the math is easy, not because these color combinations look good.
- Groxx 6y agoBecause that is complementary color, by color theory. Or, one kind of complementary color, anyway: https://en.wikipedia.org/wiki/Complementary_colors https://en.wikipedia.org/wiki/Complementary_colors . It's a purely computational process, no aesthetic taste is implied. But yeah, that default cyan/red combination is incredibly garish.
- klodolph 6y ago> Because that is complementary color, by color theory. If your notion of color theory is limited to RGB, then this might be reasonable. However, if you read the article that you linked (https://en.wikipedia.org/wiki/Complementary_colors https://en.wikipedia.org/wiki/Complementary_colors) you'll see a much wider notion of complementary colors. Let your eyes and sense of aesthetics be the judge... most will agree that the RGB red/cyan and green/magenta pairs are garish and ugly.
- ansgri 6y agoBecause the hue scale was designed to be perception-based, so flipping by 180 is the intended use. Obviously a single formula cannot describe all complexity of human color perception, especially if you take into account spatial interactions and background illumination. The color science is far from developed, and better models than HSV and CIELAB are available, but typically are very complex with little practical gain.
- klodolph 6y agoThe hue scale is not designed to be based on perception. It is simply a polar coordinate version of RGB.
- hanche 6y agoEven that is an approximation: The hue is piecewise linear instead of using trigonometric functions. Linear, that is, in each 60° sector. (Or affine for the super pedantic.)
- danwills 6y agoThere's certainly a fair difference in difficulty between hue=(hue+0.5)%1.0, and doing things 'properly' (perceptually uniform spectral sampling? Sounds quite a lot harder tbh!). HSL and HSV certainly include compromises, but in many cases the utility of being able to work with colour represented in this way means they're still super useful, even if inaccurate.
- klodolph 6y agoWouldn't it be a lot easier to just ask a human to pick colors? By my reckoning, if you write a piece of code that's simple but generates garish colors, it's better to just pick out the colors yourself. Why even bother teaching people about hue=(hue+0.5)%1.0 if the results are so ugly?
- danwills 6y agoI do agree the colours in the article were garish, but I'd say that is less because of the HSV/L usage and more the author's choices (including choosing to make complementary colours in this way). The ability HSV gives to easily be able 'rotate' colour, (even though it's around a deformed blob nothing like a circle), and increase and decrease saturation makes it quite useful. I agree that human-picked (where the human very often will be selecting in an HSV-based picker themselves) probably yields a more pleasing result more often (tastes can vary a lot there however), but I think there are some quite solid possibilities with code using HSV too, without having to go the whole-hog with colour-science. Makes it heaps easier to just play with colour for one thing, and code can be just for fun/exploration sometimes I think that's a good thing.
- lifthrasiir 6y agoHSL and HUV would be useful for complementary colors if its hue is uniform enough. The problem is, they are not even that uniform. In some cases the complementary RGB hue can differ up to 30 degrees from the complementary CIELAB hue (which would be much closer to the true perceived hue) [1]. [1] https://en.wikipedia.org/wiki/File:Hsv-hues-cf-lch-hues.png https://en.wikipedia.org/wiki/File:Hsv-hues-cf-lch-hues.png
- covidthrow 6y agoFlipping the hue 180 degrees is "correct". The problem is that they typically use HSV which is based on sRGB and thusly results in incorrect complementaries. The mathematics of harmonious color are fairly well understood, but they do not align with sRGB's encoding, so the math is effectively broken. sRGB is a non-linear color space that's designed to encode color information for display on CRT monitors and enable low quantization of dark shades. It's not designed to be worked within. sRGB is an "output referred" color space, which means it was specifically to display color. A "scene referred" color space is designed for manipulation of colors within the image. Lab is a wonderful scene referred color space, but suffers from mathematical complexities that disables simple mathematical operations. The reason is that shifting a hue, for example, may describe a color that simply does not exist. (Think of it as divide by zero, but for colors.) Then there are "perceptual" color spaces. Those are designed to enable simple mathematic relationships to produce color relationships that mirror our perception and expectations. Oklab is one such color space that produces wonderful and quite harmonious color relationships: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html https://raphlinus.github.io/color/2021/01/18/oklab-critique....
- klodolph 6y ago> Flipping the hue 180 degrees is "correct". I assume that you're putting "correct" in quotes because you disagree with the idea that this is correct. > The mathematics of harmonious color are fairly well understood... Disagree. Human perception of color is highly nonlinear and we are constantly inventing new color spaces as tools to understand human color perception. These color spaces all have various tradeoffs and limitations. While useful, it's clear that our understanding is very limited. > Lab is a wonderful scene referred color space, but suffers from mathematical complexities that disables simple mathematical operations. The reason is that shifting a hue, for example, may describe a color that simply does not exist. (Think of it as divide by zero, but for colors.) (Note: Color spaces are neither "scene referred" or "display referred", so it is incorrect to call Lab "scene referred".) This is true of various RGB color models as well. It is not unique to Lab. Many color models have this property because of the overlap between different receptor responses in the eye... it is fiendishly difficult to figure out a way to represent perceptible colors without including imaginary colors. My conclusion here is that the only reasonable way to teach people how to pick harmonious colors is to have real humans use their brains and sense of aesthetics. Mathematical models for color perception tend to be either poorly suited for this task, or difficult to work with.
- crispyambulance 6y agoYeah, it's a bit disappointing. I know they're trying to come up with formulae to do this stuff, but color is a deeply subjective experience. You can have all the javascript machinery in the world, and it won't ever match quality with what visually trained folks can come up with using the artist Josef Alber's "Interaction of Color" theory.
- fouronnes3 6y agoI've had a dream project for years, but I have no idea how to do it. To build an accurate physical representation of the CIE 1931 xy plane. To see literally all the colors before your eyes at once. To see how far into infrared and ultraviolet your perception extends. Looking at an RGB rendering of CIE 1931 is kinda sad and makes me wonder of all the colors I've never seen.
- devwastaken 6y agoThe problem with that is probably color accuracy. Usually with things like UV light sources you have to have a specific filter glass that blocks out most of the visible light being emitted. Perhaps you need to somehow create a rapidly changing filter glass of all different wavelengths. Purely hypothetical.
- formerly_proven 6y ago> Perhaps you need to somehow create a rapidly changing filter glass of all different wavelengths. Purely hypothetical. Monochromatic colors are just a tiny, tiny sliver of the perceptible color space. They're not even the boundary of it, they're such a small part of perception that they're only a part of the boundary. In the CIE model, the curved part of the boundary represents monochromatic colors. The surface itself is not monochromatic, and neither is the straight boundary (line of purples). And that model is a simplification in and of itself.
- weinzierl 6y agoI've had the same dream for years until I realized that the reason I had no idea how to do it is actually that it is impossible. Of course approximations are possible and they do exist, but to make such a diagram accurate and comprehensive at the same time there are multiple obstacles: First of all the obvious fact that there is no printing or display technique with an all encompassing gamut. Also CIE 1931 is not perceptually uniform and unsuitable "To see how far [..] your perception extends.", as you expressed it. Apart from the technical difficulties the problems run deeper: Color space in reality is non-Euclidian. There is not even a perceptually uniform embedding in 3D Euclidian space, let alone one in 2D. This is how jacobolus put it once: "No, it’s not possible to have uniform color differences at all scales and in all directions in a 3-dimensional Euclidean space. If you go around a hue circle in little steps and then sum up all the perceived color differences you end up with more than π times the sum of differences you get if you go across the circle through gray." [1] Unfortunately your diagram can either be a fairly accurate depiction of a part or a fairly inaccurate depiction of the whole. [1] https://news.ycombinator.com/item?id=15485397 https://news.ycombinator.com/item?id=15485397
- Daub 6y agoThis site assumes that for a designer complementary colors are defined as pairwise opposites on the RGB wheel. This is a common mistake. Complementary colors have two properties: 1: Mixed together physically or optically, they produce a neutral. For this the RGB pair sets are the most truthful. 2. Incorporated into the same design, they present as 'perceptually opposite'. For this the RYB pair sets are the most truthful. 1. Is easy to prove (Muncell for physical mixing or Maxwell for optical mixing). 2 is not yet proven, but my own work certainly supports it (*informal tests on large groups of art students). The genealogy of RYB complementary colors goes back to before Leonardo DaVinci's, who defined these pair sets as retto contrario (literally ‘exactly opposite’). http://www.treatiseonpainting.org/cocoon/leonardo/chap_one/vo1/CID71 http://www.treatiseonpainting.org/cocoon/leonardo/chap_one/v...
- eurleif 6y agoIs there any evidence that RYB is more than a historical mistake which our culture has been slow to grow out of? We know now that the correct subtractive primary colors are CMY. Your informal experiments with art students may speak more to how they were (mis)educated than to anything intrinsic about color perception, no?
- Daub 6y agoA good question. The disputable value is 'maximum possible perceptual hue difference'. In color science, difference is usually understood in terms of 'minimum possible'. This is how the god-like Albert Munsell first mapped the perceptual color domain. Maximum possible has almost no presence in color science literature. I assume that this is because of the asymmetry of perceptual maximum/perceptual minimum. Without solid empirical data, I can only support the validity of RYB pairs by pointing out that Leonardo (and everyone else who wrote about color prior to Newton), supported this pairing without knowing the relative position of these pairs on any color wheel. A weak argument, perhaps. I know it is possible to design an experiment to prove/disprove the validity of RYB complementaries. It was on our to-do list before our computational aesthetics project ran out of money. However, I shall continue to assume its truth. My reason is simple: from a life time as a painter I know that RYB complementary pairs are true. An even weaker argument.
- swang 6y agoi thought this would be interactive so i spent time trying to figure out how to pick the second color in the "pick a color" box before realizing it was just text to read and not an actual call to action thingy. gonna bookmark it for future reference though.
- nateroling 6y agoThis is awesome! I’ve never seen the process of desaturation and palette building described as mixing the base colors together before. This gives me a whole new perspective.
- null_object 6y agoI think this guide falls into the trap described in this article: https://refactoringui.com/previews/building-your-color-palette/ https://refactoringui.com/previews/building-your-color-palet... where the mathematical model gives us colors that we should believe are harmonious, but which actually lead to clashing primaries, and a chaotic-looking interface. The RefactoringUI book (from which the preview above is an extract) gives a much more useful model to work with, when creating a palette that helps the end-user by establishing a clear and harmonious hierarchy of visual information.
- loosetypes 6y ago> to reveal color selection as being logical, predictable, and driven by principles anyone can learn. In that regard, is there any sort of algebra for color compatibility to quantify legibility? Specifically, say we have some text and change the background and font colors from default values. When I do this, I generally have no sense for the color change’s impact on readability or if the contrast would hurt my eyes until I take a look at the output. Then when I make a slight change - has it gotten better or worse? It feels so murky. I know there are more factors at play: font choice, font size, brightness of screen, etc. but does anyone know of a rough heuristic for or programmatic means of checking?
- bogdanoff_2 6y agoWhat if I don't want to have a fully saturated chromatic color as a main part of my palette?