
Unlocking Colors - shekhardesigner
https://bkardell.com/blog/Unlocking-Colors.html
======
jmiskovic
The assumption is that using another color space (like proposed CIE) would
unlock mathematical manipulation of color palettes in design. I don't think
this is true.

Our eyes are very sensitive to color shades and we'll easily notice if
something is off. Colors are carefully picked by designers to fit together in
quite subjective and non-mathematical manner. From observing some well
constructed palettes, I derived the basic process used to create them. Pick
the approximate colors you want, arrange them so they are all visible, and
then tweak color shades so that all of them could exist under same lightning
conditions in physical world. If some color seems jarring or wrong, that's
because it could only exist under different lightning from rest of palette.

The text seems to neglect the vast amount of information lost when we use just
a single point in color space to represent the whole light spectrum. For
example, magenta signifies presence of both bluish and reddish wavelengths. If
your math is not based on spectrum components, how do you hope to arrive to
correct color when mixing two spectrums? Linear interpolation between two
points in color space?

I think HSL is huge improvement over RGB model for designers, but other color
spaces aren't really worth the effort. If you need light and dark theme for
your UI, both will need to be hand crafted. Shifting hues by 5% or calculating
complementary color won't be good enough.

~~~
jacobolus
> _assumption is that using another color space (like proposed CIE) would
> unlock mathematical manipulation of color palettes in design_

The point is not really “mathematical manipulation” per se.

It’s helpful to have human-relevant coordinates anywhere humans are making the
decisions, because it dramatically reduces human confusion, and leads people
to make better informed decisions.

“HSL” and “HSV” (i.e. the RGB cube arbitrarily squashed into a cylinder) are
bad models for human use, because despite their names the coordinates have
little to do with human perception, and as a result create tremendous amounts
of confusion and bad results, especially from anyone who isn’t an expert
artist.

[https://en.wikipedia.org/wiki/HSL_and_HSV#Disadvantages](https://en.wikipedia.org/wiki/HSL_and_HSV#Disadvantages)

~~~
jmiskovic
I've once built a color picker that used HSL and was very usable. It wasn't
standard color wheel or set of HSL sliders. Instead you would modify the color
directly on the design in relative fashion by slowly dragging cursor in one
direction. Each of HSL values was modified by dragging in certain direction,
for example hue was left to right, lightness was up-right to down-left and
saturation was up-left to down-right.

It was very intuitive and fast to find a good shade using this design. The key
was modifying colors directly on design instead on separate UI panel, and
using relative tweaking model for incremental approach to correct shade. HSL
was great choice here.

Maybe other color spaces like CIE would be more successful if they were less
CS- and math-heavy and simpler to understand for designers.

~~~
jacobolus
If you took your same design concept and changed the coordinate system to
polar-coordinate CIELAB, I 100% promise you that essentially all artists would
find it easier and more pleasant to use, without any other required change.

For the software developer, the only additional bit of trickiness is that some
color changes will push a color out of gamut, so you need to implement some
method of bringing those back into gamut. As a simple first method to try let
me recommend preserving hue/lightness and clipping the chroma so the result
fits within the gamut.

------
0xff00ffee
I appreciate trying to extend CSS to provide functions that move through a/the
gammut more intuitively, but I also fear feature-creep. CSS was originally a
method for setting parameters, now it is becoming a procedural (or sort-of
functional) language.

When it was just a parameter conifg file, there was only the need to check
lexical and grammatical consistency. Now we've got to have functional
regressions and computations standards... and everything that comes with a
compiler verification suite. Ugh.

On the one hand, I think it absolutely makes sense to keep color management in
the CSS, but I also see a big ol' slippery slope.

------
rubatuga
> Your monitor does, and if you have a TV capable of HDR (hi dynamic range)
> that's got a wider gammut, for example...

Not true, hdr just means a better contrast ratio.

~~~
jacobolus
HDR means each primary can get much brighter. The range of possible
chromaticities does not change, but the 3-dimensional gamut still gets much
larger, and in particular it becomes possible to make much more colorful
bright colors. You can simulate e.g. a flashing red light in a way that is
impossible on a lower-dynamic-range display (where the light has to either
look too dark or too pale).

It still isn’t going to help you show a very intense dark teal color outside
the capabilities of typical mix of RGB “G” and “B” primaries.

~~~
rubatuga
The problem is he is using the term "wider" which always refers to a change in
the color range and not brightness. I agree gamut represents a 3D space.

~~~
jacobolus
There are 2 things here:

(1) The latest generation of displays (and presumably most displays in the
future) use more colorful [spectrally spikier] “R”, “G”, and “B” primaries,
with the result that they can display a wider range of chromaticities than an
sRGB display.

(2) If you make the brightness of a diffuse white reference less than the
maximum which can be produced by your display then you have more headroom in
each primary, and you can produce a much wider gamut of bright colors. The
possible dark colors which can be produced don’t change. This makes it
possible to accurately display e.g. very colorful flowers – with linear RGB
coordinates of say (2.0, 0.0, 1.5) relative to (1.0, 1.0, 1.0) meaning diffuse
white – which could not otherwise be shown if diffuse white were set to be the
brightest combination of primaries for the display, because then the flower
would necessarily get clipped to (1.0, 0.0, 1.0).

[Sorry, this is a lot easier to see if you start looking at some graphics. It
is not easy to clearly describe/understand with text alone.]

~~~
rubatuga
To the first point, yes, I'm just being pedantic.

But for the second point, how is that relevant? I'm not sure how this helps,
because a) this has nothing to do with the display, i.e. we could modify an
image to show the same effect on all displays, and b) gamut has not become
wider at all.

