![]() Chroma is defined as the squareroot of (a^2+b^2).ĬIE Lab system tries to rectify the apparent nonlinearity of RGB, HSL and HSV. In CIE Lab system we have color parameters a and b, L presents the brightness. These equations are not an arbitary definition, they are derived to give the same result as RGB chroma, if the color is the same, only a small rounding error should be possible. If you have luminosity written as as 0.255, the formula must be written:Ĭhroma = Saturation * (1-Abs(2*L/255 - 1) In wikipedia one can found the following formula for HSL chroma.Ĭhroma = Saturation * (1-Abs(2*L-1), where L is the luminosity as 0.1. At 50% luminosity the weighting function is 1. When the luminosity is zero or maximum, the weighting function is 0. We can use as chroma the saturation, which is multiplied by a weighting function which depends on the luminosity. Luminosity = about 50% of the maximum could offer high chroma, but it has not used in C, where R, G and B are nearly same. That's because saturation only shows, how much there's color when compared to the maximum at that luminosity. B's chroma=40 and D's chroma is only 10.ī and D have low chroma, but high saturation. ![]() ![]() That's the maximum in normal RGB system.ĭark color B and nearly max luminous D cannot have especially high chroma, because in both cases RGB numbers must be near each other, nearly zero in B and nearly maximum in D. That makes at least some sense, because A is most colorful and the numbers cover whole range 0.255. RGB chroma is = the maximum difference between color's RGB numbers. In Wikipedia explanation of a color system there's also shown the generally accepted formula for chroma in that system. This at least proves that saturation is a poor measure how colorful something is in a computer screen. ![]() R=B, a little above 50% of maximum and G is a little below 50% of maximum. D is made from A by moving slider G towards the maximum. Only C has low saturation in HSL system, B and D have still 100% saturation.Ĭolor version B can be made from version A by moving Red and Blue sliders same amount towards zero. But the saturation numbers can be a surprise. It's as colorful magenta as possible in normal computer screens.ī has low luminosity, C has luminosity about 50% of maximum and D has nearly max. Those four colors are actually the same magenta (RGB=255, 0, 255) but adjusted to different luminosity and saturation levels. B is nearly black, C is nearly grey and D is nearly white!" For example we say "Color A is very saturated and versions B, C and D are not. Well, in everyday talk we often talk about saturation, when we actually mean chroma. What is chroma subjectively, how we see it? It's calculated differently in every system and when two different colors have same chroma in one color system, the same colors can have different chromas in another color system. Converting to grayscale allows you to tweak the B&W mix, which is not something that can do when you desaturate the image.Ĭhroma is not unique quantity, every color system has its own chroma. Clicking on the black & white button (or using the B&W portion of the HSL panel) converts the image to grayscale. The color information is still there though. When you desaturate the image, you are toning down the color. Here a little explanation extracted from There's a big difference between Desaturate and Grayscale. This GIF show how it looks the same image when transforming to grayscale in Photoshop: I don't know Sketch but I think it doesn't desaturate but transform the image in grayscale. In a color selector would be choosing colors with the similar brightness and saturation:Īlthough it is presented as a good color solution and gives a good effect, in web design it is necessary to pay attention to its use in selection elements, there is a large percentage of the population unable to distinguish a wide range of colors, and, for example, in a web of a bank, it would not be the best option. Also called chroma.Ī easy why to understand it is if you open the site sample from Smashing Magazine in Photoshop and apply desaturation from the Image Menu, the result will be a homogeneous gray almost without contrast: Actually is chromaticity: difference between a color and a gray of its same brightness and clarity, with the same color saturation.
0 Comments
Leave a Reply. |