Trouble with cyberpunk color pallettes

[Double7]

Hey guys. Haven't been here for a while and I am happy to say that I now have some time to work on some games

So my friends and I were talking about what type of game we wanted to work on and we came to the decision we would make an NES quality cyberpunk game. (NES being the resolution). It would be very reminiscent of the original legend of zelda as far as character size goes.

The reason we decided on this sort of size is so that we could max out on story, level design, and the types of things I really enjoy about games and that I want to include. In past projects where I used this NES scale I also used the NES color palette, which probably won't work too well. So I need a color palette that would work in this cyberpunk underground type of world.

Also, we plan on throwing lighting effects ontop of the game to give it more ambiance and to transform the NES style a bit.

Here is some colors I found while looking at a couple hundred different cyber punk photos, some pixel some not. I want to get a wide range of colors so that different areas can have different "feels" color wise so that the player can have a better sense of what the world's structure is.



Any tips for me? Know any palettes that would work well for this?

Thanks as always guys.

[MysteryMeat]

I do actually have some advice for this, yeah!
Essentially, you want to go for harsh neons and high contrasts for most things.
Black, dark purple, and browns should make up the bulk of the picture with elements outside of that being very bright and glaring or artificial-looking neons!

This picture shows off the concept well, most of the walls and fog of this scene are portrayed with black and a muddy red/brown, for harsh unnatural lighting. The props and scenery are highlighted with bright neon blues and yellows, with some reds here and there as well.
Google will be an excellent resource for this, just the word "cyberpunk" brings up a wealth of usable reference images! And when in doubt, Blade Runner remains one of the biggest influences on the subgenre and there's plenty of other ideas to take from it, like this shot of the Tyrell building:

This one only really uses blacks and golds, something that the game Deus Ex made use of heavily in its own scenery!

Experiment!

And on a slightly-related note, one of my friends runs a somewhat minimalist cyberpunk universe called static on the wire here that might help you if you're planning a more simplified art style:
http://tgchan.org/wiki/Static_on_the_Wire

He often manages to sell the cyberpunk vibe of his story with little more than a near-binary palette of orange and black!

[Ozego]

I think you can do it in pretty much any color composition you chose, just remember that in cyberpunk nation it's always night.

[ErekT]

More industrial and post-apocalypse than cyberpunk maybe but Cyber Shadow sticks pretty close to NES limitations:

https://twitter.com/mekaskull?lang=en

Shatterhand is worth giving a look also if you haven't done so already.

[Double7]

Thanks everyone. This will really help me out. Those are some great links and amazing pictures. I will keep you guys posted on my progress once I start creating some sprites.

Hopefully anyone else with the same issue as me can use this post as well.

[Double7]

Here is what I came up with for the scenery color palette. Opinions? I don't know if I used too much or too little. For the green I went for a jade type of color and I tried to have a LOT of colors for the basic buildings (the brick on the left). The right will be most of the colors that pop on signs and for lighting.

[eishiya]

Draw some scenes first. There's no other way to know what colours you'll need, and what colours are redundant.

Try starting your palette with just a few "key" colours, e.g. your general dark colours, and then a few colours for the neon lighting/accents. Then, add more variants as you need them. You don't need an entire palette to start working. Let your needs drive your palette, don't let your palette control your art.

[ErekT]

eishiya is right. Your main tool for building atmosphere is good use of light and shadow, worry about them colors later.

Here's a four color monochrome to illustrate:

[Double7]

Here is what I came up with using a purple/blue theme. Any ideas for this at all?

[MysteryMeat]

Hmm, I'd say it's not tall enough. The perspective on the roof is a bit odd too, I'd drop it down a tad both to better match the smaller roof on the right and gel with the perspective on the wall a bit more.
Colorways I'd need to see how it fits into a scene to really tell, try slapping some roadways or an example of what characters might look like to juxtapose it with!

[Double7]

Hmm, I'd say it's not tall enough. The perspective on the roof is a bit odd too, I'd drop it down a tad both to better match the smaller roof on the right and gel with the perspective on the wall a bit more.
Colorways I'd need to see how it fits into a scene to really tell, try slapping some roadways or an example of what characters might look like to juxtapose it with!

