New color choosers/selectors #707

dacap opened this Issue Jun 19, 2015 · 24 comments


None yet
9 participants

dacap commented Jun 19, 2015

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



  • 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?


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

Theres also that triangular HSV representation thats pretty useful.

Thats actually base ideas, I'll continue investigating other color wheels and ideas.

Hope this happens :)

@dacap dacap added this to the v1.1 milestone Jul 31, 2015

@dacap dacap self-assigned this Jul 31, 2015

@dacap dacap added the high priority label Aug 5, 2015


dacap commented Aug 6, 2015

This is a work-in-progress:

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

Gracias hermano :)


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:

Here some colour wheels that apply different colour harmonies: <--- this one even uses RYB or RGB to harmonize.


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

@dacap dacap referenced this issue Aug 28, 2015


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:
Similar setup with a square:
(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 (some ideas about shades & stuff)

Hope they're useful :)


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 dacap referenced this issue Jan 5, 2016


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.


dacap commented Feb 12, 2016

We can implement a RYB color wheel applying a color curve to the hue component

dacap added a commit that referenced this issue Feb 12, 2016


dacap commented Feb 22, 2016

Another color picker was proposed:

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:


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:


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


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 milestones: v1.1, v1.2 Mar 3, 2016

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

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.

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

@dacap dacap added the maintenance label Apr 18, 2017

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

Add Hue/Saturation filter (fix #1186)
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

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

Simplified ColorSelectors using more shared code in the base class.

dacap commented May 30, 2017

For next version: New saturation and alpha 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

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

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

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