New color choosers/selectors #707

Open
dacap opened this Issue Jun 19, 2015 · 24 comments

Comments

Projects

In progress in Next release

9 participants
Owner

dacap commented Jun 19, 2015 edited

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

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

Tasks:

  • Add HSL selector
  • Use HSL in Color Spectrum color picker (adding saturation slider at the bottom)
  • Add HSV-Value slider to the color wheel
  • Add alpha slider on color-bar
  • Add an unified way to select/edit colors (related to #1102)
  • Add option to show only palette colors in color selectors (and maybe w/dithering options too)
  • Add text entries to color bar

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

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 added this to the v1.1 milestone Jul 31, 2015

dacap self-assigned this Jul 31, 2015

dacap added the high priority label Aug 5, 2015

Owner

dacap commented Aug 6, 2015

This is a work-in-progress:
colorwheel

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 :)

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.

Owner

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)

Owner

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

dacap referenced this issue Aug 28, 2015

Closed

Color Picker #386

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.

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.

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 :)

Owner

dacap commented Dec 2, 2015

Something like Photoshop color picker should be available too:

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

dacap referenced this issue Jan 5, 2016

Open

Shading Palette #933

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.

Owner

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 dacap added a commit that referenced this issue Feb 12, 2016

@dacap dacap Add RYB color wheel (related to #707) c1ae065
Owner

dacap commented Feb 22, 2016

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

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

Owner

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

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

Owner

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.

@dacap dacap modified the milestone: v1.1, v1.2 Mar 3, 2016

bfloch commented Nov 15, 2016 edited

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%.

Eiyeron commented Jan 13, 2017 edited

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

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

dacap added the maintenance label Apr 18, 2017

@dacap dacap added a commit that referenced this issue May 24, 2017

@dacap dacap Add Hue/Saturation filter (fix #1186)
Added new gfx::Hsl class to handle HSL color model(related to #707 and #1102)
239ac42

dacap added to In progress in Next release May 29, 2017

@dacap dacap added a commit that referenced this issue May 29, 2017

@dacap dacap Add HSV-saturation/value sliders in ColorSpectrum/Wheel (related to #707
)

Simplified ColorSelectors using more shared code in the base class.
b7f8efc
Owner

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.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment