There’s a complementary color combination that is especially loved by data visualization designers: yellow/orange/red and blue. They’re all roughly complementary, and they all come with different saturations and lightness. That’s what I did to all of these color palettes: ⬤ ⬤ ⬤ ⬤ and ⬤ ⬤ ⬤ ⬤ ⬤ and ⬤ ⬤ ⬤ ⬤. Change the saturation and lightness first and see if that’s better. So if your color combination doesn’t look awesome yet, don’t immediately add another hue. I desaturated the light blue ⬤ and the lighter orange ⬤ and made every color darker except the lighter orange. Our better (!) complementary colors in Adobe Color After playing around with the saturation and darkness, it becomes this: Let’s come back to our color combination: ⬤ ⬤ ⬤ ⬤. (If you change the hue just a tiny bit, you’ll achieve even better results: ⬤ ⬤ / ⬤ ⬤.) Here are two color pairs with the same hue, just different saturation and lightness: ⬤ ⬤ / ⬤ ⬤. In fact, you can create new colors when you change just the saturation and brightness. Saturation and brightness are as important as hue. There’s where we need to change the saturation and lightness: Use saturation and lightness to make your hues work Yay! But they’re also unusable: The two oranges are way too similar. Our colors are opposite each other on the color wheel, so they’re clearly complementary. So let’s do this - this time with Adobe Color: Our complementary colors in Adobe Color When in doubt, use complementary colors and their neighbors. And that’s a great choice! Lots of complementary color pairs look fantastic together. If the distance becomes small enough, you’re basically using complementary colors. Note how much more beautiful the color combinations become. In the video above, I used the color tool Paletton to start with a tetradic harmony and then decrease the distance. It will result in too many hues - and we’re on a mission to avoid that. One of them is called “square” or “tetradic.” Don’t use it. Lots of these tools let you choose different harmonies. You can use Adobe Color or Color Calculator to do so. Here’s where it becomes a good idea to actually look at a color wheel. It will look more professional - and therefore more trustworthy - when it only uses a few hues and their neighbors. There’s no need to rely on hues from all around the color wheel like ⬤ ⬤ ⬤ ⬤ ⬤ ⬤ for your visualizations. Which means: Don’t dance all over the color wheel Which means you can stay in a small area of the color wheel and still have many options. And we haven’t even talked about orange and yellow. So much blue! Like this ⬤, this ⬤, this ⬤, this ⬤ and this ⬤. There is gray ⬤, but there is also cold gray ⬤ and there is warm gray ⬤. There is yellow-ish red ⬤ and blue-ish red ⬤ and everything in between. So before we impose rules that limit us, let me freak you out a bit: There are thousands of colors you can use. The green ⬤ is… can you even call it a green ⬤? The red that Nadieh uses ⬤ is different from your typical red ⬤. Look at this graphic’s colors and compare them with the basic ones ⬤ ⬤ ⬤ ⬤ ⬤ ⬤: So today I’m here to tell you: There are more colors than that. If you haven’t thought much about colors since you were a kid coloring in your coloring book, this thought makes sense. So I’ll use green and yellow and blue and red. You might think like this: “I need five colors for my chart. It uses the same parameters ( Hue, Chroma = saturation, Lightness), but is closer to “how we really see colors.” Datawrapper uses the HCL color space for its color picker:īut since you won’t find HCL in Adobe Photoshop or, every time I mention degrees (like 0°) or percentages, I’ll be talking about the HSB/HSV color space.Īll right, let’s do this: Broaden your understanding of colors rgb(207, 176, 58)) to HSB/HSV, use a tool like .Ī relative of HSB/HSV is the HCL color space. Brightness/Value ranges from 0% (black) to 100% (the actual color): ⬤ ⬤ ⬤.Saturation ranges from 0% (gray) to 100% (super duper colorful!!): ⬤ ⬤ ⬤.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |