1

Why does smashing magazine, in this article, say the colors in this site have the same chroma? How can one find same chroma colors using HSV or HSB model?

Edit: I've tried to also desaturate on Sketch by using color mode, but why didn't it came out like yours and instead it has much more difference between the greys? After apply color mode on sketch app

  • In my opinion, the definitions given by that site are bogus and confusing. "Saturation refers to how a hue appears under particular lighting conditions." What? If my computer screen color is white and I change the "lighting conditions" of my room it becomes less or more saturated? Really? – Rafael Jun 24 '18 at 21:25
  • "Chroma can be thought of as the brightness of a color in comparison to white." Why the heck are they mixing other concepts about color to wrongly explain a term? I give up on the definitions. – Rafael Jun 24 '18 at 21:29
  • I guess Sketch doesn't Desaturate but transform to Grayscale the image. I updated the answer with some explanation. – Danielillo Jun 26 '18 at 12:00
6

Actually is chromaticity: difference between a color and a gray of its same brightness and clarity, with the same color saturation. Also called chroma.

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

desaturate

The same with the other example:

chroma

In a color selector would be choosing colors with the similar brightness and saturation:

color picker

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

Update after question edit

I don't know Sketch but I think it doesn't desaturate but transform the image in grayscale. This GIF show how it looks the same image when transforming to grayscale in Photoshop:

grayscale

There's a big difference between Desaturate and Grayscale. Here a little explanation extracted from https://www.thephoblographer.com/2014/08/31/desaturation-vs-grayscale-working-black-white-conversions/

When you desaturate the image, you are toning down the color. The color information is still there though. Clicking on the black & white button (or using the B&W portion of the HSL panel) converts the image to grayscale. Converting to grayscale allows you to tweak the B&W mix, which is not something that can do when you desaturate the image.

1

Chroma is not unique quantity, every color system has its own chroma. 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.

What is chroma subjectively, how we see it?

Well, in everyday talk we often talk about saturation, when we actually mean chroma. For example we say "Color A is very saturated and versions B, C and D are not. B is nearly black, C is nearly grey and D is nearly white!"

enter image description here

Those four colors are actually the same magenta (RGB=255, 0, 255) but adjusted to different luminosity and saturation levels. A is the unadjusted RGB= 255, 0, 255. It's as colorful magenta as possible in normal computer screens.

B has low luminosity, C has luminosity about 50% of maximum and D has nearly max. luminosity. But the saturation numbers can be a surprise. Only C has low saturation in HSL system, B and D have still 100% saturation.

Color version B can be made from version A by moving Red and Blue sliders same amount towards zero. D is made from A by moving slider G towards the maximum. C is a combination. R=B, a little above 50% of maximum and G is a little below 50% of maximum.

This at least proves that saturation is a poor measure how colorful something is in a computer screen. Chroma is better for it.

Chroma in RGB

In Wikipedia explanation of a color system there's also shown the generally accepted formula for chroma in that system. RGB chroma is = the maximum difference between color's RGB numbers. That makes at least some sense, because A is most colorful and the numbers cover whole range 0...255. We can say that the chroma of A is 255. That's the maximum in normal RGB system.

Dark 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. B's chroma=40 and D's chroma is only 10.

B and D have low chroma, but high saturation. That's because saturation only shows, how much there's color when compared to the maximum at that 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. Thus the saturation is low.

Chroma in HSL color system

We can use as chroma the saturation, which is multiplied by a weighting function which depends on the luminosity. When the luminosity is zero or maximum, the weighting function is 0. At 50% luminosity the weighting function is 1. In wikipedia one can found the following formula for HSL chroma.