If it is going to be in a top down game, how long should the roof be? I saw some streams saying it should be about half as long but i'm not sure.The building itself is 7 tiles wide by 4 tiles tall. The size of the roof is 7 tiles wide and 2 tiles tall. Could you explain what throws you off about the perspective?

[Ma3vis]

Honestly am kind of new at this so



Dropped down the roof a little for perspective reasons
I agree with MysteryMeat in that it should be longer somewhat

Highlighted some areas in red that need editing/touchups

Added white to the sign for a brighter neon tint
Added shadow to the ledges of the roof also for perspective

[MysteryMeat]

Oh, another thing! Increase the contrast between your colors, I didn't even notice there was any texture/shadow on the roof or wall until I zoomed in on Ma3vis's edit!
As a general rule I go by, the absolute minimum difference between two colors should be ~10 values in hue or saturation to be visible. I'd personally reccomend going a bit higher than that for this, especially on the shadows.

Also, I'd reccomend against the stock blur effect it seems you used, instead try to replace it with some lighting along the edges around those lightsources like the doorframe or pipes.

[Double7]

Honestly am kind of new at this so

Dropped down the roof a little for perspective reasons
I agree with MysteryMeat in that it should be longer somewhat

Highlighted some areas in red that need editing/touchups

Added white to the sign for a brighter neon tint
Added shadow to the ledges of the roof also for perspective

Thanks for the feedback. Will be trying to touch it up now and add surrounding tiles. The white on the neon is a great idea and I will definitely be using that in the future.

Oh, another thing! Increase the contrast between your colors, I didn't even notice there was any texture/shadow on the roof or wall until I zoomed in on Ma3vis's edit!
As a general rule I go by, the absolute minimum difference between two colors should be ~10 values in hue or saturation to be visible. I'd personally reccomend going a bit higher than that for this, especially on the shadows.

Also, I'd reccomend against the stock blur effect it seems you used, instead try to replace it with some lighting along the edges around those lightsources like the doorframe or pipes.

The blur on top is there for a bit because I will be using in game lighting to generate the glow of the neon. That way it affects the other moving objects around it as well. The reason I was so hesitant to make harsher shadows on the roof is that I don't really have a light source in the current picture for it. I guess I can assume that the rest of the city will be able to cast those for me.

[MysteryMeat]

Aye, on top of that though you might want to shoot for high contrast in general! Cyberpunk tends to run with some pretty dark themes, hence the "punk" end of the moniker. Darker colors as a rule fit that, though obviously there's wiggle room in there for alternate takes. Experiment and see what looks good to you!

As for things being taller, if you're going for a cityscape it might help to work with fades to black instead of roofing to better imply height.
Like so, but you know, not an INCREDIBLY lazy edit like this:

I didn't really nail what I'm trying to illustrate, but try to have it fade out as if the camera is "cutting away" the top part of the building, that way you can still sell the clustered metropolitan area without having to obscure parts of the game.
Alternatively, you could have taller parts of buildings fade away as characters move behind them, it all depends on what you're going for.

[Double7]

Aye, on top of that though you might want to shoot for high contrast in general! Cyberpunk tends to run with some pretty dark themes, hence the "punk" end of the moniker. Darker colors as a rule fit that, though obviously there's wiggle room in there for alternate takes. Experiment and see what looks good to you!

As for things being taller, if you're going for a cityscape it might help to work with fades to black instead of roofing to better imply height.
Like so, but you know, not an INCREDIBLY lazy edit like this:

What you talkin' bout meat? That's a beaut. Yeah I will definitely use this when making larger buildings. I will try to go over the whole thing by hand to increase contrast and make it pop. Will need to get home first so I can work behind the blurs I have right now. I will update once I make some substantial changes.

Since this is a color oriented topic as well, how do the colors look overall (besides the contrast)

[Double7]

Here is what I was able to come up with. Not 100% happy with it, but would like some help on where to move forward now.

