Color space

[Tourist]

After learning a bit of color theory, I was no longer satisfied with the existing color pickers.

I wanted a better representation of the color space to start from, like a set of paints that a painter might use.  It would be larger than a single palette, but more limited than the complete RGB space.  A large collection of colors that I could use to create a palette for any particular piece of pixel art.

I took some individual red, green, and blue components of about equal lightness.  Three blues, five reds, seven greens.  They're in the upper left of the picture.  The lower left has the combination of any two of the components, and the center has the combinations of any three.  The colors in the center have the same data sliced three different ways to better visualize the results. 



The idea is that starting from any particular color, one can create a ramp by moving along a constant direction (horizontal, vertical, up/down, and any of the diagonals).  Starting with a few different colors based on the idea for the pixel art piece, I could create ramps as needed and have a palette that works.

The area on the far right is a scratchpad I used to construct some sample ramps. 

The colors are non-linear in RGB space, which means that hue, lightness, and saturation are not independent. Shifting a color lighter, for example, also means shifting the hue in one direction or another. 

This is the fifth version of this I've put together and the first that I'm mostly satisfied with.  Any feedback is welcome.  Do you think this is a worthwhile exercise?  Is there some part of the spectrum that is missing?  A better choice for the red, green, blue, ramps?

Tourist

[tocky]

by chance, i've been doing stuff kind of like this all this week:

i'm developing a real habit for this stuff, i'm always trying to sort out new ways to pick colours.
i think this sort of skeletal display can be pretty useful for picking ramps with strong hue shifts:


keep posting this stuff if you're at it, it's interesting.

[Tourist]

tocky, I like the skeletal display that you use (*yoink*).  I don't really like the EGA palette, but I think your display is a good fit for EGA because of the strong saturation of those colors.

I took the color space I made in the first post and built a similar display to your skeletal view.   I also increased the image size to make it easier to see.



The plot in the lower half is hue (horizontal axis) and brightness/lightness on the vertical.  You can see that the non-linear steps in each of the RGB components pushes most ramps into curves across hue.

It also shows how even the dark cyans and yellows are brighter than most blues.

A few colors are right on top of each other, but I think that's because it's a two axis graph of a 3d space, so I 'm not too worried about most of those.

The lower plot looks to me like it hides some ramps.  An example would be the orange to blue ramp (lower right of the scratch pad area).  It just doesn't show up in the plot at all.

I'm not sure where to go from here.  I might make another version with fewer colors to see If I can optimize it, but I don't know if that's a worthwhile goal.  I'd like a large set of colors to then use to build smaller palettes with.  Maybe I can shift some colors around and see how the overall space changes.

Any other feedback or suggestions?

Tourist

[tocky]

to try to solve the 2d/3d thing i've been plotting only the colours with either full saturation, or full brightness on the main display. i'm not sure what to do with the rest of the colours, they represent sort of a darker/whiter version of a smaller colour space. I've got them plotted on a separate slice, currently. I think, possibly you could plot all the colours on a torus with the duller colours on the outside and the brights on the inside, but i'm also pretty sure I'd get more than one slice of grays if I went deeper, because the dull set grows at a rate two steps behind the full set:


for which, i guess maybe i'll have to upgrade to a hsb cube eventually. another way i want to try to do it in 2d is using a hex grid, representing rgb and cmy as different directions, but i think you get the same problem with dull colours. It is a shame that colour is not a 2d space, I think.

the blue-orange thing is difficult to sort out:

