Skip to content
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

New color choosers/selectors #707

Open
5 of 9 tasks
dacap opened this issue Jun 19, 2015 · 29 comments
Open
5 of 9 tasks

New color choosers/selectors #707

dacap opened this issue Jun 19, 2015 · 29 comments
Labels
colorbar feature Feature request, or something should be improved high priority maintenance
Milestone

Comments

@dacap
Copy link
Member

dacap commented Jun 19, 2015

Add alternative ways to select colors and create palettes. See common color schemes.

Examples:
https://color.adobe.com/
http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Tasks:

P.S. could be this a candidate for a scripting/plugin API?

@dacap dacap added feature Feature request, or something should be improved colorbar labels Jun 19, 2015
@todofueunmalentendido
Copy link

GRRRREAT!

I think a good idea for a color selector would be using the color wheel and adding different ways of choosing/looking color harmonies. There is a software called Coolorus.
http://www.coolorus.com/ They have this really simple way of color choosing, based in the color wheel idea.

Deffinitively there should be a RYB and a RGB/CMYK color wheel.
captura de pantalla 2015-06-19 a la s 18 06 24

I've found out most color harmony/scheme theories are based in the RYB wheel, most computer software dont work with this wheel, but instead the RGB one. Would be really neat you could switch between wheels and maybe even find / invent new harmonies with them.
https://www.youtube.com/watch?v=KOVXP6ILtrM

Theres also that triangular HSV representation thats pretty useful.
https://en.wikipedia.org/wiki/HSL_and_HSV

Thats actually base ideas, I'll continue investigating other color wheels and ideas.
https://www.youtube.com/watch?v=kTSrdGKC6SA
https://en.wikipedia.org/wiki/Munsell_color_system

Hope this happens :)

@dacap dacap added this to the v1.1 milestone Jul 31, 2015
@dacap dacap self-assigned this Jul 31, 2015
@dacap
Copy link
Member Author

dacap commented Aug 6, 2015

This is a work-in-progress:
colorwheel

@todofueunmalentendido
Copy link

Great! It looks really neat!

I'm so sorry I don't know programming to help out. A friend in the studio we work said maybe he can help or give it a try. For starts, the RGB wheel works great. I think that what could help a lot is to add a RYB wheel, so you could use color theories from painting, into this. Both wheels are slightly different.
I know for digital artists is easier understanding the RGB wheel, but having both wheels definitively expand the spectrum and possibilities.

It could be a great starting point to enhance the color choosing bars, so you could work inmediately with color harmonies. Complementary colors and such. Theres always this misunderstanding in colour harmonies between the RGB wheel and the RYB wheel, you could "harmonize" with both, but art has been using the RYB one for centuries, harmonizing their colors with it. Thats whay I think it's importante for digital tools to embrace or at least give the option to work with a RYB wheel, making digital tools a bit more familiar with analog painting (and art history)

Here I can leave you some articles and stuff about how the RYB color wheel could be formed
(and other nerdy discussions about colour) :)

https://github.com/bahamas10/ryb/raw/gh-pages/assets/ryb.pdf
http://bahamas10.github.io/ryb/about.html
http://www.daveeddy.com/2014/07/01/red-yellow-and-blue/
http://codepen.io/social_quotient/pen/ExgKG

Gracias hermano :)

@todofueunmalentendido
Copy link

Hi.

Found some more info about a possible colour "harmonizer" investigating.
Anyway this should be done in the RYB colour wheel (at least that is what most people and softwares do and recommend when we're talking bout colour harmonies). But here are the grade relations of colours, for every different harmony. It would be great ASE could show you the other colours that "harmonize" with the one you picked, in a desired colour harmony.

Well... I'll just put this info here.

Available Harmony Names (and their associated degrees of hue rotation)


complementary: [0,180]
splitComplementary: [0,150,320]
splitComplementaryCW: [0,150,300]
splitComplementaryCCW: [0,60,210]
triadic: [0,120,240]
clash: [0,90,270]
tetradic: [0,90,180,270]
fourToneCW: [0,60,180,240]
fourToneCCW: [0,120,180,300]
fiveToneA: [0,115,155,205,245]
fiveToneB: [0,40,90,130,245]
fiveToneC: [0,50,90,205,320]
fiveToneD: [0,40,155,270,310]
fiveToneE: [0,115,230,270,320]
sixToneCW: [0,30,120,150,240,270]
sixToneCCW: [0,90,120,210,240,330]
neutral: [0,15,30,45,60,75]
analogous: [0,30,60,90,120,150]

Here the place where I got the info:
https://github.com/skratchdot/color-harmony

Here some colour wheels that apply different colour harmonies:
http://www.sessions.edu/color-calculator
http://bahamas10.github.io/ryb/ <--- this one even uses RYB or RGB to harmonize.

@dacap
Copy link
Member Author

dacap commented Aug 19, 2015

I'll review this stuff later (at least I hope to add some kind of color harmonies for v1.1.0, in other case it will appear on v1.1.1)

@dacap
Copy link
Member Author

dacap commented Aug 21, 2015

I've done something for the next version (RGB only, RYB will be available in v1.1.1 or v1.1.2, we'll see):
harmony

@lendrick
Copy link

Just wanted to put a word in for an HSL selector as well. You should be able to piggyback on the HSV code for the most part, and it would be useful for situations where you want to preserve the lightness of a color while adjusting the saturation.

@KasumiArai
Copy link

My favorite triangle color picker:
colorpickertriangle
Similar setup with a square:
colorpickersquare
(The diamond patterns are just artifacts from so many colors in the gif, of course.)
I find hue circle color pickers like the above most intuitive, personally.

@todofueunmalentendido
Copy link

