Can we use "hs + b" controls rather than "sb + h"?

[chang-zhao]

Thanks for a great tool!
It's the very best approach - to keep it simple to use and to extend.

My only inconvenience is that it uses rectangle of saturation * brightness, plus a slider of hue.

That approach is good to fine-tune colors of a given hue, but it's not the best way to quickly select different colors.

Maybe that's OK for heavy duty things like Photoshop, but for simple web applications it seems to me it would be more convenient to have a large rectangle of hue * saturation, and a stripe slider of brightness.

Then it's like choosing a color on a large palette, and then maybe adjusting brightness.

I tried both approaches in different color pickers and I'm pretty sure.

My JS skills are rudimentary, so I'd like to ask you, respected professionals: is it possible to make a control "hue on X, saturation on Y" + brightness?

Thank you again ;).

PS. I often want to choose several colors of the same brightness, rather than of the same hue; so fro me it is brightness that should go into a separate slider.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[taufik-nurrohman]

I am thinking on making another demo using the color-picker.color-rgba.html concept where the opacity slider is used as the brightness slider.

[taufik-nurrohman]

Or maybe not. I am still thinking, without any plans on adding new features. This plugin should be kept on its simplest state.

[chang-zhao]

Well if you feel it's superficial, then no big need to waste your time. I could live without it.

It might be just, you know, good as a form of art - when you do beautiful things just for fun.

Buddhists say that when you make beutiful things, such as decorating Buddha altar, you create more causes to be calm, beautiful and happy :). So web design and programming is like a spiritual practice for me. :)

Also, it might be somehow useful for people. This plugin seems to me most useful - because it's simple and easily adaptable.

So thank you again in any case. Best wishes.

[taufik-nurrohman]

I just got an idea: switch .color-picker-sv width with .color-picker-h width. The rest is about switching the pointer movement logic.

[chang-zhao]

Aha. So it might be not very complex.

Like adding a check if we have horizontal coordinate there, and then choosing one of the two functions.

For background image H*V
I think some people use gradient like
(FF0000, FFFF00, 00FF00, 00FFFF, 0000FF, FF00FF) or something.

[taufik-nurrohman]

div {
  width:200px;
  height:200px;
  position:relative;
  background-image:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);
}
div:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-image:linear-gradient(to bottom,#fff,transparent,#000);
}

You don’t even need the second slider.

[chang-zhao]

No, I think there should be 3 coordinates. That way we mix either with white or with black, but less saturation might mean dissolving in both white and black.

Suppose we take 50% white + 50% red:
( FFFFFF + FF0000 ) / 2 = FF8080

50% black + 50% red:
(000000 + FF0000) / 2 = 800000

But if we mix with 50% gray
( 808080 + FF0000 ) / 2 = C88080

Also how could we get gray?
808080 means half white + half black with no adding hue color.

[taufik-nurrohman]

That makes sense.