Feature 05 - Generic 16 color palette

[Lee N]

We need more people to explain this.

Well, no one can ever say that people on pixelation aren't helpful.. need an explanation? here are five! 

[LoTekK]

Ah ha! I understand the concept of a key color that will be used as the transparent color, having used this in different contexts, both 2D and 3D, but I had always been under the impression that if sharing a palette among different assets, the key color/palette position would also be shared. Thanks for clearing that up.

[ptoing]

Also you do not even need to use a colour for the transparency, meaning you can use all 16 colours on a sprite.
You could just make 1bit maskimages which correspond to what is transparent and what not in a game.
Afaik they did stuff like this a lot on older systems without hardwaresprites

[LoTekK]

Ah, right, I completely forgot about alpha masking. Doh.

[Arne]

Utopia, which I ripped gfx from just the other day, used a mask of some sort (5bp+a mask). Here's a screen, using the RetroSpec Ripper:



(I made a duplicate palette (index 32-63) so I could see the stuff correctly in 6bp mode, but in the end I had to write my own ripper cuz I needed to rip using some header variables for image heights)


As for my 16 color palette project, I'm just treating it as an optimization problem. I will use it for my handtop which I will travel back in time to launch. It has my 16 color palette, 4bp per sprite + 1bp opacity mask, or something like that. Not necessarily a speccy but I made the mockup today so it'll have to suffice as an illustration.

[LoTekK]

That handtop mockup is awesome. I'd hit it!

Thanks for that breakdown diagram, btw, as well as that entire page of sprites. Should serve as some nice reference.

[Lee N]

I will use it for my handtop which I will travel back in time to launch.

Is that before or after you have travelled to the future to launch your time machine? Wait.. time travel is confusing.    

Seriously though, sweet handtop.

[Arne]

Is that before or after you have travelled to the future to launch your time machine? Wait.. time travel is confusing.   

I did it before after before before after before... I think.


My palette was a bit dark and gray, so I took the bull by the horns and curved the mid and brights up a ton.
new v16 ----------------------------------------------------------------------------------old  v15

[Helm]

The near-white gray is so near-white, might as well make it white. Why not?

[LoTekK]