Those kind of pickers are great, perfect for finding shades, tones and tints. That would turn the color selector wheel into a pretty intuitive tool (mixed with the harmonies selector), helping us to create color schemes (and gradients) faster.

I collecter some articles, conversations and info about ways to make the RYB color wheel
(for a more precise color scheming).

at-import/color-schemer#3
https://www.nodebox.net/code/index.php/Colors (some ideas about shades & stuff)
http://bahamas10.github.io/ryb/assets/ryb.pdf
http://math.stackexchange.com/questions/305395/ryb-and-rgb-color-space-conversion
http://bahamas10.github.io/ryb/about.html
https://github.com/bahamas10/ryb/blob/gh-pages/js/RXB.js#L252-L330

Hope they're useful :)

@dacap
Copy link
Member Author

dacap commented Dec 2, 2015

Something like Photoshop color picker should be available too:

@ghost
Copy link

ghost commented Dec 2, 2015

Any of the colour triangle, cube and Photoshop one with slider are all pretty similar so only one would be needed (but I don't know, I'm not an artist.) Also, there's the PaintShop Pro picker which is also similar:

2015-12-02 12_09_20-corel paintshop pro x5

@ghost
Copy link

ghost commented Jan 7, 2016

Not sure if this should be a new issue or not, but a handy option on the colour selector would be to limit it to the palette in indexed images. So the wheel would show the full range of colours, but it would select the nearest colour to one in the palette.

@dacap
Copy link
Member Author

dacap commented Feb 12, 2016

We can implement a RYB color wheel applying a color curve to the hue component http://computergraphics.stackexchange.com/questions/1748/function-to-convert-hsv-angle-to-ryb-angle

dacap added a commit that referenced this issue Feb 12, 2016
@dacap
Copy link
Member Author

dacap commented Feb 22, 2016

Another color picker was proposed: http://www.husl-colors.org/

@PassiveAggressor
Copy link

Loving the new Color Wheel!
One thing that I think would make it even more useful is adding 2 sliders to it.
One to change the Saturation and one to change the alpha value.
This would mean you could make any color/alpha value without having to leave the color editor open.

Something like:
sliders

@dacap
Copy link
Member Author

dacap commented Feb 26, 2016

Hi @PassiveAggressor, yeah, at least the saturation slider would be really useful in the color wheel. I don't know if it will be make v1.1.3 as I would like to release a patch today with this new color selector:

tint-shade-tone

@PassiveAggressor
Copy link

Thanks for the quick reply,
That selector looks even better. Maybe it could have a horizontal "slider" for alpha underneath that hue "slider" ?

@dacap
Copy link
Member Author

dacap commented Feb 29, 2016

That selector looks even better. Maybe it could have a horizontal "slider" for alpha underneath that hue "slider" ?

I think an alpha slider could be a good option for all color pickers. I've to think about a new UI that can be mixed with the current color spectrum/wheel/tints + foreground/background color chooser.

@bfloch
Copy link

bfloch commented Nov 15, 2016

The color picker action is great. However as you mentioned without the saturation the color wheel is pretty much unusable.

The issue I am facing with the Tint/Shade/Tone picker that the hue selection is not granular enough. I'd have to make the selector big which takes valuable space from the canvas.

Proposing to either make the hue bar vertical or even better allow for a modifier that adds more fine grained selection. This is how Blackmagic Design Fusion does it:
When on a slider or similar and you hold shift the drag selection goes in to precision mode, meaning that it follows the mouse only to a fraction (1/10th?) of the rate.

I also second the alpha request. I could also live with something photoshop-ish like Shift+1-0 being alpha 10% to 100%.

@AndreiRudenko
Copy link

Hey, maybe this color space may be helpful :)
http://vis4.net/blog/posts/avoid-equidistant-hsv-colors/
http://tristen.ca/hcl-picker
http://tools.medialab.sciences-po.fr/iwanthue/

@Eiyeron
Copy link

Eiyeron commented Jan 13, 2017

Makes me remind of husluv, which I ported to Haxe. It's a twist of HSL that gets another parameter -the saturation.

@PassiveAggressor
Copy link

Is the alpha slider still on the cards, I think it would be a great addition.

dacap added a commit that referenced this issue May 24, 2017
Added new gfx::Hsl class to handle HSL color model(related to #707 and #1102)
dacap added a commit that referenced this issue May 29, 2017
dacap added a commit that referenced this issue May 29, 2017
)

Simplified ColorSelectors using more shared code in the base class.
@dacap
Copy link
Member Author

dacap commented May 30, 2017

For next version: New saturation and alpha sliders:

new-sliders

There are HSL sliders too:

screen shot 2017-05-30 at 1 37 00 pm

The color selector still needs works and an unification with RGB/HSV sliders and the palette editor.

dacap added a commit that referenced this issue May 30, 2017
@PassiveAggressor
Copy link

That is awesome! can't wait for that :)

@dacap dacap modified the milestones: v1.2, v1.3 Sep 12, 2017
@domdere
Copy link

domdere commented May 10, 2019

+1 for CMYK support, that would be fantastic!

@Shinmera
Copy link

Shinmera commented Jun 30, 2019

I'm really hoping for a triangular colour wheel like @KasumiArai mentioned.

My favorite triangle color picker:
colorpickertriangle

@mheyman89
Copy link

Is it possible to get the LAB color sliders like photoshop has?

More info here:

http://geraldbakker.nl/psnumbers/lab-explained.html

@GAZ082
Copy link

GAZ082 commented Sep 30, 2019

Hi! I second the addition of the HCL color palette!

@Unknow0059
Copy link

I noticed #4380 #2791 are absent here despite relevance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
colorbar feature Feature request, or something should be improved high priority maintenance
Projects
None yet
Development

No branches or pull requests

14 participants