several shades of colour, using the different coordinate systems.

HSI and HSY for Krita’s advanced colour selector.

So, in the past few weeks, I spent some time hacking a new feature into Krita that I had wanted for a long time, and this monday I actually commited it. So, I figured it be best to make a little post about the new functionality.


The inspiration, no doubt, was a combination of MyPaint’s HCY’ and the artistic colour selector’s HSI and HSY.

Yes, that’s right, the artistic colour selector had these features al ready. However, the artistic colour selector did not update itself.


What is HSI and HSY’/HCY.

We’ll borrow an image from Wikipedia for this:

When we plot HSV value against chroma, the result, regardless of hue, is an upside-down isosceles triangle, with black at the bottom, and white at the top bracketed by the most chromatic colors of two complementary hues at the top right and left corners. When we plot HSL lightness against chroma, the result is a rhombus, again with black at the bottom and white at the top, but with the colorful complements at horizontal ends of the line halfway between them. When we plot the component average, sometimes called HSI intensity, against chroma, the result is a parallelogram whose shape changes depending on hue, as the most chromatic colors for each hue vary between one third and two thirds between black and white. Plotting luma against chroma yields a parallelogram of much more diverse shape: blue lies about 10 percent of the way from black to white, while its complement yellow lies 90 percent of the way there; by contrast, green is about 60 percent of the way from black to white while its complement magenta is 40 percent of the way there.

Image B, the HSV, we all know: The most colorfull colour is equal to white in this system. It more or less seems a definition of how bright a given pixel-component is shining.

This is not a great system to use for artists. It you want to make a tone ramp from black to blue to white, you first need to only adjust the value slider, until you hit blue, and from there you need to adjust the saturation till you hit white.

No, much more comfortable is image C, HSL. In this system you can adjust the lightness slider only to have a black-to-colour-to-white tone ramp. Saturation in this case is only reserved for going from a colorfull colour to grey.

But there’s still something weird about HSL: If you have yellow, which need both the red and green lights to be fully lit, and blue, which only need the blue light to be fully lit, then one is obviously brighter than the other? Yet, HSL sets both at 50% lightness.

So we get to our next system, the first of the added options:

Image A, component avarage, or HSI. This determines the Intensity of a colour by adding up all the components. So white(r+g+b) is lighter than yellow(r+g) is lighter than blue(b), which in turn is lighter than black(everthing at zero).

This also results in slightly more intuitive colour picking. But. It’s still a little weird.

Once you start to do measurements of how bright certain colours are, you end up with yellow being even brighter than it is in intensity. When doing so, you get Luminosity(Y). However, unless you have your screen fully colour managed, you can not really use this information: The RGB of your screen does not know where it is in the full extent of visible colour. To map this knowledge to RGB space anyway, image D, HSY’, Luma(Y’) was designed. Luma takes the components, and weights them before adding up.

This makes it even more intuitive than HSI. Though not as powerful as a system that maps to luminance correctly. Such a system, commonly LCH, can be made at this time, but to genuinely give proper feedback, we’ll need to implement colour-management aware colour mixing, also known as perceptual gradients. This will take a lot of work, so until then we stop right here.

Note on HSY: This is exactly the same as MyPaint’s HCY’. The difference between using C(chroma) or S(saturation) is not very clear to me. Officially, Chroma is the colourfulness relative to the lightning, and our cylindrical HSY’ formula would be justified in being called a HCY’ formula in that case. However, some say that only conical formulas are allowed to use Chroma. To explain, we needed to convert the conical formula to a cylindrical one so the colour selection would actually make sense. In the end I went with the artistic colour selector’s convention.

What is the point?

If you followed the previous explaination, you should have a vague idea what it’s about.

But I’ll show you anyway:


several shades of colour, using the different coordinate systems.
several shades of colour, using the different coordinate systems.


The above shows the difference between colours at the same hue as two reds. Where in HSL the colours remain the most colourful colour possible in that hue, in HSI and HSY, the shifts try to maintain the relative lightness of a colour in exchange for it’s saturation being different. As humans are more sensitive to lightness contrasts than colourfulness contrasts, these selectors are much more intuitive to use when painting.

So where can I find them?

In the advanced colour selector options:


The different options, carefully labelled.
The different options, carefully labelled.

Right now it’s a little difficult to figure out which is which, hence the little guide above. There will be a better choosing system in the future, but for now this works.

Triangle, here, is named wildcard, because while internally it maps to HSL, it is, in fact for all shapes the same! To have a difference between HSL, HSI and HSY’ triangles, you’d need to dynamically change the proportions per hue.

mypaint shade selector, with HSI on top and HSY' on bottom.
mypaint shade selector, with HSI on top and HSY’ on bottom.

You can also find them in the mypaint shade selector, which before could only do HSV. This is partially because it was the easiest place to implement them, but also because it is actually pretty useful to use the shade selector in these colour models.

I hope you will be able to enjoy the new selector options as much as I do!


Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>