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.
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.
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?
> Also, how exactly is lab color useful in web programming? How do you support it in CSS or HTML?
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...
Would you say celsius is "based" on fahrenheit? Or the other way around?
Is yiddish based on english?
Both RGB and HSL are based on the physics of color and perception. Just because it is trivial to transform one to the other doesn't mean anything.
HSL is explicitly defined as a transformation from RGB space, so each RGB triangle has a corresponding HSL space.
RGB is absolute garbage for doing anything other than displaying pixels. It's so bad, that the (piecewise) linear transformation to HSL is perceived by many to be good, when it's still equally terrible.
The main problem is that not all wavelengths of light contribute equally to perceived brightness in our color vision. Any color space that puts red, green, and blue on equal footing for a transformation is going to produce bad results. If you really want a linear transformation from RGB, you'll want to use something like luma instead (Y = .21R + .72G + .07B, according to Wikipedia)--you'll go from bad to acceptable, as luma is only a few percent off from the accurate results.
If you want to do color interpolation, you'll absolutely want to use CIELAB, which was explicitly designed for this purpose. Any good toolkit should provide CIELAB--d3 does, for example. If not, it's not hard to find snippets to do the conversion for you on places like stack overflow.
To get a reasonably accurate correlate of lightness perception, you need to take your linear combination in a linear RGB space to get luminance (Y), and then afterward apply a non-linear correction to find lightness.
It's useful because it gives a manipulatable version of the colour (lighten the value, shift the hue, etc) and then wing it back to hex. Integrates with keybinds and clipboard integration. Highlight, keybind, manipulate, keybind. Repeat as needed. There's a demo in the readme.
This is a fundamental trade-off. If you need true saturation, you can use CIELUV and deal with impossible colors. If you need a color space that doesn't have gaps, use HSLuv and deal with a suboptimal saturation. The strongest claim I can make about HSLuv's usefulness is that it is a better HSL.
Hope that helps.
EDIT: You gave an idea that it would be useful to show another slider on the picker called "C", showing the chroma component with gaps.
Yes, that would be nice. But as I understand it, fixing C would cause the H slider to show gaps too (?) Also, if you show sliders for H, S, L and C, then I think it would not be clear from the interface which sliders are fixed.
Generally, though, what to use working with colors greatly depends on what you are doing and I'm pretty sure most of the time where you think you need CIELAB, HSL with luma for Lightness would do just fine, heck, even jpeg's native YCbCr or RGB might do. It's just not a good advice to avoid RGB or HSL simply because it doesn't work well on rather rare occasions.
The algorithm is straightforward, albeit verbose.
(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.
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.
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.
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.
...that's what this demo does
Depending on color model and individual visual anatomy, red and green aren't necessarily complementary .
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.
All colors are problematic, but if you get your contrast high enough, this doesn't matter.
You can of course also find many artists and art teachers with grandiose personal theories about the subject.
My recommendation is to just put the time and work into learning your own personal preferences, by doing your own color exercises. For some design-y ideas about exercises to try see e.g. Josef Albers’s book. For photography, the best training IMO is to just make and look at lots of pictures.
Colour theory, beyond the important concept of complementaries, is very unscientific. I'm not aware of any credible, rigorous scientific findings about colour and emotion that are actually used by artists. (I'm not saying that no credible research will ever exist: see links here https://designshack.net/articles/graphics/the-science-behind... )
Painters (etc.) choose and apply colour in an intuitive way. Some artists are known as "colourists" for their skill in orchestrating colour effects. The way to learn is to look at that kind of work and absorb the aesthetic.
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.)
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.
And as others pointed out HSL/RGB are not the best (or easiest) to do heavy colour-theory based deesigns. If you're serious about colour theory in design, use CIE Lab* or Munsell
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.
This part in particular ...
> Pick any color by selecting its hue (0-360) on the color wheel at full saturation (100%) and at half lightness (50%) - this way you start with the 'most colorful color' you can get. ¶ Generate your second color without having to guess what will work. Thanks to science and wavelengths, we know that this works. The opposition of these two colors stimulate your photoreceptor cells in a good way!
... ends up being poor advice in general, “science and wavelengths” notwithstanding. Any pair of decently separated hues will do just as well as a pair of HSL “complements”, as long as the chroma and lightness are carefully chosen. If you take this specific advice and just rotate the hue around in HSL space, all of the perceptual color relationships will swing wildly.
Someone following this program who has a lot of experience with visual art / design will end up making reasonable choices based on intuition and past experience, but that will be in spite of this guide, not because of it.
Sorry to be harsh, but in my opinion non-experts will get better results than this blog post’s recommendations by just choosing perceptual lightness (e.g. in CIELAB space) of each color to have sufficient contrast, and then picking the hue/chroma entirely at random, or using any other desired criteria.
Here’s what Cynthia Brewer, expert in color choices for maps and diagrams, had to say about models like HSL and HSV:
> Computer science offers a few poorer cousins to these perceptual spaces that may also turn up in your software interface, such as HSV and HLS. They are easy mathematical transformations of RGB, and they seem to be perceptual systems because they make use of the hue–lightness/value–saturation terminology. But take a close look; don’t be fooled. Perceptual color dimensions are poorly scaled by the color specifications that are provided in these and some other systems. For example, saturation and lightness are confounded, so a saturation scale may also contain a wide range of lightnesses (for example, it may progress from white to green which is a combination of both lightness and saturation). Likewise, hue and lightness are confounded so, for example, a saturated yellow and saturated blue may be designated as the same ‘lightness’ but have wide differences in perceived lightness. These flaws make the systems difficult to use to control the look of a color scheme in a systematic manner. If much tweaking is required to achieve the desired effect, the system offers little benefit over grappling with raw specifications in RGB or CMY.
If anyone is looking for a better resource, the best one I know of on the web is http://www.handprint.com/LS/CVS/color.html. Otherwise, I recommend going straight to books. There are a variety of available books at every level of technical detail.
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.
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 to the visual cortex. Instead, at the first layer of processing, the cone cell responses are combined into 3 different signals, a brightness response (L + M), and two color difference signals, yellow–blue (L + M – S) and red–green (L – M). The brightness signal has the finest resolution, and is used for detection of edges, textures, fine details, motion, depth, and so on. The color difference signals are layered on top of that. “Lightness” or “value” is a perceived attribute of surface color based on the brightness response. (Caveat: this is a pretty simplified description.)
Almost any color scheme you choose which has enough lightness contrast will tend to look okay, especially if you avoid picking colors which are outrageously colorful. On the other hand, categorically, any color scheme you choose which does not have enough lightness contrast will look bad (will look muddy or clashing, text will be illegible, etc.).
Any color guide which doesn’t start with a discussion of lightness contrast is in my opinion doing a disservice to its readers.
Unfortunately, the “L” in HSL and the “V” in HSV are not remotely close to real measures of perceived lightness (value). You need to go to a different color model. The most established choice is CIELAB, from the mid-1970s, supported in a wide variety of software.
Almost any color scheme you choose which has enough
lightness contrast will tend to look okay, especially if
you avoid picking colors which are outrageously colorful.
(Ideally I would include asterisks and subscript ab in the symbols LCh to distinguish this from e.g. the cylindrical coordinates for CIELUV, but this forum doesn’t support it.)
what is it with these "experts" that think the way they see things is correct?
ever met someone with less than perfect vision... ever heard of someone with less than perfect vision?!?!
this is why you have high contrast modes on your operating system, and colour blind mode in some games (not enough of this)
It's much better to find color schemes that are recommended by experienced designers. And if you're working on a diagram, trying to design it to be effective with some large number of colors is probably futile, if color is going to be the sole visual discriminant. It's better to keep your number of elements small, if you can. And if you can't, pick a small number of colors, and combine them with textures to get a larger number of combinations.
So the state with color management on mobile is approximately where color management was on the desktop about 15-20 years ago.
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.
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.
Changing image encoding from sRGB is change for the sake of change - the vast majority of real world image content fits in sRGB.
iOS defaults to rendering sRGB (and Apple's devices do it pretty accurately ) so nothing changes for legacy images, unless your content or code specifically asks for P3.
Xcode and the App Store also handles thinning/slicing so that wide color content is only delivered to and stored on devices that can display it. 
Pretty much all of the leading content creation apps support the matching and embedding of color profiles.
> Changing image encoding from sRGB is change for the sake of change - the vast majority of real world image content fits in sRGB.
That's a terrible argument. Holding technology back for the sake of, what?
There were times when the vast majority of "real world" content and applications fit perfectly fine in 640 Kilobytes, 640×480, 256 colors, 2 audio channels and so on.
1920×1080 is still "good enough" and covers the vast majority of content so why bother with 4K?
Many people are happy with consoles yet why do PC owners resent it when a game's graphics are dumbed down?
In any case, wide color can make a considerable difference  (to be viewed on capable devices of course, but you can still see comparisons) and the cameras on the new iPads, iPhones and other devices take photos in wide color and do embed that information in the images.
1) Choose complements.
2) Mix them with each other until they dull down a bit
3) Make some other neutral color ( possibly by mixing them in equal parts ? ) and then you have 3 colors, and you've got a basis.
( OK -- just considering is there any connection between color theory and the basis of a vector field? )
So what I liked about this was it taught me something I didn't know.
I accept there are a lot of comments by experts on here about how this simplified presentation is wrong in such and such a way. I don't think that decreases its utility for me.
To a novice, just having something tangible to understand is the first step. I understand how to experts, it seems like the wrong advice. But I felt I understood it, and that's invaluable.
If you don't know what I mean by this, maybe it's better explained by something a professor said to me in grad school, "The trick to teaching is to trick people into thinking they understand it. Don't show them all the complexity. Show them a simplified model. Let them come to it in stages."
I think that's true. It stuck with me and it seems true. It also matches what I see my science education was like looking back -- a presentation of a series of models, over a number of years, that gradually layered in more and more complexity, but at a pace that was comfortable. This "chain of models" mostly agreed with each other, but the points where they contradicted each other didn't to my memory negatively impact learning, instead they served as signposts that made each model more distinct and aided in remembering them.
Also, there is this great feeling of being able to say, "Yes from the perspective of model X that is true, but when you factor in what model Y says, you get a different picture. Here, let me show you." That always sounds like a true expert. I like that and it also seems like having a bunch of models, not all in perfect agreement, in fact strengthened by the points where they do differ, gives overall a far richer picture of the topic.
The strongest idea that stayed with me from my science education was that "everything is a model" and "none of them are true" but some of them are useful. Different models, with different levels of faithfulness to evidence.
My main critique of what I will label the "dismissive expert answers" is that they posit a inflexible model of the "absolute truth", which, I say is, given by itself: not that useful ( at least to learn the topic ), and not really true ( because well, no model can be ).
I am sorry if this length comment is more suited as a blog post. Maybe I should just make blog posts instead of comments and link to the article. Maybe that's better than anyone. I'm not trying to offend any experts or do anything ego based, just push back against the what I feel were dismissive answers that missed another side of the value of this article. I wanted to share what I thought that other side of the value of this article was.
It does seem like a highly personal comment, just from my point of view. I hope it's been useful to some others to read it!
You’re looking for https://en.wikipedia.org/wiki/Grassmann%27s_law_(optics)
The same Grassmann was (arguably) the creator of linear algebra, several decades before anyone in the mainstream mathematics community took it seriously.
> I understand how to experts, it seems like the wrong advice. But I felt I understood it, and that's invaluable.
Same goes for the flat earth theory or young-earth creationism. :-)
I was going to reply with, "Yes, but the distinction in this case is that at least this presented color model is roughly correct, in that it is part of a chain of successively more correct models, that has significant overlap with what's real."
But then I pressed myself for -- what exactly is that overlap? I mean, creationism...flat earth theory, have some overlap with the evidence. They are models. People criticise them because they don't overlap as much with the evidence as other models.
In this case, I realized I didn't know enough about the topic to know how much the presented model ( about color theory...which I like and find comprehensible ) overlaps with the "reality" or "the rest of the evidence" about it.
So my objection to comparing this color theory I like to other models that have been widely invalidated...is simply personal. I don't know enough about the data about color to make any substantive argument about why it's different. I feel it must overlap more with the "reality" of color than the other models. Because it makes sense to me, I can see the logic and it matched my impressions about color and was useful to me. And I trust my instincts. ( There is something more in that I'll come to in a minute )
It's sort of uncomfortable to realize I don't know enough about it to refute objections to my fav new theory with anything more than "But I really like it and I can see the truth to it." But at the same time, I'm okay with that. I'm not going to learn more about the data to be able to offer these objections. I think mainly because...this theory is useful enough to me. It works for what I need right now. And matches the pace I want to learn things about this at.
From an economic argument -- this model has utility to me, so I selected it, as opposed to alternatives.
I really appreciated your link to Grassmann. I was super happy that my instincts overlapped with the guy that invented linear algebra.
Which brings me to another point. Science is sometimes uncomfortable because you realize that what is accepted my a lot of people, goes against your instinct, or your direct experience.
I think there's something really important in this. And I don't think it's so simple as "well that means you're wrong" -- I think it's the case that the following are true:
When your instincts are against the majority opinion. Either: 1) they're onto a more valid model than you, more likely, or 2) you're onto a more valid model than them and they've missed something, less likely, and yet that's the history of science ( and startups! ), or 3) the relative levels of validity do not matter to you because it has more personal utility for you, at that point in your life, to believe the model you like than something else.
I like the third point -- because in there is room for tolerance of diversity based on the idea of personal utility. As long as the utility doesn't cause significant cost to anyone else, then trusting your instincts in the face of evidence, even if you're wrong, can still be the choice that maximizes personal utility for you at that point.
Again, this comment might be too long...but I thought it useful to explore my vulnerability to realizing I didn't know enough, but I liked it anyway -- in this forum, so other people could see that maybe when you get to that point, it doesn't always have to result in fighting...but there can be something to learn from it. I think people here will appreciate that--but if not, I guess this type of comment is better as a blog post or personal note.
Personal utility functions over lifepaths -- it's a complex landscape out there!
Get a base color you like and simply change saturation and lightness to get all your other colors.
Just go to dribbble.com and see what you can see there, many interesting colour themes