Chroma = Saturation * (1-Abs(2*L-1), where L is the luminosity as 0...1. If you have luminosity written as as 0....255, the formula must be written:

Chroma = Saturation * (1-Abs(2*L/255 - 1)

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.

Chroma in other color systems

In CIE Lab system we have color parameters a and b, L presents the brightness. Chroma is defined as the squareroot of (a^2+b^2).

CIE Lab system tries to rectify the apparent nonlinearity of RGB, HSL and HSV. Nonlinearity = the apparent changes in lightness or chroma aren't proportional to the change of color parameter numbers. CIE Lab is at least acceptably succeeded to create some proportionality. In addition the system covers wider color range than normal RGB, HSL and HSV.

CIE Lab is often seen to be difficult, because parameters a and b together define hue and chroma in a quite nonintuitive way. It needs a lot of serious practicing until one can find the right a and b numbers fast.

Color system LCH (or equivalently HCL) is developed to have some of the perceptual linearity and wide covered color range of CIE Lab, but at the same time it still is as intuitive as HSL.

In LCH parameter L (=0 lightness) is the same as in CIE Lab, but a and b are replaced by HSL-like polar coordinate system of C (chroma) and H (hue).

GIMP 2.10 has LCH as color selection, adjusting and layer blending possiblity. Slider C is available for Chroma. That makes easy to generate a set of colors with same chroma. Except two quirks:

  1. it's easy to select a chroma value which results an impossible color, one which would need negative or above 255 RGB values.

  2. only color setting sliders have masks that clearly show the range of displayable colors. Layer blending mode and color adjustment results are clipped to have RGB values 0 and 255 when out of-range values were needed. There's no clear indication of clipping.

Munsell color system is developed not for computers, but as a model for perceived color. Chroma is there an important sorting parameter of the discrete colors (="chips") in Munsell color table.

Munsell system is commercialized and it's not available in common computer software such as Photoshop. It can be purchased as printed tables.

A brave soul has published an online virtual Munsell color table for 40 common color hues:

enter image description here

It can be found here: http://www.andrewwerth.com/aboutmunsell/

Of course it is limited to displayable colors of normal RGB screens. Chroma is increased to the right in a table. Color chips in the same vertical column have same chroma.

More easy to read material about chroma and color: http://www.huevaluechroma.com/015.php That is actually a part of whole series of comprehensive writings named "The Dimensions of Color" by David Briggs.

How to equalize a set of colors to same Chroma

At first I must admit, that I haven't a slightest idea of the used chroma concept if one says that the colors in the image with white text "neobi" have same chroma. Nothing commonly accepted fits. But we can equalize the chromas in neobi image using the above presented RGB chroma. The same is possible with the same results also in HSL color system, because HSL and RGB are equivalent. The calculations are a little simpler in RGB.

Of course there can be some difference between the original and my onscreen version of neobi image due numerous color conversions between the original and my screen, but that does not explain the chroma differences.

We can separate the following color set from the neobi image:

enter image description here

Color X has quite low chroma (=57). We adjust the others to the same. In addition we try to make all equally bright. We do not use any complex formulas for apparent color brightness, we only make all colors to have same average RGB numbers. In this case our average RGB is 200.

enter image description here

The result seems quite true. The used method is to make a linear transformation to all colors. Every RGB number of a color is multiplied by one number and another is added. Every color need its own multiplier and add-on component. Linear transformation does not change hue, if R, G and B are multiplied by the same number and the result is in the range 0...255 without clipping.

I prepared an Excel spreadsheet to calculate new RGB numbers. Unfortunately I am not a programmer - a person who can write working scripts could easily make a visual system for the same. The spreadsheet is shown later.

Here's another solution for higher chroma (=100) and lower average brightness (=150)

enter image description here

The spreadsheet with the preceding colors:

enter image description here

The spreadsheet can be taken from here: https://www.dropbox.com/s/38t7ws91cm84gjr/ChromaRGB.xls?dl=0

Everything is not possible. We cannot get especially high chroma values for light nor dark colors because the max RGB number is 255 and the minimum is zero.

NOTE: You can manually change brightness of a color without changing chroma, if you add or subtract the same number from its R, G and B.

The next is the same image, partially painted over in GIMP. The painted colors have same hues and brightnesses as the originals, but the chroma is the maximum allowed without clipping. They were selected without any calculations with LCH sliders (=increasing the chroma to the limit of clipping)

enter image description here

Done.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.