Hue shifting via color-wheel

[Indigo]

This is something I've been pondering about lately.  I'd like to hear your thoughts...



Line B depicts how most people tend to hue shift from one color to another - simply cycling through the colors one direction or the other untill they reach their destination.  -Tweaking the saturation afterward as they see fit.  This is really easy to fall into because of the nature of most color pickers - especially HSB sliders.

Line A depicts how I've been picking colors lately.  I envision it on a colorwheel with 0% saturation in the center - then draw a straight line from point A to B.  The shortest path between the two on a color wheel.  The result of the gradient is much more smooth, and less jarring using this method as opposed to Line B.  If you take your color picker and slide accross the gradient you'll notice the saturation bar (if you're using HSB) gradually slide down, then slide back up again dynamically - Something that you wouldn't normally think about when picking colors by hand on sliders without seeing a color wheel.

But curiously, Photoshop uses some other method which I don't understand.  It's gradient goes through a narrow band of yellow - thus a *longer* path between the two colors.  The result does seem more visually direct (though technically it isn't) - the yellow in the PS gradient is much less noticable than the blue in gradient A... but then again I think PS's shift between red and green appears much more sudden than in mine.  I have no idea what it's doing.  Any thoughts?

[Jad]

why it deviates towards yellow I cannot guess - but I think it might be trying to keep saturation? since the both target colors are very saturated I think that photoshop is programmed to try and keep a certain level of saturation - which in my mind makes sense, because there IS indeed contrast between saturation and no saturation - if you see it that way then going straight through cold gray creates more contrast between the colors. on that particular basis.

I think the PS one is smoother.

[Conzeit]

hm, I wonder what the PS line is like.

I think PS might have programmed in what the subtleties of colors are....Blue is a very heavy handed color and wil always stick out if you employ it, maybe it has something to do with using secondaries to transition between primaries

[Indigo]

I tried to map where the PS line would be.  The exact colors aren't on the wheel, but I found the closest colors by increasing the tolerance of my magic wand then painting.  The result is very interesting.  It appears that photoshop makes a straight dash for 0% saturation in this case before turning back to the green...



I doubt other gradients such as from blue to green would do the same - but why would this?  if it exceeds a certain distance, does it desaturate itself before shifting?

[Tourist]

I'm pretty sure PS is using an Lab or Luv color space instead of RGB when it calculates the gradients.  These color spaces have one axis that goes from red to green, and another that goes from blue to yellow.  The third goes from light to dark.

Both the red and green endpoints are slightly positive (yellow) in the yellow-blue axis, so a line that goes from one to another would be a bit yellow in the middle.  Wikipedia has a bunch of info if you want to see the math and whatnot.

Tourist

[blumunkee]

Yeah, looks like PS might be ninjaing the color model behind the scenes. You're also bound get some interesting results when you try mixing a subtractive color wheel with an additive color model.

When you mix the primary colors of the 'analogue' ROYGBV color model (RYB) together, you just get mud in the center. You need black and while to complete the value ranges. Most ROYGBV color wheels either omit the center, or add a value (typically black, but sometimes white) to the center, but such values are arbitrarily chosen. When you mix in the digital RGB model you get the normalization of the primary colors. The normalization is black, white, or some gray in between, depending on the brightness level.

Your color wheel is interesting because you coaxed the center into giving you something more useful than mud. The edges of the wheel use the ROYGBV mixing model, but the center uses the RGB normalization model.

The central values in your color wheel seem to be a small subset of the pastels. Too much pastel tends to make me want to wretch, but what you've got here is a nice mix of mostly bright happy colors at with a more subdued buffer between. Your buffers kind of just lay low until the ramp is complete, rather than bursting out into flaming unicorn rainbows.

It's interesting to note that while gradient A is more aesthetically pleasing, gradient B and PS both do a better job of maintaining the value throughout the ramp. Maybe your color wheel needs a darker center.

[Indigo]

Tourist:
I didn't think it may be using something like Lab.  I'll have to look into that.

Blumunkee:
it depends what medium you're dealing with, blu.  If you're dealing with light, it should be white in the center of the colors added - not mud.  But that effects the value.  theoretically a full-bright hue should have 50% value - so thats what I put in the center... though this isn't really true since hue's carry their own natural values with them.  Such as blue being naturally much darker than yellow to the eye at full brightness.

I'd disagree with you about Gradient B keeping the value better than A or PS for this very reason.  the values are changing quite a bit simply due to their natural value.  Gradient A and PS are both very similar in value though.

[Ai]

FYI, I made this edit showing movement through the LAB and LCH color spaces.

LAB interpolation is reasonably similar to your Gradient A
LCH interpolation (short path) probably looks like what you said photoshop does. I like this gradient best.
EDIT: actually, I can see that Photoshop must be doing an LAB interpolation.
hilarious that I missed seeing that illustration on the very image I was editing!

LCH interpolation (long path) looks more vivid in this case. This is typical of long-path interpolations through hue space. You might prefer such a gradient for a dramatic coloring like in comics, or in general for an important subject that needs to pop more.



I used GIMP's LCH color selector module to debug my LCH interpolation. This may be harder to do on Windows, though.
 

[tocky]

(how i made these plots)

i've got a processing script that spits out different rgb(or hsb) colourspaces.

this is a rgb colour space with five shades of red, 3 shades of green, 3 shades of blue.

the way processing spits it out, i've got it giving me five slices that show all the red/green mixes for each shade of blue.

everything else i've done here is not automated, it's just me rearranging the raw data in a paint program.

first, I reslice the data so that i get my red ramps horizontally instead of green ramps - red has the most shades in the sample, so it gets longer ramps, so I want to look at those.

I get each of this second row of slices by taking one column from each slice of the original set. the first slice is just the set of first columns from the previous set, the second slice is all the second columns, the third slice is the third columns.

I got the third row of slices the same way, this time taking rows from the second set. so now i have all the red/blue ramps for my three shades of green - and all the red/green ramps for my three shades of blue.

In making these, I realised you can collect samples from both of these sets of data into a single set - so I made these five by five squares. the first one combines the first slice from the  redgreens and the last slice from the redblues - essentially what this does is make L-shaped ramps - they carry around the edge of the colour cube, and so preserve saturation. in the first half of the ramp, green increases, and in the second half blue increases.
the second slice increases blue then green, but I produced it the same way - it combines the first slice of the redblues with the last of the redgreens.

for these other two 5 by 5 plots, i've taken the middle slices from the previous data and added the black-red ramp on top and the cyan-white ramp on the bottom. this produces ramps that take a z-shaped path through the colour cube - increasing blue then green then blue again. These are, I think,  the best approximations of an angled line straight through the cube, and so they desaturate in the middle.

(gets interesting again here)

Okay, so i've been working with the hypothesis that the 'best' path from red to cyan here would be something like red-greyred-grey-greycyan-cyan.

but these slices suggest that the best paths of that length are red-darkyellow-grey-brightazure-cyan
or
red-darkrose-grey-brightspringgreen-cyan

which i never would've picked.

none of the best paths that go through any of greyred, grey and greycyan pass through more than one of those colours.

[Ai]

Tocky: I think I misunderstood your experiments when I made this image. Nonetheless posting because it may be relevant.


Done by grabbing your 5*3*3 palette, calculating a straight LCH gradient, and
quantizing the result using GIMP (which uses LAB colorspace for quantization, so is usually very high quality WRT color matching.). Done with two different gradient lengths. Not 100% satisfied with the result, but IMO it's more harmonious than many of the ramps you made 'programmatically' (And I haven't been able to get a 'better' one, except by removing the color with ! above it.)

[Conzeit]

Tocky, image down...halp?

[Ai]

just remove the orange outlined box and it's contents from the picture I posted, and you would have an image identical to Tocky's IIRC.

That said, Tocky's image is visible to me, even after reloading. Not surprising -- they are both hosted on photobucket.