Color wheel generator tool

Community Showcases
1

Here is a free color wheel generator tool I made. The whole display updates in realtime as you make adjustments or move the mouse, so that you can experiment with finding palettes you like quickly and easily.

ColorWheel.app.zip is for Mac OSX (I am on Yosemite, should work on some earlier versions).
ColorWheel-Windows.zip is for Windows (compiled on Windows 7, should work on XP etc).

Controls are via keyboard as listed on the screen. You can adjust how many steps of luminance and hue. You can also shift the luminance and hue. You can adjust saturation (one global level). You can also skew the hue so that as luminance increases, the hue shifts. You can grab a screenshot png to file (in same folder as app), and output a palette texture and Gimp palette file.

Bottom left shows opposite colors. Bottom right shows analogous + opposite, i.e. the hue you’re on (mouse hover), the hue to the left and right, and the opposite (which is much the same as a triad if you ignore the second column). Note you should put the mouse on the outside ring for correct display of these if you have hue skew active otherwise inner rings will show different gradients.

Mouse hover on a color shows RGB and HSL in the top right.

One exception on the controls is you can shift the hue and the angle offset at the same time (u + a). Otherwise the grid shifts hue within one step.

Use the LEFT SHIFT for adjusting in the opposite direction (e.g. less saturation). Use RIGHT SHIFT to reset a given parameter to its default. Otherwise (D) resets everything to a default setup.

You can contrast the colors against each other (default) or surrounded with a white border (B), black border, or gray border, which does change how the colors appear relative to each other. You can also invert everything.

You can also limit the color resolution if you are interested in retro/pixel art, e.g. 4 bits per color channel gives 12-bit color resolution like on the early Amiga computers. You can use 1…8 bits per channel.

I’m using this to set up a basic palette for my game and I wanted to be able to tweak the color wheel and let the computer calculate the changes en-masse while maintaining exact amounts of saturation and equidistant luminance/hue changes. I am mainly focussing on 2D pixel art but I guess you could use it for anything.

Requires OpenGL and opens a 1280x720 window (can adjust). This is not a unity app, its a real desktop app (in BlitzMax). The example image below is the starting state which I tweaked to a sort of pleasant-looking configuration.

2230826--149619--ColorWheel.png
2230826--149619--ColorWheel.png1280×720 33.6 KB

2230826–150731–ColorWheel-Windows.zip (659 KB)
2230826–150761–ColorWheel.app.zip (766 KB)

5 Likes
2

A different example (from older version)

2230850--148636--ColorWheel.png
2230850--148636--ColorWheel.png1280×1280 25.1 KB

1 Like
3

I noticed that if you skew the hue forwards, so that as brightness increases the hue shifts, it gives the impression that the colors become more saturated. And when skewing in reverse, it gives the impression of some desaturation. So with a positive skew you can make it seem like the color is becoming even more vibrant.

4

Using this tool I output the following palette texture. It comprises 32 unique hues, each with 9 luminance levels. It is aimed at pixel art. Then, each of these sets of colors is followed by an analogous color (2 hues away), then the opposite of both of those hues. This is then followed by the first hue but with 10% saturation, and the second hue with 10% saturation, producing a set of dark tinted grays and light tinted grays). This just happens to be what I am going to use for my game - avoiding the mid grays.

So overall, each row has 4 sets of 9 colors that go pretty well together, and then two sets of unsaturated colors that correspond to the main hues. Also the hues skew as the luminance increases.

Then, for purposes of a technical nature in my game, I wanted to make sure this palette includes ALL unique values only. So an algorithm runs to look for duplicate rgb colors, of which there normally in this case were about 5-10. Then the rgb values of those colors are bumped up by 1, first green then red then blue. These very slight tweaks are enough to eliminate all duplicates. Also this is needed because each of the hues (occurring basically 4 times) would otherwise duplicate 3 times, so I’m using the lowest 2 bits of each rgb color to very subtly make them all unique. You can’t really tell visually. So anyway, purpose being I have an algorithm that converts a texture using this palette into some other data, and it require all the colors to be unique.

I’ve updated the original post with the new version which lets you save the palette (and also implements inverted colors and a few other useful things). btw if you see a gray cell in the palette texture it means it was not unique and couldn’t be made unique (usually too many hues or luminance levels).

Here is the wonder-palette, if it’s useful to anyone… or you can just use the tool to output your own (press P).

2241024--149521--Palette.png

Each ROW is one palette set - it’s much easier to see the color when its not all bunched together, e.g…

2241024--149526--PaletteZoom2.png

And a zoomed-up version so you can see better - 1728 unique colors - all the same saturation level of 0.618 (sort of fibonacci/golden ratio inspired :wink: except for the last 2 grayish columns.

2241024--149522--PaletteZoom.png

Pretty colorful, but here’s the full saturation version (better not to use too much saturation, hard on the eyes)

2241024--149527--PaletteZoomSat.png

5

Thanks. :sunglasses:

Edit :
BlitzMax. hahaha.
Remenber you on the Blitz3D forum. :stuck_out_tongue: Tempus fugit. :frowning:

6

Uploaded new version, pressing P saves both a palette texture and a Gimp-format palette file. Holding left or right shift with P uniquifies the palette (tries to make all colors unique) and flags dupes with gray. The gimp file includes the number of columns, but in gimp when you import the palette you probably should set that first (as though importing from an image) then switch to importing from a palette file. Gimps import of a palette from an image is sorted in an awful unusable sequence, unfortunately, but the palette file preserves the order.

Yes - blitzmax app :wink: Blitz makes this stuff easy.

… a weird little … floating space vegetable with a door (!!!) … pixeled using one row from the above palette to test…

2241113--149535--PaletteTest.png

1 Like
7

Why 1024x1024?!. Can you add a full (or resizable) screen option?.

8

On my monitor I have it set to 1280 height. I figure lots of people have a big enough screen to handle 1024 height, but it is adjustable and scalable in the source code. I will look to add some kind of adjustment.

9

Thanks. Height is fine. I was thinking about width. :smile:

10

To fit the text in better without overlap?

11

Updated to include (F) fullscreen/windowed, and 4 preset resolutions (Z). Defaults to 1280x720, then goes bigger - 1440x900,1920x1080,2560x1440. Now has a widescreen ratio in general rather than square.

12

Yes. Exactly. :stuck_out_tongue:

Nice. Thanks. :sunglasses:

Edit :

Better. Thanks again.

13

New Windows version uploaded, fixed a bug that made it crash on Windows when trying to export the palette. Will upload fix for OSX tonight, although OSX version didn’t seem to complain at all - might relate to different floating point math on each platform or something.

Also forgot to mention the app uses double-precision floating point math throughout for maximum accuracy.

14

Uploaded mac version with the palette bug fix.

15

New version uploaded for windows (will upload OSX tonight) … when you export a palette (P) it now also exports a Photoshop swatches file (.aco). I did not try to do the swatch exchange format. You can now load or replace swatches in Photoshop with the Palette.aco file and your colors will magically appear ready for use.

[edit] Mac version uploaded now.

2255152--150734--Swatches.png