NokiMo
Megan Fox
Megan Fox

patreon


How I make color palettes (part 1 of 2)

Lately the work I've been doing is more branding adjacent, and I realized: maybe this would also help folks? So here!

Programmers, artistically dense friends, I was once like you. Or rather, am still like you compared to proper artists, but in the land of the blind, etc etc. So here, allow me to pull back the curtain: here's (one way / my way) to pick color good.

Don't Just Pick Naked Colors

This process does not begin with the color wheel, and it sure as heck doesn't begin with "255,0,0" or any such nonsense. Put the Photoshop color selection window down, and back away.

Instead, find a piece of art you like!

Here's my pick. In digging around for Redwall book covers, I found a whole lot of stuff that, frankly, hasn't aged well. But this piece? Totally unlike everything else. It's like someone did a D&D source book on Redwall or something, they just sent it. It bleeds vibes. If anyone happens to know why this one cover is so EXTRA, by all means, tell me in the comments.

Anyways you might use your own game's concept for this, you might use something in your pile of reference, heck, you might just go trolling DaVinci's work and find one that speaks to you. Don't overthink it. You know that smoothbrain, low-judgement mode that you get in sometimes when you're really tired, or a bit toasted? It's like your brain has been shifted into neutral? You want that mode for doing this work. In more literal terms, the goal is to use the pattern matching/processing systems of your hind brain in a way that simply does not work if you're alert or analytical.

Anyways, shift your brain into neutral, put on some good music appropriate to the kind of game you're making, and just look at art. You're looking for this little spark of "hey, there's something here, this has The Juice". Trust the vibes.

So we've got a picture! Well, uh, now what?

You want to pick colors! But we're programmers, we're idiots, we can't just Pick Good Color. We're smarter/stupider than that. We let the COMPUTER pick the colors!

For this, finding a website to just randomly pick colors from an image is a huge help. I'm using https://coolors.co/image-picker but, who knows if that still exists when you're reading this. What you're looking for is something that 1.) lets you upload an image, 2.) picks a (controlled by you) number of colors from that image at random, and 3.) Gives you an easy button or slider to make it quickly pick new colors. Ideally you also want 4.) the ability to manually drag around and replace/pick your own colors, since you'll be refining the random selections.

How many colors do I pick?

First, and this is important: black and white are colors on your palette. You do NOT go off half-cocked and, in your eventual game, make your UI text pure-black and your white backdrops pure white. So make room for a black and a white in your palette.

Past that, I usually pick 3, since that's what falls out of Complementary colors. More on that in part 2, though. For now, let's just pick some colors!

These are terrible! There's like at least 3 browns there. You never want one of your primary colors to be brown. There can be a brown in your palette at the end, and you probably want one there especially if you're making a natural-world kinda game, but it's never one of your primary colors. Browns are a muddle. You know how if you mix a bunch of paints, you get brown? Same principle here. Browns arise from the main colors you pick to be your palette, so they are not the primary colors OF your palette.

So let's try again. And again. And again. When I said you want a tool that makes it easy to pick a bunch of colors quickly? This is why. Mash that bad boy until you get something that isn't a brown.

Now see, this is getting interesting. Something you're about to learn about this image is, it has way more red in it than you think. That black isn't a black, it's a purple. That brown? Reddish. This whole thing is a bit tilted that way, and it's part of where the vibes come from. These are The Vibes we trusted our brain to find earlier, so now we can use them.

That green? Kinda nice! The red's nice too. Now I'm making a game about VIOLENCE, so red's actually pretty important for uh. Reasons. Ha. We're probably gonna build our palette around that red for a reason, let's leave that pick as-is.

But first, wait a sec, that green is a CHEATER! That's some weird watermark a publisher added. Who wants to bet the watermark used an arbitrary green based on their branding rather than this image? Away with you, false green, let's find a better one.

Now admittedly I nudged the brown a bit here by accident, but still, not that much- and what the heck, the brown turned green!

This is why we don't rely on browns as our primary colors, because browns take on the colors around them. The way browns tend to come up when you randomly select pixels from this? That's because a ton of this image is a brown- but in context, those muddled browns appear differently. Fun little experiment.

Anyways, now's as good a time as any to look at that charcoal color there and go: hmmm, that's too close to black but too bright to be a black, so let's decide that'll be our black and just, find a deeper black in here instead. While we're at it, let's pick a white.

If you were to actually check this color's values, you'd find it's nowhere near black. Ditto for the white. That's good! Heck, let's take a sec and test it:

Not bad! I'd probably not use the uh, slightly edgelord'y font everywhere, but it's got vibes. Vibes is good. We're on the right track.

Now then, we've got that nasty brown-that-now-looks-green hanging out in there, so let's try and find something else. We want something that stands out from the red and the green, specifically, since those are the colors we've locked in for now.

Found me a nice blue. Better! That being said, right now you might be thinking: huh, why does the red feel different. More intense. We'll get to that in part 2 as well. First, we have to address the elephant in the room:

Purple is A Choice

I will not judge you if purple is in your primary colors. That is valid. I love purple. But you need to commit to the bit. Shit will get w i l d. Making that purple work is beyond the scope of this Making A Palette 101, so instead, we're going to go: hmmm, you know what, I DO want a brown. I've got my red, my green, and my blue. That's a pretty good nature palette with some uhhhhhhh strawberry juice, so I'll probably want a nice brown to go with it.

There we go, lovely. Also I've re-arranged things so it's easier to see the primary colors, the brown, and the black/white.

Now! This is a palette. We could use this. I'm basically done picking colors from the picture at this point. But there's a bit more work I'd do from here, because those colors as chosen are still a bit muddy. It's just that this has gotten um, long. So let's call it for now, when you're ready, read part 2 on how I'd continue tightening this palette.

How I make color palettes (part 1 of 2)

Related Creators