Hmm, Jonlan... Laser Squad?
I think the higher key seems to be working (which also nixes my earlier comment about Helm's palette), at least after looking at the images on a DS screen, which has a fairly narrow viewing angle beyond which the colors get a bit washed out.

[Arne]

The near-white gray is so near-white, might as well make it white. Why not?

I'm not sure if I would like that. I find Pure White a bit obnoxious. It's also rather uncommon to see in images unless there's serious overexposure going on.

It's 242,240,231 now, so it does have a warm tone to it. 240 is quite different from 255 I think. A slight yellow white will appear brighter than a pure white without having that cold sting, but mine is a bit more grey.



Jonlan is from LaserSquad, but the water tank and master droid is from RebelStar Raiders. I felt an urge yesterday to repixel the entire moonbase.

[Helm]

for art a pure white is not very useful unless certain lighting conditions are met. But for gameart is an invaluable tool of separation. In small pixel spaces, sometimes you really need that sharpness to make a single-pixel specular add life to an edge.

[Arne]

I can see it working for single pixels, when you need the white to bleed.


Trying out the white. Changed dark blue to less saturated. Lightened the two paired darks. Noodled on the water tank. 50% dithering is an interesting effect I need ot explore more to separate surfaces etc..

[PASSOUT]

16 colors!!!!!? I mean realy,how do you draw that?Thats...INSANE!By the way,I love the pallet not realy a purple in there,but still I'm going to use this every time I sprite.

[Feron]

I love how this is coming along.  One thing i thought is that you could merge the sky blue with the grey and lose none of the readability, of course greys are useful, but merging them would free up a space for perhaps a darker grey.

I don't know how much photoshop vucked the colors when i saved it, but you get the idea:

[Arne]

Hmm.. I don't know, it's nice to have a neutral, a colored grey feels a bit sick. I'd also like to keep the light blue close to a good sky color which connects with the darker one, and by keeping it somewhat cyan it works as a plasma color as well. Good idea though, if I absolutely must have a new color I might do something with the greys. It would be cool to have a darker one. Right now I sometimes use the light blue and grey together for various specular effects. If the grey was a bit darker, I could probably use the light blue as an intermediate between the grey and white.


I did another mockup (still wip). Took me a while to figure out that the thing was a Victorinox knife, and I even have one in my belt all the time. I made a little scythed walker of it. The barrel was not very interesting so I scrapped it.

[Helm]

So are we now keeping the pure white?

[Arachne]

Neat. I've been wanting to make a 16 color palette of my own, but I didn't quite know where to begin, so this is really helpful.

I played around with it a bit and probably ended up with something too dark because of the black background. I'll see what happens when (or if ) I manage to put together a decent mockup.



Here with your latest version:

[Helm]

Welcome back Arachne! Nice art, really crisp, if not a bit over-AAed. I think this palette is awesome.

[Feron]

So are we now keeping the pure white?

i would hope so.  1 pure white pixel always seems to look bigger than its surroundings pixels, which is very useful for eyes and possibly even teeth.  If you sprite has about 16 pixels for its entire face one white pixel next to a dark makes a perfect eye only using up 2 pixels.  It never really seems the same with a grey-white.

EDIT:  as a side not, could this thread please be featured, its a great thread for learning color theory aswell as lots of participation from the community.  Plus it would be nice for the final product to have a place in the feature chest for all to see and use.

[Arachne]

Thanks, Helm Yeah, I tend to go a little crazy with it once I get started.

This is what I'm using now. More contrast

[Arne]

I think that kicked the darks back to far.


So far I don't have a problem with the full white.

[Helm]

in spriting stuff this palette is a bit tricksy I found. The darker shades tend to group, not even out so they can be used as buffers. The blue and the desat blue mix well as dithering, but again don't provide a small ramp against each other.

[Ai]

The latest update has a L (of L*a*b*) ramp very close to linear, which speaks pretty well of it.
Comparing it with Arachne's version, it's much more evenly distributed; Arachne's has pairs of colors of very similar intensity.. which does boost contrast overall, but I believe for a palette this size you can't afford to spend slots on colors that just look muddy when mixed.

Helm, the latest palette doesn't have that problem as severely; you can get some depth from it. (although the other grey's gone -- but IMO that improved your sprite's look.)

[Helm]

I am using the latest palette. plant 2 (from darkest) and the sole water color mix muddy exactly how you describe (check the shoulderpad on my sprite) and are too close to each other. They should be ramped, one of the two being brightest so they can serve a function against each other besides a very subtle tint which isn't very useful for game art.



edits on the blue ramp mostly. Check the values.

[EyeCraft]

I just wanted to say this topic is totally bitchin'. I'm very intrigued with the whole process, and that latest edit by helm looks even more versatile 

[Arachne]

I tried to do something about that blue, too. Just changed the hue. I do like things dark, so I suppose it's less useful as a generic palette in that respect.



Helm's edit to the right:



Edit: There's a chance I might have my monitor calibrated too dark, now that I think about it.

[Feron]

I tried to do something about that blue, too. Just changed the hue. I do like things dark, so I suppose it's less useful as a generic palette in that respect.

whilst the blue works very well fo that mockup, I can't see it working very well overall.  There just not enough contrast in that blue ramp.

Helm's edit makes a good few suggestions.  this is very close to its final product i can sense.

PS.  Will this thread please get featured and a little banner up the top there??

[Helm]

When it's done.

[Squirrelsquid]

this palette is so awesome! I recreated my shoot em up with it.

[Arachne]

I ended up doing what Helm did (topmost ramp), but I wanted to keep my purple.


I have yet to brighten those dark shades. I think my next project needs to be Sunny Sunflower's journey to the Sun

[Arne]

Sweet mockups!

Hmm yeah, a purple tint could be interesting (to provide some better hue coverage). How about 90,85,180 for the dark blue? Should it be lighter maybe? Less saturated or more?



I noticed the little nudge helm did on the dark cyan-grey. If darker, it works better for subtle BG 'highlights', while also ramping better with the dark blue. However, I think it also shouldn't wander too far away from the grey, so I'm kinda split on that issue.

However, I did pull the grey down a bit in value, but mainly to make it less similar in value to the light sky, and bring it a bit closer to the dark cyan to improve the grey ramp overall.

[Feron]

i'm not feeling that purple water im afraid.  whilst a purple hue would be nice, how many things in nature are actually purple; obergines, rare plants, grapes?

[Helm]

how many things in nature are actually purple; obergines, rare plants, grapes?

A morose and languid feeling of dispondency.

[Arne]

Actually, I'm not a huge fan of purple either. I'd probably go the other way on that dark blue, namely: 0,100,140 - a whimpy blue-green-grey. (probably too whimpy for sprite stuff.)

[Conceit]

strange, both helm and feron have purple in their avatars.

what's going on people it's PURPLE we're talking about here!  I feel it is the dark green tone the one that isnt that useful...

[ptoing]

strange, both helm and feron have purple in their avatars.

Durr, smart boy, Helms is originally made from the CGA palette 1 which has that icky purple and he just changed the grey to yellow.
And Ferons has purple I believe because purple works quite well to create an otherworldly atmosphere.

And I think that dark green is ace.

[Helm]

THE SECRET PURPLE

[Cow]

For what it's worth, I think the greens are awesome. Maybe you could merge the two middle tones on the yellows ramp to make room for a purple? ...or am I missing something?

Great palette so far, very fun to work with.

[Feron]

A morose and languid feeling of dispondency.

For a non-native english speaker, your vocabularly astounds me.  I'm going to show my ignorance and ask what those words mean, not even google could help me!

strange, both helm and feron have purple in their avatars.

Indeed, we do.  However neither mine nor helm's avatars are game-mockups or sprites, which i believe this pallette is primarily for?

Maybe you could merge the two middle tones on the yellows ramp to make room for a purple?

Whilst looking at them side by side, the do seem a little similar, however i think merging them would definitely set this back a stage.  the darker is used as a buffer, as going from orange/yellow to brown would be a very harsh transition.  For some reason i find blues can go from dark colors to light without a buffer and pull it off, but it always seems a bit uglier with yellows.

[EyeCraft]

For a non-native english speaker, your vocabularly astounds me.  I'm going to show my ignorance and ask what those words mean, not even google could help me!

Try www.dictionary.com. It's one of my fav websites.

[Arne]

Typing dict equilibrist in the url bar in firefox will send you to some dictionary. I'm sure it's possible to customize these kind of features.

Here's a version with another blue (0,100,140). This mockup is an actual game I've coded and gotten into a working state twice (in early-mid nineties and then in 2001), so I might finish it this time around too. I kinda feature-creeped it now, but it should still be doable.



One idea with the Orange and Pink is that they should both work as shadows for the Skin tone Yellow (to alter the perception of it). However, are they too similar? Should they ramp with each other or be the same value but with differing hue&sat? Should the Orange be just a tad brighter to bring it further from the Brown?

[Cow]

Whilst looking at them side by side, the do seem a little similar, however i think merging them would definitely set this back a stage.  the darker is used as a buffer, as going from orange/yellow to brown would be a very harsh transition.  For some reason i find blues can go from dark colors to light without a buffer and pull it off, but it always seems a bit uglier with yellows.

Good point, yeah. (though on Arne's mockups the colors are rarely used in conjunction, and they look pretty rad I must say)

Should the Orange be just a tad brighter to bring it further from the Brown?

I think that would help. Could maybe use the orange to ease into the pink, then.

[robotacon]

Excellent thread.
It's interesting to see how different people reason about using different colors.

Based on what I've seen here, this is what I've come up with.



EDIT:
And this is what GraphicsGale did to your current test image Arne:



I stepped back from using the 100% white again because I think it's too bright and I picked up a skin tone that replaces the bright yellow.

[happymonster]

Since this thread is so useful, and very interesting, I thought I would post here rather than start a new topic.

I love the palette, but feel that it could do with a few tweaks. Here is one the versions of Arne's palettes (not sure which one now, I think v16, but with less purple in the dark blue):




My new version is below...

I think the red, blue, green and 2 dark grey/blue colours are excellent. As with what Feron said, I think the lightest blue is a little redundant. So, I've sacrificied that colour and added in a 3rd green. Although close to one of the dark blue/greys it does help take some of the greys out of the greens in the trees. Since green is so common and the colour range we are most sensitive to, I thought it was important to add a 3rd green. We still have the 2 dark colours to use and dither with the green as well. In fact we can dither the green with the dark blue to get a darker blue-green as well. The addition of a 3rd green adds a warmer colour to the mix to use as well.

I also added more contrast between the 2 medium brown/oranges as I felt they were a little too closer together.

Finally I have changed the dark grey brown into a dark purple brown. I think this helps adds a dark warm colour in contrast to the dark cold blue colours and also helps add a purplish colour to the palette. This helps remove some of the grey/blue with the images and can be used as a darker skin/flame colour (notice I've used it in the explosions). I think the addition of 2 dark but warm colours helps compliment things against the dark blue/greys and gives more options to the artist.

So, I ran the pics through promotions remap and then did some editing. I think the changes help add a little bit more dynamism to the colours. Here is the new image:

Arne's palette (HappyMonster variation #1)

[Arne]

Interesting. I'll take a look at the palette again, maybe bringing it up to V20:

My monitor was a little bright earlier, when I re-calibrated everything I had done looked a bit bright and grey, including the 16 color palette.

Earlier I could not see darker than 20/255. Now I can see 10 at least, and 5 very very barely if I look a long while in black BG fullscreen mode. I have a CRT.
http://www.wayofthepixel.net/pixelation/upload/features/05_arne/value.gif

Recalib comparison. I pulled down the darks, and consequently increasing their saturation a notch. Hard to see at first, but look at the saturation in the red for example.


I think this is with the new calib.
http://www.wayofthepixel.net/pixelation/upload/features/05_arne/jsw_touchup.gif

The old calibration palette has too bright BG colors I think. I wanted those to be non-interfering. They looked dark with my old calibration, but now I think they're too bright. It's a bit of a personal preference perhaps. I like black backgrounds in games, and it's nice to be able to detail it to bring atmosphere into the game (without destroying the readability which black BGs do so well).


re: the bright blue... I could just pull it down a bit... Sky gradients could be useful, and it's nice to have the option for a bright version of the sky. Wasn't SMB 1 pretty bright?


Edit:
I don't have much time to work on this now, so here's v20 without much changes, I just applied my most recent calibration curve to it (slightly lighter than the curve above). Didn't touch the light blue. I think it's maybe too far from the blue, but it should also work to ramp between the mid grey and white perhaps? I think I didn't use max saturation for the light blue since I wanted it to be a viable sky color, and not a plasma-neon color. Also, a less saturated variant of it ramps better with the mid grey.

[happymonster]

The dark greys look ok to me, but I have a LCD monitor which has more difficulty with colours than a CRT. 
It's a pity pink is used so rarely (but importantly), it could let us fit in a more used colour..

EDIT: With regard to the red, I like the blueness aspect of the original, it makes it more interesting to me than normal reds.

Please don't feel you have to change anything in your palette if you don't want to.. it was mainly for my personal curiosity and use.

[Rosse]

Ptoing's pic of all possible c64 50% dither shades inspired me to make these (Arne's Palette V20):





The smaller version is reduced with photoshop (50% size, bilinear) and greyed out in promotion (since photoshop uses other formula to grey out colors). Maybe it's useful for somebody.

[happymonster]

Rosse: That's handy! Is there a way to group the final dither by HSL as well?

Arne: With the light blue/grey that's 5 blue greys in total, when there are only 2 greens and 2 red/pinks. I'd just prefer to have it a bit more balanced, but I suppose everyone will have their say on the logic behind their own colour choices though! 

[happymonster]

Ok. After another test I think it's safe to remove the pink and use the bright orange instead. For small sprites it's very similar. Ironically enough, those two dark grey-blues get in the way a bit if I try to add a darker blue, and the purple/brown does the same if I try to add a darker red. I don't think we need any more grey's, greens or oranges, and I'm not sure if a darker blue is needed. Because of that, and the tendency for the colours to shift in saturation and hue as they darken I thought it best to add a mid-range violet-indigo colour which can be used on it's own, with the dark blue or the grey-blue's or purple-brown. This could be used for sea, sky and other more moody lighting and dark pieces. Since the palette was missing purples and violets previously, I think this helps fill out the colour range a bit more now.

(HappyMonster v2)