Color ramp generator for Dawnbringer 32 palette

[Lendrick]

Last night, I coded up a little javascript program to generate color ramps for use with the Dawnbringer 32 palette, which you can find here:

http://static.opengameart.org/gradientifier

The instructions are at the top of the page.  They aren't great, so it's best to play around with the colors and sliders and watch how the gradient changes.  Here are some links to some sample lighting conditions:

* Green grass on a sunny day
* The same color on an overcast day
* The same color by moonlight
* The same color under a bright fluorescent light

I also made a sample image, just to give people a quick idea of what this tool is capable of.  The tiles used in the sample image were originally designed by Surt.

[astraldata]

Is there any chance of an offline version of this? Or at least a version that works on a local hard drive?

This is a really useful tool -- I especially like the rainbow tinting ability (I just can't figure out how to select/change other single colors on the rainbow ramp individually).

[Lendrick]

You can download it here:

http://static.opengameart.org/gradientifier.zip

Please note that I can make no guarantee of it working locally.  Browsers have security stuff that sometimes prevents loading of local files onto a canvas.  I don't have any intention of supporting making it work locally, although if someone can write a fix, I'll include it in the download.

As for adjusting the rainbow colors individually, you can't do that yet, although I plan to add that feature.

[astraldata]

Nice! Thanks dude! It seems to work fine locally in Firefox for me.

If you update that rainbow version to work with manipulating multiple colors, I would appreciate it if you PM me a zip like this or something because I'd like to use that one locally even more.

It seems like the rainbow thing'd be even more useful to me since the one thing I find tedious in game pixel art is coming up with one general unifying palette to use for everything in a game. Something like this would be awesome for that! At most, I'd just have to do minor tweaks to just a few colors (instead of most or all colors) to get them to exactly where I wanted. That would me save a ton of work dude.

Thanks again for creating this! I can't wait to see the progress you make on the rainbow side!

[Lendrick]

Glad to hear it works locally.

FYI (if you haven't figured this out already) you can modify rainbow_hex and palette_hex at the top of the file to change the rainbow colors sand the palette.  Ideally I'd also like to add support for other palettes too (it should be fairly trivial), but I'm not sure how well it will work with palettes that have less than 32 colors.  With a 16 color palette, every ramp would have to use basically a third of the entire palette, which doesn't leave much room for variety.

Anyway, I'll let you know once I get the rainbow editing part working.  I might poke at it tonight if I have the chance.

[Lendrick]

Just an update so everyone can see this:  I added the features that astraldata was asking for.  They're available both on the rainbow page and in the updated download.

[astraldata]

Awesome man! Thanks a lot! Unfortunately though, I think I found a bug... For some reason you can't select the first color, though all the rest appear to be selectable...

Aside from that, I have a slightly more complex, though definitely more useful feature request -- could you let the user change the reflectivity/highlightmultiplier/darken, etc. of JUST the currently-selected color OR all the rainbow colors at once? It'd just require a few more sliders, but it'd make it a LOT easier to control an entire palette as well as individual ramps simultaneously (so you can look and see how they play together side by side as you create 'em).

Also, is there any way to adjust the contrast between the colors on the ramp? If not, I would suggest slider(s) for that as well for those of us who want a little more manual control (both for an individual color, OR the entire rainbow). If you needed to, maybe a toggle switch could work to lock the contrast for the selected color (and use that base contrast to generate that color's ramp using all your other sliders.) This would be ideal when you need some gradients to be 'soft' and others to 'pop'. You could generate a 'hard' OR 'soft' contrast ramp with the Add/remove color command -- but a "duplicate current color" command would be helpful there in the case that you had to have both a soft and a hard version of a color ramp in your palette.

Color selection is a hard thing to come by any good tools for. Even without my new suggestions, this is already shaping up to be an amazing tool for pixel art! If anyone hasn't tried playing around with this yet, they really should. It can almost create any kind of palette they wish. With my new suggestions, it really would be able to! I definitely want to know about any future updates on this! Thanks again for making this dude!

[Lendrick]

Awesome man! Thanks a lot! Unfortunately though, I think I found a bug... For some reason you can't select the first color, though all the rest appear to be selectable...

That's actually by design.  The first color is always the tint color, for reference.  If you aren't tinting the whole rainbow, you can just set that color by setting the tint.

Aside from that, I have a slightly more complex, though definitely more useful feature request -- could you let the user change the reflectivity/highlightmultiplier/darken, etc. of JUST the currently-selected color OR all the rainbow colors at once? It'd just require a few more sliders, but it'd make it a LOT easier to control an entire palette as well as individual ramps simultaneously (so you can look and see how they play together side by side as you create 'em).

I like that idea.  I'll see if I can do it.

Also, is there any way to adjust the contrast between the colors on the ramp? If not, I would suggest slider(s) for that as well for those of us who want a little more manual control (both for an individual color, OR the entire rainbow). If you needed to, maybe a toggle switch could work to lock the contrast for the selected color (and use that base contrast to generate that color's ramp using all your other sliders.) This would be ideal when you need some gradients to be 'soft' and others to 'pop'. You could generate a 'hard' OR 'soft' contrast ramp with the Add/remove color command -- but a "duplicate current color" command would be helpful there in the case that you had to have both a soft and a hard version of a color ramp in your palette.

That never actually occurred to me, but it makes a lot of sense.  Right now, all of the gradients always have a color that's as bright as the highlight and as dark as the shadow.  I'll look into adding some kind of contrast slider, both for the whole thing and for individual colors.

Color selection is a hard thing to come by any good tools for. Even without my new suggestions, this is already shaping up to be an amazing tool for pixel art! If anyone hasn't tried playing around with this yet, they really should. It can almost create any kind of palette they wish. With my new suggestions, it really would be able to! I definitely want to know about any future updates on this! Thanks again for making this dude!

I'm really glad you like it.  In all honesty, I kind of built it on a lark and I didn't expect it to work all that well, so I'm as surprised as anyone that the results are so usable, at least with a 32 color palette (I doubt it would work as well with a 16 color palette, or one that's not as designed as well as DB32).  I'm not actually good at color ramps, despite having a rough understanding of how lighting works, so I thought it would be nice to have a program to generate them for me.

[Lendrick]

Greets!

Just a heads up, I added what you asked for.  Additionally, I added a Brightness slider (it made sense to add it since I added a contrast slider too).

Just to clear up any potential confusion about the difference between the brightness and illumination sliders:

When you adjust the illumination slider, the brightest and darkest color will always remain the same, and the colors in the middle will get darker and lighter.  A ramp with minimum illumination will be dark, but with a very bright highlight, as if it's backlit by a bright light.

A ramp with minimum brightness will just be very dark.

FYI, I've removed the original zip file and put the code up on Github.  Here's the new download link:

https://github.com/lendrick/Gradientifier/archive/master.zip

Note that the download link is now on the page itself, as well.

[DARK-SPIRIT]

Great, Thank you.