Is there a quick way to make a color palette texture?
grand marshal polycounter
Like this for example:
The only way I can see to make something like this is manually by making a lot of boxes and filling each one. There has to be a quicker way, right? There are some palette generators online but they only produce a handful at a time and seem geared towards home decor.
I'd like to be able to designate a number of swatches, like 256 for example, and then maybe some sort of input for general theme.
There is enough stuff online that can be used but how did people make these in the first place? I could probably code one in unreal come to think of it, but i figure by 2024 there has to be some nice refined tool to do this sort of thing, right?
The only way I can see to make something like this is manually by making a lot of boxes and filling each one. There has to be a quicker way, right? There are some palette generators online but they only produce a handful at a time and seem geared towards home decor.
I'd like to be able to designate a number of swatches, like 256 for example, and then maybe some sort of input for general theme.
There is enough stuff online that can be used but how did people make these in the first place? I could probably code one in unreal come to think of it, but i figure by 2024 there has to be some nice refined tool to do this sort of thing, right?
Replies
easy way in affinity photo is to open the swatches panel, then in the options you can import a palette from an image, and you can set up to a 256 color palette. So you can composite a few images together that have the colors you desire.
Then just set the display size of the palette to large and screenshot the swatches, and can arrange into a new texture.
What do you mean exactly by *making* them ?
Making such a palette usually means ... well, building it, by filling the slots (regardless of their size : 1 pix or more) with the specific limited colors that one needs.
I don't quite see how extracting a palette from an image could help here, since it would result in way too many nearly redundant colors (unless one runs some kind of filter after the fact to simplify the result down to a handful of colors).
Could you explain more precisely what you are actually trying to do ?
If it was a palette of like 64 colors it is easy enough to just make it manually, but I want a few hundred colors, and also do want some subtle gradients, and also want to be able to iterate on the palette easily.
The solution I found above works out pretty well for me because I can just grab some images with a palette that I like and get X number of samples from it, add it to the texture and then check it out in game. So it's pretty fast and effective.
example:
A lot of the colors are redundant here, but I prefer to have plenty to choose from while experimenting, and then once I've completed most of the work, can cut out the stuff not being used. But as you can see with this character, having two colors that are close in hue/value are needed so that I can do subtle, fake lighting.
The way I am working right now is that each column of colors is a palette for a level, so each level has a 64 color palette. That's a minimum I start from and if I find that I really need more then I may adjust but thats the big idea.
I guess the confusing part is that if you are at a stage where you need a lot of colors without optimization yet, then you might aswell start from a *universal* palette, as opposed to something extracted from an image.
Or even, you could start from a big 2048 or 4096 texture where you can simply drop the source reference image(s). That way you can source, say, the gold of the headband directly from the reference illustration - and with plenty of room to spare to place little swatches to the side as the need arises. Working from a "real" palette early on could prevent all that.
And then later on you can then optimize into a very compact palette for the real, final asset. Anyways, there are plenty of ways to go at it for sure.
aseprite will create a palette from an image you load and then let you save it out to png or whatever. iirc photoshop can do this too. (example attached)
i imagine you could use that to filter out the final result as well
i thought about using images directly but the only thing is that then i have to scale a uv shell down to a single pixel, otherwise I think it can pick up multiple colors?
I know that I've seen you mention a workflow like this before, just wanted to explain what I am doing completely for the sake of clarification and posterity. Are you able to show any such "color palette" textures that you've used before? Just curious to see palette-to- final models and how much a legit artist can do with it since I'm kind of new to this style.
@poopipe thanks I will check that out
For final optimized assets there are a few different ways that I know of :
- Using a universal palette, like Joey Carlino does. I personally haven't tried this but this seems quite clever since he only needs/uses a single texture for all his characters apparently.
- There's also the hybrid approach consisting of having palettes *and* graphics directly in the same texture. Pretty much Dreamcast-era tech, as seen in Jet Set Radio, Space Channel5, and more recently Lethal League Blaze and BombRushCyberfunk. This allows lighting fast creation of characters since there is no need to cut in lips, eyes, and so on. If anything this could be used for the initial block-in, before cutting in all the details in geo to reduce everything to a palette.
- On my end I use two kinds of palettes for final optimized assets : swatches for clothes/gear with two to four values for each color to create light/shade easily ; and gradient strips for metals and skin, for finer value control.
Since texture data can be easily baked from one UV channel to another, all kinds of source textures can be used initially really : concept art illustrations, sloppy temporary palettes with roughly painted dabs of color, and so on. Basically anything that allows for the fastest iteration, *before* optimizing into proper palettes.
I am not saying that converting images to palettes wouldn't necessarily work btw - I just don't quite see how this saves time since things need to be "properly palettized" for the actual final assets later down the line anyways, requiring to move things around manually. But admittedly I haven't tried that one specific approach in practice, and I probably should/will
i just making it up as i go along. you are right, at this stage having an actual palette texture isn't needed, i just just figured it would be the simplest thing to start with. But there is a lot of good ideas I can look at in your post too, it's a good idea to have some gradients there in the texture as well, i hadn't considered that.
Some redundacy can be removed but if I can get color for entire game in one 2k texture I am not worried about, but of course you can tidy it up as you see fit.
To make this I just found an online color picker, zoom the UI in pretty large, shift the hue and take screenshots. Paste into Figma because figma can grid arrange items easily.
So as it stands right now, all materials derive from a common master material, and then branch into like 2-3 material instance chains, and it goes 2-3 deep. I'm not sure how many it makes, but probably less than a hundred unique material instances for the entire game. And it seems like this single gradient texture can supply all of the colors.
using a color vector and unique material instance for every color would save me one texture, but workflow becomes more onerous I think, because then I have to work between maya and unreal to build and iterate on the characters, whereas with the texture I can work entirely in maya and have 1 to 1 parity with unreal (since its flat colors and I have removed all color grading.) And then also, if I want multiple gradients to be used, and for it to be in object space, a shader to do that becomes more complex.
I am doing that with the environment pieces though because those tend to be more simple, and when i apply a gradient it's usually to an entire large piece, like an entire building. So it makes sense to do that in shader, whereas it would be difficult to do with a texture.
It is feasible to change to that for characters as all I would need to do is apply materials per UV shell, but I think because it complicates workflow I'd only do it if I really needed to. I am thinking that performance is going to be a breeze though since there is no lighting and it's a low-actor count game. Even when this game was prototyped using normal PBR textures at high resolution, performance didn't really become an issue. But I only target PC since it's out of my scope to go beyond that.
If anything one great side effect of this technique (as a whole) is that changing things down the line later if needed is really easy. I recently had to revamp some of my source textures in order to unify a bunch of assets (completely changing the location of some of the swatches/gradients hence also modifying the UVs of multiple assets at once), and it was really straightforward. Making variants of assets (or even completely new assets from kitbashing others) is also painless. This iteration speed alone makes this kind of gameart more artistically interesting than highend sculpting/baking IMHO.
The only suggestion I'd have would be to leave a bunch of room on this texture (perhaps freeing up half of it ?) in order to have space for some more unique swatches/gradients. Perhaps also adding a purely black and white gradient in there too.
good idea to leave some blank "working space" available.
bit of a waste of effort though imo
sounds like something to do if game was going to switch or mobile, but if that is the case, then I am rich and I hire somebody who already knows how to do such things, haha
its quite simple to implement, the effort is in setting the rules around what a material ID means.
It's no more complex than dealing with a single indexed color palette but we stopped doing that for a reason..
The color gradient which gives a gradient both with value and saturation is found if you google color picker:
note that it seems to be a google specific thing, if you search with bing or whatever this doesn't appear
the nice thing about this is that you can zoom your browser to make it as big as you need - I couldnt find another gradient like this that can be made large. THe good thing about this type of gradient is that you can scale UV shells horizontal for a saturation gradient or vertical for value, and diagonal for both (works kind of good for a fake metallic look)
Should i delete the links then?(u wud have to also since you quoted) pior's comment made me face palm, how could i forget that! i got used to the save for web gif version...
some of my important discoveries came from comments where somebody mentioned tool or workflow offhand