In this custom visualization by the New York Times, green (centered at 120°) and red (centered at 0°) are the two endpoints, while yellow (centered at 60°) represents the neutral middle value. If the two ends of the scale are hues that are, say, 120° or less apart, you can often use the hue between them for a neutral value. However, you’re best sticking with something that is still pretty bright and not terribly saturated. The example above shows a flat gray for the middle value, but it’s worth pointing out that this sort of chart remains intuitive even with a more colorful neutral swatch. Perhaps the most common example of this is the “how Democrat/Republican is each state in the US” chart.
#Color picker just hue generator
The Divergent Color Scale generator is most useful for visualizations where you’re showing a transition from (a) one extreme, through a (b) neutral middle, and finally to a (c) opposite extreme. To try out creating single-hue color scales, check out the Data Color Picker. If you’re interested in creating these palettes by hand, you’ll want to understand the brightness-saturation tradeoff, which I talk about here. However, it’s much easier to achieve when you’re not varying hue, as you would be for a multi-hue palette. Visual equidstance is still a concern in single-hue scales. While the scale doesn’t explicitly start at zero, the visualization is still a measure of one variable – number of pitches – that goes from (basically) zero on up. Here’s an example from the Washington Post with single-hue scales. Single-hue scales work best when one end of the range of the value is effectively “neutral” – in this case, “0 commits” is neutral.
Github uses a single-hue color scale (which ranges from a very light gray to a dark green) to show the number of commits a user made on a particular day. Whenever you’re interested in the value of one numeric variable, you should consider using a single-hue color scale. To try out creating multi-hue palettes, check out the Data Color Picker. Just trying to use the key at the bottom of this image proves difficult – you have to look twice or thrice to make sure you’re looking at the correct data point.Ī wider range of visually equidstant hues makes it much easier to use this chart. Google Analytics is a site that could benefit from a wider range of visually equidistant colors. But the Data Color Picker tool uses it in the background, so you don’t have to think about it. Do Figma or Sketch or Photoshop use HCL? No – of course not. This is a pretty simple concept, though it’s made much tougher to get right because color systems (like RGB and HSB) are based on how COMPUTERS “see” color, not how humans see color.įortunately, there are some color systems based on human perception, the most sensible being HCL – hue, chroma, luminosity which is most similar to HSB, but made for humans over computers. “Visual equidistance” is a fancy way of saying that any two adjacent colors are equally different to our eyes. I personally try to think of including both warm and cool colors spanning dark and light values. A palette like this is going to work better when there are a wide range of colors. If it’s not immediatedly clear which data point is in which category, you should focus on making your colors more visually spread out. This can make it tough for the user to determine what falls into what category. The main pitfall with this type of color scheme is when two of the colors are too similar. However, there are some things to look out for:
This kind of color scheme works well if you have a particular brand color or two that you want to include in your color scheme. Those are:įor data visualizations where the data fit into categories that aren’t based on the value of a single number, you’ll often turn to multi-hue palettes.įor instance, many pie charts and maps fit into this category.
In my experience, there are basically three types of data visualization color schemes that you’ll see – and that you’ll want to learn to craft as a UI designer. Check out the Data Color Picker for an interactive version of this article
0 kommentar(er)
