Explore
For Enterprise
Join for Free
Log In

Arts et humanités
Business
Informatique
Science des données
Technologies de l'information
santé
Mathématiques et logique
Développement personnel
Sciences physiques et ingénierie
Sciences sociales
Apprentissage des langues
Diplômes
Certificats

Explorez l'intégralité de Coursera

Parcourir
Rechercher
For Enterprise
Connexion
Inscrivez-vous gratuitement

Color Space: CIE Lch/ HCL

Loading...

Information Visualization: Applied Perception

Université de New York, Tandon School of Engineering

4.8 (40 notes) | 1.3K étudiants inscrits

Cours 2 de 4 dans Visualisation d'informations Spécialisation

This module aims at introducing fundamental concepts of visual perception applied to information visualization. These concepts help the student ideate and evaluate visualization designs in terms of how well they leverage the capabilities of the human perceptual machinery.

Visualiser le programme de cours

Avis

4.8 (40 notes)

5 stars
34 ratings
4 stars
6 ratings

RB

Mar 27, 2019

Excellent course for someone who is getting into data visualisation or business intelligence tools. Very well curated for the best of learning experience. Thanks a lot to Enrico Bertini and others!

TA

Nov 13, 2018

Great course with essential material! The content is presented in a very thorough and engaging way by Bertini.

À partir de la leçon

Color Perception and Color Spaces

Visualizing data with color7:13

Few Examples: Misusing Color in Visualization5:30

Color Perception15:39

Color Specification4:37

Color Space: RGB7:37

Color Space: HSV / HSL6:20

Color Space: CIE Lab/ Luv Part 14:13

Color Space: CIE Lab/ Luv Part 27:53

Color Space: CIE Lch/ HCL9:06

Quick Summary4:37

Enseigné par

Enrico Bertini
Associate Professor
Cristian Felix
PhD. Candidate

Transcription

Now we are ready to introduce the last color space I want to talk about, and

probably the best one.

So this is the CIE LCh,

sometimes also just called HCL space.

And this is the color space that

integrates all the good properties that we want to have.

So we want to have, as we said, uniformity, but

also intuitiveness or usability.

Okay, so how is this color space created?

Well, the details are a little complicated, but

you have to think of this as a new transformation from the CIE lab

color space into a new color space that is defined in cylindrical coordinates.

Very similar to what we have seen before with the HSV space, but

with the main difference that now this space is perceptually uniform.

Okay, so more precisely, the a and b components of the lab or

of the CIE lab space are converted into new components.

The first one is called chroma.

And the chroma corresponds roughly to saturation,

so how vivid or colorful the color is.

The next one is hue, and is expressed as an angle,

the angle part of the cylindrical space, and

it represents the hue, the name of the color.

Red, green, blue, yellow and so on.

And the last one is unchanged, which is the lightness component,

which is always the same.

So let me show you a few visual representation of this space.

This is one possible representation of the 3D space

that is defined by the HCL color space.

So in this particular diagram,

what you have is that the lightness is changing on the vertical direction.

And then, you have the chroma component,

which is the saturation that is changing on the radial direction.

And then, you have the angle that is changing the hue.

And you can see here, as the angle is changing, the color hue is changing.

As you move radially, you have more or less saturated colors.

And as you move from bottom to top, you have darker and brighter colors.

Here is another diagram that shows the same idea.

So you go from left to right.

The lightness changes.

And for each of these slices,

as you move from the center to the outer rims,

you see that the color is changing in terms of saturation.

And the angle is changing the hue.

One thing you should notice here that is more clear from this diagram,

is that once again, in

uniform color spaces like this one, when one parameter is changing,

the range, the area of the colors

that are that is available for that specific parameter, changes.

So in this particular case, as we change the lightness,

the all range is changing from being very small ones to very big ones.

And also the shape is changing.

This is going to be even clearer in a moment when I show you a new demo.

Here, I'm using, once again, one of the color pickers that I used before,

with the main difference that now, rather than using the Lab space,

I'm showing the Lch space, the new space that I've just described.

So as you can see here, once again,

we have three sliders corresponding to the three axis of the space.

But now, we have the L, which is luminance, c which is chroma, or

the saturation, and h which is hue.

So let's see how the color changes as I move the sliders and

move through the space defined by the Lch axis.

So luminance is always the same.

So it's getting darker and lighter, okay?

So but now, look at this.

When I change the chroma component,

the color is getting more saturated or less saturated.

And when I'm changing the u component, I'm basically

going through by keeping constant the lightness and

the saturation, I get lots of different colors.

So we have magenta, orange, red,

green, blue, purple, red, and so on.

Okay, so now, let me show you How

the Lch color space looks like with the other color picker that we used before.

Okay, here, we have the other color picker that we used before.

But once again, rather than showing the CIE lab color space,

now we are showing the hue, chroma, and lightness.

Which is basically the same as what we call CLCH, okay?

So here, in this representation, we have once again two

axis that are mapped to two of the axis of the color space.

And another axis that can be changed by dragging the value here,

changing the value of this slider.

Okay, let me show you a few things.

First of all, here now, by default, we have on the x-axis,

we have the hue component, and on the y-axis, we have the lightness component.

And as you can see, when we go from top to bottom,

the colors are always getting from dark,

very dark, to very light, as we may expect.

And as we go from left to right,

we have colors that have the same level of lightness, okay?

So as you can see, with the color picker here, I'm picking colors that go

through many values of the hue spectrum.

So see the colors here?

And they all have exactly the same lightness.

So if I move the color picker here, you can see that they're all lighter, okay?

Exactly the same amount of lightness.

And they go through several values of hue, okay?

Another thing to notice, as we have seen before,

is that as we change one of these values, so here,

I'm changing the chroma, not all possible values in the HL space are available.

Look, there are some holes.

And this is almost always true.

Let me see how this looks like when I change the axis.

So, in this case, now I have the chroma

component on the x-axis, and the lightness component on the y-axis.

And now, I'm changing the u-axis here.

As you can see, the are different hues, but

also the area that is covered is different.

It changes as I change the slider, okay?

And exactly the same is true when I have the hue component on the x-axis,

and the chroma component on the y-axis.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play

Coursera
À propos
Direction
Carrières
Catalogue
Certificats
Certificats MasterTrack™
Diplômes
For Enterprise
For Government

Communauté
Learners
Partners
Developers
Beta Testers
Translators

Se connecter
Blog
Facebook
LinkedIn
Twitter
Instagram
YouTube
Blog Tech

Plus
Conditions
Confidentialité
Aide
Accessibilité
Presse
Contact
Répertoire
Filiales