CoMiGo's Palette Generator
Another color scheme generator? HuUuH?!
Nope, it ain't your regular triad/complimentary color generator, it is a palette generator, and it is backed up by science™️. Actually, there is so much science that you should really try hard to fully comprehend it. Even I haven't fully done it. But, here is the thing:
- This generator creates a grid of colors, allowing you to make a full palette for your art pieces. For a pixel-art animation, for a still image, for a game. It also aims for stylized color sets.
- The coloring algorithms here differ from regular color wheels and number crunching. Instead of using direct arithmetic formulas, it works based on how humans see.
- For example, almost every color scheme generator with a complementary color scheme will return bright yellow for dark blue, when they are so different! This generator will make sure the colors are of the same perceivable lightness — a complementary color for a yellow is sky blue.
- The generator also works for HDR graphics and is not bound by sRGB.
And all that for free, for commercial and whatever projects, with no strings attached. 😱👏
So what about the science™️?
In short, it uses the LCH color model with the aid of Lab for mixing tints and shadows. LCH is Luma-Chroma-Hue, and it works on perceived lightness, perceived saturation, and regular hue. (Kinda regular.) This is different from RGB (red, green, blue) and HSL/HSV models (hue, saturation, lightness/value) in its math, and thus is more smooth, more uniform, and predictive.
I use the Lab/LCH tools from W3C and a good amount of code from the LCH color picker made by Lea Verou and Chris Lilley. Lea Verou also has a good article on LCH and why it is needed on the web.
Usually, your colors are bounded by sRGB space — the one that all the browsers are currently using everywhere, and the one that is commonly used in tools like Photoshop and Aseprite/Libresprite. But our monitors — well, at least the modern ones — can produce a much wider spectrum of colors (btw it is called "gamut"). This also is often loosely named HDR. LCH does operate on HDR colors.
BUT if your monitor, or your software, your game engine don't support linear RGB (or p3 colors, or LCH model) directly, YOU'RE SCREWED, your palette will probably be shown as a toned down mess. Can you imagine? Even game engines limit what colors you can use!
Thankfully, the palette generator can highlight those problematic colors that overflow the sRGB gamut. You can even notice them by yourself...
And if we turn the problem checker on:
Thankfully, the generator tries its best to make balanced palettes that fit in sRGB by tuning saturation. At least that's what it said to me, but I trust my creations.
You can click the color to pick its p3, HCL and linear RGB variants for engines that do support such colors, as well as other formats. I personally know that Unreal Engine does support linear RGB.
A note on accessibility 🔍
The generator keeps luminosity equally distributed, and people with color perception problems will have a really hard time distinguishing the colors. Can you easily differ the colors in this desaturated palette? Me neither. And people with Monochromacy live in such world.
In games, make sure that you provide additional stuff that allows to differ gameplay elements of a different hue. For example, don't create a new enemy just by changing its hue and tweaking stats. Add horns or something, come on.
(btw this applies to any games and any palette, not just generated here)
Do you like the tool? I have MORE 🤣
Check out my other tools:
- Ct.js, a game engine with its beautiful IDE, which is easy to use yet powerful.
- Cosmic Everyday, a personal digital organizer.
- JSONBabel, a simple, online solution for translating games and software, for developers and their users.
I also make games 👀
Want to give more than just "thanks"?
Rumors say that donations heal developers' depression, existential crisis, and acne 🤫
Or don't. I'm not your mother.
Click download now to get access to the following files:
Log in with itch.io to leave a comment.
I love this :D thx!
This is very cool! I think it would be great if there was like, an example pixel art scene or something that you could apply the palette to on the fly. As someone who's not great with color, it's hard for me to imagine a palette in use when I'm just looking at the ball graphic.
Its much more feature rich than other color palette generators. Exquisite
1. Do you think it is pertinent to allow different Tint Power for Hightlight and Shadows ?
2. I think it would be easy to be also able to input directly some values for each slider in order to keep track of changes without to have to export the json files when one is just testing/tweaking parameters to try their effects on the palette.
Anyway, your tool helps me A LOT. I suck so much at color theory, it ease so much the process, now.
That's an awesome tool, thank you so much ! I use it to create the color palette for my next game :-D
If you don't mind I have a few suggestions to improve it even more :
- It would be nice to be able to pick precise values directly in the generator (instead of exporting, modifying the text and importing back to do so)
- An option to simply export the palette as an image (png ?) would be really handy to compare palettes quickly and that kind of things
Also I could use your help : I'm having a hard time creating a master palette that works fine with both things that have a vibrant color (like a banana or special effects) and duller things. Do you have any advice ?
Precise values: I’m not sure what you mean. You can pick values at any time by clicking a swatch in the middle panel and copying codes in the right column.
Export as an image: Ok, and for now you can take a screenshot :D
Master palette: increase the number of tones (left column, almost at the bottom).
Hello and thanks for your quick reply !
- I meant precise values for the settings such as base lightness, chroma, etc... not the generated colors :-)
- Yep that's what I do, I'm just a bit lazy and it's already a few screenshots per palette on smaller screens (I usually work on iPad) The quicker for me would be to have png files where each color is only 1 pixel, to import them in documents and compare them :-p
- Thank you so much ! I completely forgot about this one ^^'
Keep up the good work ! When my situation is more stable I'll be glad to support you with a donation :-D
- Specify a hue range for analogous color schemes. See the Green Hell example.
- Set a lightness curve to get more dark/light/low-contrast colors in your palette. Helps with color transitions in darker/lighter areas of your designs. See Aseprite++, Green Hell, Neon Throne, Fusions examples.
- Controls are reordered/regrouped/renamed a bit.
I'd love to play with this but I keep getting an error:
Error! ReferenceError: LCH_to_Lab is not defined
No colors will show up when I click anything.
It works for me. Could you try it again? Or maybe try a different browser?
Hi vicvegas, the error you receive is due to a script being disabled or altered that is required for the applet/application to run in your web browser via this webpage. If you would like more details, please feel free to share more information here & when I get to it I can help you out further, otherwise I hope this helps. -KC
This is really cool to tinker with! By chance do you have any plans to implement a 'randomize' option for generation, for people who can't come up with an idea and want something to inspire them?
Possibly get an offline version ??
Powered by science™️
I'm colorblind, and I love you.
Oh my :D Thank you for your support <3 If you have any suggestions, comments are a good place to post them!
wow this is an amazing tool, keep up the great work.