Megan Fox
patreon
How I make color palettes (part 2 of 2)
🕑 Added 2024-06-03 18:48:52 +0000 UTCWhen last we left our daring colors, they were here:
Not bad, really! This is what you get from direct sampling, and that's fine. Potentially you stop here if you were doing, I don't know, painting? If all you need is a conceptual palette? But oh no no, we're not stopping there, because today, our imaginary task is:
Branding!
Branding needs clear, concise, and above all, clean colors. We need colors you can cut yourself on, because without strong contrasts, our logo will look muddy and our powerpoint will be more of a weakround.
How do we tighten colors?
As with everything, there's a trick/tool for that. Here I'll be using the Atmos Color Wheel tool https://atmos.style/color-wheel but, again, who knows if that will exist by the time you're reading this. The main thing is you want something that does, this:
See all the options? You want most or all of those, because you'll be flicking between them a lot going "hmmmm" and "ahhhhh" and "I wonder if-".
The other thing you REALLY need is, ok look at the above image, then look here:
See how I can drag the "wings" of the Analaogous colors, either side, and how the colors chosen get wider? How my inputs here are selecting a central color up top, choosing the "width" by dragging either wing out, and also the overall Lightness with the slider below it? You'll want all of this. Photoshop used to have all of this built in, until they just uh. Removed it, irrevocably and forever. So you'll want to find a tool for the above that isn't uh, that.
Now then, how do we use this? Well let's start by popping our central Red in here, that we're anchoring our action game around. Because we're very focused on uhhhhh, strawberries, and making that visually pop.
First, let me show you all the possible outputs here. I don't know the proper terms for these, so I'm going to call them "schemes" since that's what I've seen in a few places. Even though I'm pretty sure that's wrong. Forgive me, art gods.
Now right off, purple fans are gonna zoom in on that Square scheme on the bottom middle, because look at THAT. Unfortunately, as I already explained, Purple Is A Choice™, and making that color palette work is beyond the breadth of even this Color Theory 102 class, so. Let's just scooch by and pretend we didn't see that, ok? (but purple fans, homework, go play with that and make it work, you likely can once you read the rest of this)
Anyways, we know the red's dead on, since that's the color we chose. The rest though, there's a lot of greens and blues popping up, but they aren't exactly right. They're pretty off what's in our palette. So, let's work on that from a couple of angles.
First, cast your mind way back in part 1, where I explained that the blue and the green felt "off" compared to the red, but I'd explain why later. Remember? Well, here's later, so, let's explain.
More Tooling Explanation And Bonus Fuck You To Photoshop
For this, the images you'll be seeing are Affinity Photo 2. Personally, I've found Affinity to be incredibly powerful, and they're my Adobe alternative of choice. Affinity Designer 2 is my daily driver for layout work, I don't even own Illustrator anymore. I'm like this [ ] close to binning Photoshop entirely, but the "just Photoshop" package is cheaper than a couple of coffees, and sometimes I do client work/etc that involves PSDs. Affinity can open PSDs, but not always 1:1, so I like to have it just in case. So whatever, Adobe can hang on by their nasty, raggedy fingernails.
Oh and when you see a screenshot like this, with weird floating boxes?
I'm using ShareX as my screenshot tool, and one of the cooler things it can do is pop up screen grabs as always-on-top overlays you can drag around. So I use ShareX to grab a square of the screen, then I can drag that around to be on top of other stuff. Means I can pull my colors out of one app and then use them as direct visual references when tweaking colors elsewhere. Also way, way more- it makes taking video dead easy, tons of stuff. Super handy!
Color Tightening
Anyways, check this out. I'm gonna show you the current palette as a reminder, then work through the colors.
Note the position of the slider, and that I've got this picker in "Lightness" mode.
Now let's look at the other colors we picked.
Check that out! All over the place. This isn't a problem really, but your brain is pretty good at picking up on this, and it's part of why that palette seems off.
So let's try confirming the colors via lightness.
Kinda better already, right? As a special bonus, you haven't actually lost any color Vibes. Your green's always going to have that slight brown, your blue's always going to lean that slight grey. Lightness adjustments are non-destructive, in that you can always adjust the lightness the other way and find your original color again.
Skinny Jeans Levels Of Tightness
But we can take this further!
I like to work off the split complementary scheme, because as stated I like to end up with 3 primary colors in my palette. Triadic is the other option for that, but, well,
This tends to generate um, Programmer Palettes. Yes the contrasts are crisp, but the colors that fall out of it tend to be too rigid. Still, this is infinitely better than starting with a pure red green blue palette like a lot of programmers do. If you absolutely must go this route, remember the trick I did with Lightness conformance a few steps ago? Do that in reverse with these colors. If you start with these and then janky around with their Lightness values a bit, you can break up the rigid triangle more.
But anyways, we're going to move forward with the Split Complementary view. Trouble is, those really aren't our green and blue. Honestly they're way off. So let's see how close we can get.
To make this work, I had to mess around with the Lightness slider in the Atmos tool and do a lot of dragging on the wings of the Split-complementary. The overlays are the grabs out of our actual palette, and I can get them- close. The blue's pretty close, probably close enough, but the green's way off. So here's where we make a choice: which color do we ditch.
Typically, I'm trying to get to a point where one color matches (or mostly matches), and then I ditch the one that's way off. So goodbye, sort-of-yellowy-brown green, you're just too far off model here.
If you get to this point and you can't get EITHER color to match? Not even close? Go back to the palette you're got so far, and play with your Lightness values some. Even if you have to temporarily up the lightness on one color before you pull it out as your comparison point against the color scheme, you can probably get something closer to workable. Still not finding a match? Try another color scheme.
Nothing working? Go back to the original color picking but, knowing what you know now, pick a color closer to one of the ones being spat out. Like this'd be the point where you might go "oh wow the purple's way off" and go back and pick a green or a blue. Or this might be where, if you stubbornly picked a brown color, you're going "but none of these are even close!" or "my chosen color looks weird when I put it next to this scheme" and. See? That's why you don't want those as your primaries.
Anyways,
Note that I don't remove the muddier green entirely. The muddier green undeniably more character. If I were painting something, I'd probably start with the muddier green. The thing is though, if I were doing branding work? Logos? Powerpoint? Or if I were doing UI work, making buttons, that kinda thing? Then I really want that top tightened color. It contrasts way better.
See? Sharp contrasts matter more in contexts where you're using limited colors, or two colors jammed up next to each-other. This also might come up if you were, say, making a space marine kinda game, and each cadre of marines had a symbol, and you were doing the blue marines are defensive and red marines are offensive and greens are healers or whatever, thing? You'd also want the sharper green on their heraldry.
I Hereby Graduate You From Color Pick Good Academy, Magna Bum Loudly
Anyways, that's about it! You are now a color master. Sort of. Remember, you were just taught color theory by a technical artist. Probably don't show this blog to your proper artist friends who actually know this stuff, or do if you want the 201 class that begins "right this is a good starting point, but,".
Either way, now you know WAY more than you did, assuming you started where I did, and that's great!