~~~
jacobolus
It has to do with the display because recent displays can get much brighter
than displays of the past.

Instead of reaching a luminance of 80 of 100 nits, they can now reach 1000 or
even 5000 nits.

What this means is that it is now possible to set the target “diffuse white”
luminance to be something like 200 nits, but then still be able to produce
colors in which any (or all) of the primaries is 5x more intense than that.

Until recently, it has been assumed that display white is (100%, 100%, 100%),
whether the maximum display brightness happens to be 50 or 500 nits. But when
displays can get to 1000 nits or beyond, that is no longer a tenable
assumption.

* * *

If you have a conventional display (say a non-HDR TV or smartphone) you could
still crank the display brightness all the way up but only show images or
video where diffuse white was set to 20% of maximum (or whatever), and thereby
achieve an expanded gamut for bright colors. But in practice few people if any
ever did that.

You can even do the same thing with a painting: if you make your painting
overall darker than usual, place it on a dark gray wall, and then shine a very
intense light on it, you can give your painting more dynamic range and a
larger color gamut than you would otherwise be able to achieve with the same
materials. This technique has been used to good effect by some (but relatively
few) master painters, photographers, etc.

~~~
rubatuga
I'll try to summarize: if we are not physically getting a new combination of
RGB cone stimulation ratios in our retinas, then the colour gamut has not
become "wider". When compared to a SDR display, your HDR display that you
mention above cannot display a RGB cone stimulation ratio that is not already
achievable on the SDR display.

------
dk8996
In general, Yes this is a big issue when dealing with colors. One example
where you run into this; is when you'r reducing color space from say 256 to
say 12 color space (most common colors). Using LAB really helps but still not
perfect.

------
mark-r
The post lost some credibility right away when they spelled "gamut" with two
m's.
[https://en.wikipedia.org/wiki/Gamut](https://en.wikipedia.org/wiki/Gamut)

The big rainbow has some problems too. It should be obvious by looking at the
transition line from color to black-and-white that brightnesses are
inaccurate. There's another problem that I don't ever see discussed - the
yellow, cyan, and magenta colors really are brighter than the rest of the
colors because of the way our monitors work, they have twice as many photons
because they emit two different primary colors.