if you plot the whole slice you can see the relationship, but it'd still be pretty hard to pick those colours specifically using this display.
(i think i may have fudged the results a little, i plotted some of these colours myself because i wasn't sure where they were- maybe because there are duller colours plotted over the top of them, or maybe they aren't plotted, or maybe i couldn't spot them)

what the skeletal hsb display is good for, you should be able to plot a curve on it - a sine wave or a cubic curve or a parabola or something - which will correspond to nice colours, and then be able to shift the curve around to get different but similar results. the problem with this is that the distance between two cyans isn't ever going to be as clear as the similar distance between two purples, for example, so the further you go from your initial condition the weirder the results will be. Possibly this would fix and you'd get fewer low-contrast transitions if you used rby as primaries, but I haven't tested this.

there's a whole space of problems you get when you try to do diagonal lines on a 2d grid, and in a way pixelation is devoted to solving these problems. there's a joke to be made here about aa'ing or dithering your pallete, but maybe such a thing is possible.

the space you get if you use a differing number of channels for each or the rgb components is less regular than I've been getting used to:

[Tourist]

I don't think you can really plot a 3d space in a single 2d image.  Something is always covered up (projection) or disconnected (exploded view).  The hex view would show some connections better, but disconnect others.  I'm not sure if it would be any different than the 2d slices you already have.

I'm not too worried about moving on a diagonal in 3d RGB space since the steps I used are not uniform size to begin with.  There's not just a different number of steps on each axis, but also a varying scale on each axis.  There's math behind it, but there's also a lot of guesswork behind the math so I can't proclaim any definitive theories. 


I abandoned HSB because the Brightness from HSB doesn't take into account differences in hue.  According to the HSB scale, the following all have the same brightness:



I didn't find this to be a good enough measure of the visual impact.


The Lab color space Lightness takes hue into account.  The conversion can be a bit wonky, but it works pretty well.  I like it better than HSB Brightness.


But I prefer Hue over the ab axes from Lab, so ... I end up with Hue (HSB), Lightness (Lab), and I waffle between the two different defintions of Saturation (HSB vs HSV).  But in the end it's all RGB, so I started from there and used the other concepts to help scale the RGB space.

Here's the EGA colors using the same plot (H (HSB) vs L (Lab, approx)).  I think I accidentally cut off the pure black point (it would be at the very lowest left and down a bit).  It doesn't look much different than your HSB skeletal display, but I include it for completeness.



I'm chewing on the idea of changing how I mix the colors.  Or using a different scale of RGB for 2 color vs 3 color mixes.  Something to better separate the brightest colors   I don't know if this would goof up the existing ramps or not.  This will require some experimentation.

Tourist

[tocky]

I just finished plotting this map from before:

i like the skull motif.

I'm fond of hsb (or hsv, I don't really know the difference) for a couple reasons, partially because I like to think of brightness as analogous to saturation, where adding white to a colour increases its saturation and adding black to a colour decreases its brightness. Which is to say, I like it because it makes my charts line up nicely. There are other reasons but I probably shouldn't argue with people about which colour space is the most awesome, because each of them is the most awesome for whatever it is they're built for. I like it mostly because it's easy to get.

a thing i'm wondering, what colours do you get if you pick out an even distribution of dots (without clusters) on your H by L space? 

[Tourist]

What you describe sounds more like HSV than HSB, but I agree it's a tangent.  Wikipedia has a good page on the difference (http://en.wikipedia.org/wiki/HSL_and_HSV) if you're really interested.

I haven't created a plot (H vs L) with an even distribution, but I can guess what it would look like.  The hues would be evenly spaced horizontally, so that would look similar to your ega skeletal display.  Yellow and orange are bright colors, so the plot would have a few bright yellow and oranges, and a lot of mud browns.  Cyan is bright, so there would be few bright cyans and several muddy blue-greens.  Magenta is light, so it would be similar.  Green is medium light, so it would have a more even distribution.  Red is a mid strength color, so there would be a some pinks, some strong reds, and some dark reds.  Blue is dark, so the plot would have plenty of bright desaturated blues and a few darks.

I think having evenly spaced hues is the wrong way to go.  It's easy to do, but I think the palettes are more interesting if there is a less balanced starting place.   I'm not speaking from any great wealth of experience though, so take it with a grain of salt.  Evenly spaced lightness might be ok.

I think the next things I'm going to try are:
1)Making a few mockups with a palette from this set of colors (only using 20 colors or so)
2) Trying a different set of starting colors - either fewer colors or something that's not pure red, blue, green.
3) Look for some other good colors that aren't in this set to find flaws in the method
4) Take a shot at an even H vs L plot like you suggest. 

I probably won't have any results until at least the weekend.

Tourist

[Tourist]

After some experiments, I am going to abandon the color space in the original post.

Problems:
1) Not enough pinks and browns.  Detailed faces required interpolation between colors on the palette, and if I always need to do finer blending then it's easier to start with a smaller set of colors.

2) The colors mix differently at different saturation and lightness.  I originally pulled red 207 and blue 104 out of the starting RGB set because each of these when mixed with a single other color component the results weren't visually very different.  I ended up needed both of these components when using a mix of three components when trying to set up a smaller palette for specific images.

This tells me straightforward RGB mixing doesn't give the best results.

3) I need a better measure of how well colors will blend.  Here's an example:



The pink and gray-pink are one step away from each other in the original color set.  The middle row of gray-pink and yellow are two steps away, but they blend better together.  The third row is the gray-pink and yellow that are one step apart on the original set.

Taking the gray-pink as a reference, and comparing the middle row yellow to the upper row pink, the pink is
Closer in RGB space (red differs by 23 vs blue differs by 72)
Closer in hue (pink differs by 7, yellow by 31)
Closer or equal in saturation (HSL vs HSV defn)
Only a little further in brightness (8% brighter for pink vs 4% darker for yellow)

The numbers suggest that the pink should be closer than the yellow to the gray-pink, but visually it has a higher contrast.  This tells me the numbers are missing something, I'd like a better predictor of contrast that I can reverse engineer into a better defined color space.

Still to do:
2) Try a different set of starting colors, fewer colors or something that's not pure red, blue, green.
5) Figure out a better way to compare the colors with math

Feedback is always welcome.
Tourist