Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
chang-zhao opened this issue Nov 23, 2016 · 8 comments
Closed

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

chang-zhao opened this issue Nov 23, 2016 · 8 comments
Labels

Comments

@chang-zhao
Copy link

chang-zhao commented Nov 23, 2016

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.

@taufik-nurrohman
Copy link
Owner

taufik-nurrohman commented Nov 25, 2016

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
Copy link
Owner

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
Copy link
Author

chang-zhao commented Nov 25, 2016

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

2016-11-26_213743

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
Copy link
Author

chang-zhao commented Nov 26, 2016

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
Copy link
Owner

That makes sense.

Repository owner locked and limited conversation to collaborators Mar 26, 2021

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
Projects
None yet
Development

No branches or pull requests

2 participants