I'm finding a few things really confusing about this:
1. The "problem checker"? So if a color is highlighted by this, is that bad? Because it highlights an awfully large number of colors, it's very difficult to make any kind of comprehensive palette that doesn't have 75%+ of colors highlighted?
2. How does one "fix" the problem colors? The "docs" under the tool just say "oh no"... so there's no way to fix them and you're just screwed?
3. Why does it show one color, but then when it's exported it exports a different color? And the ball on the right's color doesn't really match the color in the palette either? Does this have something to do with the "muting to fit sRGB space? That kind of makes sense, but why can't I see the *actual palette that will be exported*? What's the point of looking at the colors *before* they are muted if that's not what they'll be exported as? It makes it super difficult to make any palette since most of the colors don't actually show what they'll be exported as?
I'm a beginner as far as picking colors (or even doing art in general) goes, so I'm probably just not understanding something.
Here's a screenshot to explain the biggest confusion. The color in the palette shown on the left does not match the color that will be exported (the value on the right).
Also, maybe I'm just stupid, but isn't #FFD600 a valid sRGB color? Why is it a "problem" color that needs to be muted to "fit"?
Just to illustrate how different these 2 particular colors are, here's a comparison:
So the color on the left in this screenshot is the color that is displayed in the palette editor, and then when it's exported for use in Aseprite, the color on the right is what comes out... it's pretty different?
You’re mixing up RGB space with sRGB gamut. Let me explain: a gamut is what a device (a screen, a printer) can display, and it varies a lot. And most screens that are just a couple years old cannot display all RGB colors — and compensate it with reduced saturation, lightness, or by shifting tint. You can open an image of an HSL circle/square and you will notice bands and strange luminous lines appearing on different screens at different places, if your eye is keen enough. (HSL is based on RGB color space, so the representation is valid.)
sRGB is a standardized gamut that is used as a baseline for most digital design. By using sRGB only, you make sure the colors will look the same on each device (relatively to each other, as average tint and lightness of each display will still vary). To make an image fit into an sRGB gamut, you will need to desaturate some colors and/or tweak their luminosity — and highlighted “problematic” colors are those that need such a tweak. My app decreases saturation to preserve luminosity and hue; other apps will change other properties to preserve another ones. Just one method of many.
Why Aseprite and PNG display colors not like the ones in the app? Because they can’t. And if the colors are not reduced to sRGB on export, they will look wrong in many other cases in a, let’s say, in an opposite direction.
Now, RGB space itself also cannot display all the possible colors that humans can see, is linear when human vision is not, and is just awful when interpolating colors — which is a staple in palette making and color gradients. Thus new color models were invented. The real goat nowadays is okaylch, which is the improvement of lch (luma-chroma-hue). My app uses lch, which is still perception-correct but a bit harder to use. Not the real problem for end users.
Most apps and formats still support RGB space only, though, which includes PNG image format (and many others!) and Aseprite. The real colors my app operates in are in lch format, not hex format with the leading #. lch works on the web, and in some image-editing apps. “Linear RGB” codes in the right column of the app were also invented to be used in 3D engines and rendering software, but it is still linear, though it can display brighter colors than RGB white, as well as brighter reds, pinks, blues, etc., which are a must have in emission/reflection display. These are supported in Unreal Engine for sure and probably in other 3D-related thingies, too. p3 is an Apple-invented older take on the problem and support for it can be found in Apple-made products and some other 3rd-party apps.
I really would like all this to be simpler, but color, behind the scenes, is not simple at all. There will also always be a gap between printing software and designs for digital displays, buuuuuut it’s another whole separate topic.
Wow, thanks for the super detailed reply. I never knew color was such a complicated beast!
These concepts seem to be largely unknown to most pixel art artists... I had been researching palette design a bit, but hadn't run into anything even close to this level of detail.
It still seems like it could be helpful if it were possible to toggle the display in this app to see all the colors as they will be exported, as sometimes the exported color isn't quite as I expected... But overall this palette generator is an absolute lifesaver for someone like me that was really struggling to figure out how to select colors for a good palette.
Thanks again for taking the time to explain things... And for this incredible generator 😃
I'd love to have a grid where I can set a custom colour in each cell. I can't use regular palette creators after using this one, but I really like the grid based approach as well.
would be especially nice if there was a checkbox or something, to make it work in sRGB space, also, since the clamping for non-hdr displays is obviously not that great (and there's a lot of displays which CAN'T do that wide color space, so would be nice to not have to manually edit the colors afterwards)
the blues are always the hardest part to get right in sRGB, and with this, it's easy to make fun palettes, but I'll end up with like, basically all aqua and/or blue in the "danger zone" lol, having VERY similar colors with some neighbor colors/hues
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.
Hello, 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.
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?
Option 1: Install plugin to your Browser that let you download web applications. Option 2: Install itch app itch.io/app and use it like steam. It creates replicas of web apps and have sandbox option, for protection.
← Return to palette generator
Comments
Log in with itch.io to leave a comment.
I'm finding a few things really confusing about this:
1. The "problem checker"? So if a color is highlighted by this, is that bad? Because it highlights an awfully large number of colors, it's very difficult to make any kind of comprehensive palette that doesn't have 75%+ of colors highlighted?
2. How does one "fix" the problem colors? The "docs" under the tool just say "oh no"... so there's no way to fix them and you're just screwed?
3. Why does it show one color, but then when it's exported it exports a different color? And the ball on the right's color doesn't really match the color in the palette either? Does this have something to do with the "muting to fit sRGB space? That kind of makes sense, but why can't I see the *actual palette that will be exported*? What's the point of looking at the colors *before* they are muted if that's not what they'll be exported as? It makes it super difficult to make any palette since most of the colors don't actually show what they'll be exported as?
I'm a beginner as far as picking colors (or even doing art in general) goes, so I'm probably just not understanding something.
Here's a screenshot to explain the biggest confusion. The color in the palette shown on the left does not match the color that will be exported (the value on the right).
Also, maybe I'm just stupid, but isn't #FFD600 a valid sRGB color? Why is it a "problem" color that needs to be muted to "fit"?
Just to illustrate how different these 2 particular colors are, here's a comparison:
So the color on the left in this screenshot is the color that is displayed in the palette editor, and then when it's exported for use in Aseprite, the color on the right is what comes out... it's pretty different?
You’re mixing up RGB space with sRGB gamut. Let me explain: a gamut is what a device (a screen, a printer) can display, and it varies a lot. And most screens that are just a couple years old cannot display all RGB colors — and compensate it with reduced saturation, lightness, or by shifting tint. You can open an image of an HSL circle/square and you will notice bands and strange luminous lines appearing on different screens at different places, if your eye is keen enough. (HSL is based on RGB color space, so the representation is valid.)
sRGB is a standardized gamut that is used as a baseline for most digital design. By using sRGB only, you make sure the colors will look the same on each device (relatively to each other, as average tint and lightness of each display will still vary). To make an image fit into an sRGB gamut, you will need to desaturate some colors and/or tweak their luminosity — and highlighted “problematic” colors are those that need such a tweak. My app decreases saturation to preserve luminosity and hue; other apps will change other properties to preserve another ones. Just one method of many.
Why Aseprite and PNG display colors not like the ones in the app? Because they can’t. And if the colors are not reduced to sRGB on export, they will look wrong in many other cases in a, let’s say, in an opposite direction.
Now, RGB space itself also cannot display all the possible colors that humans can see, is linear when human vision is not, and is just awful when interpolating colors — which is a staple in palette making and color gradients. Thus new color models were invented. The real goat nowadays is okaylch, which is the improvement of lch (luma-chroma-hue). My app uses lch, which is still perception-correct but a bit harder to use. Not the real problem for end users.
Most apps and formats still support RGB space only, though, which includes PNG image format (and many others!) and Aseprite. The real colors my app operates in are in lch format, not hex format with the leading
#. lch works on the web, and in some image-editing apps. “Linear RGB” codes in the right column of the app were also invented to be used in 3D engines and rendering software, but it is still linear, though it can display brighter colors than RGB white, as well as brighter reds, pinks, blues, etc., which are a must have in emission/reflection display. These are supported in Unreal Engine for sure and probably in other 3D-related thingies, too. p3 is an Apple-invented older take on the problem and support for it can be found in Apple-made products and some other 3rd-party apps.I really would like all this to be simpler, but color, behind the scenes, is not simple at all. There will also always be a gap between printing software and designs for digital displays, buuuuuut it’s another whole separate topic.
What do all this mean to you, anyways? Try not to use oversaturated palettes — they don’t work as you think and are tiring to eyes anyways.
Wow, thanks for the super detailed reply. I never knew color was such a complicated beast!
These concepts seem to be largely unknown to most pixel art artists... I had been researching palette design a bit, but hadn't run into anything even close to this level of detail.
It still seems like it could be helpful if it were possible to toggle the display in this app to see all the colors as they will be exported, as sometimes the exported color isn't quite as I expected... But overall this palette generator is an absolute lifesaver for someone like me that was really struggling to figure out how to select colors for a good palette.
Thanks again for taking the time to explain things... And for this incredible generator 😃
Hello, I liked the idea of the program, but I want a Linux version AppImage
You’re free to make it
Thank you very much.
I'd love to have a grid where I can set a custom colour in each cell. I can't use regular palette creators after using this one, but I really like the grid based approach as well.
You will probably need to make a base palette here, then download it as a big PNG image, then tweak it in your image editor of choice ¯\_(ツ)_/¯
"What if I were to teach you some miracles... Would that please you?"
would be especially nice if there was a checkbox or something, to make it work in sRGB space, also, since the clamping for non-hdr displays is obviously not that great (and there's a lot of displays which CAN'T do that wide color space, so would be nice to not have to manually edit the colors afterwards)
but other than that, pretty awesome
the blues are always the hardest part to get right in sRGB, and with this, it's easy to make fun palettes, but I'll end up with like, basically all aqua and/or blue in the "danger zone" lol, having VERY similar colors with some neighbor colors/hues
If you copy regular hex colors, you get colors tuned for sRGB space.
So good. Thanks <3
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
Hello,
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
Update:
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 ??
Option 1: Install plugin to your Browser that let you download web applications.
Option 2: Install itch app itch.io/app and use it like steam. It creates replicas of web apps and have sandbox option, for protection.
Also, for this, when using itch.io/app , run from index.html file for stability.
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.