I think one of the problems I am having with my brightness is that my Laptop screen is showing much darker blacks and brighter whites. It has more powerful contrast then when I pull my image over onto my second monitor. I will definitely need to have a brightness scale for the player to set whenever I get to there.

I currently don't have and "lighting" effects since that will be made with the game engine, so imagine there being street lights and glows off of the neon signs and floor lights.
The one thing I am really wanting help with is textures on the sidewalk and the street. Right now they are just a single color because I can't find a way to texture them properly (one of my weak points).

This part of the world isn't supposed to be a very high traffic area, more a backstreets area. So there will definitely be areas with a ton of neon and ads and stuff. Which I am excited to work on.

EDIT : To explain my problem. On my first monitor the Right version looks better and on my second monitor the left looks better. So I know which brightness looks better to me, I just don't know what most monitors will show.

[MysteryMeat]

If it's a lower traffic area, perhaps some negligent roadwork to provide some texture to the area? I'm not sure how utopian a cyberpunk world you're going for. The far left is the one I'd go with though, some work fiddling more with the colors like on the sidewalk might be worthwhile but at thsi point it wouldn't raise any eyebrows for me during gameplay. It's got a very nice clean look to it.

[Double7]

Thanks meat. I will probably have to learn to work on my second monitor then. Because on my first monitor I can't even see the outlines of the blue streaks track on the road.

I will keep messing around with the sidewalk a bit. If I can't get textures then I will add some puddles and other trash to the walkway to add some more clutter to the screen. It might be a utopia but it is still a city

[MysteryMeat]

It might be possible to salveage that first monitor if you play around with the settings and/or install Fluxx (https://justgetflux.com/) and play around with that until you get good results. For a while I wound up using my phone to double-check colors until I got my replacement monitor, though come to think of it I haven't really done much extensive testing on that...

Hm, that's actually a good question, how DO you test monitors for proper color stuff?

[Double7]

So I am having an irritating time trying to get the character model for this game. I want them to be small (around 16x16), but I don't really want "cute" characters. These are what I have come up with so far, is there any other 16x16 designs you guys can think of that aren't "cute" and that will fit well into this cyberpunk world?

[wzl]

i couldnt resist

[Double7]

Here is the character face for that specific character. Any ideas on how to improve it at all? I think it is pretty decent but I also know i've seen better

Also thanks so much for all of the help so far.

[Bak]

Didnt read the thread, but using achromatic color like pure gray with normal colors is not a good idea.
Look at that first page examples on how GITS cityscape is blue and akira is green-yellow. Just wander around those pictures with color fill, i doubt concrete would be just gray with all the purple neon reflecting on it.

[Ma3vis]

Green is a recurring theme in cyberpunk because of the old IBM terminals glowed a phosphorescent green. It stuck, obviously.

Neon colors in general


So is red/white/orange for contrast




Blue also tends to be a middle ground in blend/transition from purple or green

[Bak]

i made a quick rough recoloring


I added some coloring and tried to separate vertical and horizontal surfaces by making horizontal surfaces(floor) brighter.

[washk]

The right one is clearly a big improvement. I dig it.

[MysteryMeat]

Ditto. Excellent colors, gives me sort of a hyper light drifter vibe but without the eye strain

[Double7]

So I have been working for about a week on other stuff in the project and decided I would share. I didn't see meat's version until now. I must say it looks really cool, it is just not what I was going for. I will definitely use the techniques shown to give a better separation though.

Again this doesn't have the added lighting from the engine. I will be sure to post when I get that update. I also plan to have animations on the lights and on a lot of the other features so it will look a lot more complete.



Here is a picture of the menu in progress. I will be adding an animation over the whole thing to make it look like a hologram. So if anyone has tips on that I will definitely take them.

[Ma3vis]

Highlighted some conflicts with a red outline

01. top menu needs more contrast from the overall game
02. characters' hair in comparison to 
03. the power line looks strange
04. the incomplete sign on the bus stop (?) takes away focus from everything else -- needs less bright colors

Also all the dark colors (gray buildings, dull green jacket) looks muddled together
Hence a reason the reshading on u/Bak's building looks cleaner