Skip to content

Commit 5218add

Browse files
committed
[css-color-4] fix #4477 CIE L* uses a percentage
1 parent 66d84cd commit 5218add

File tree

1 file changed

+31
-29
lines changed

1 file changed

+31
-29
lines changed

css-color-4/Overview.bs

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1685,13 +1685,16 @@ Device-independent Colors: Lab and LCH
16851685
CIE L*a*b*, because that is what people write in practice -->
16861686

16871687
Lab is a rectangular coordinate system with a central Lightness axis.
1688-
L=0 is deep black (no light at all)
1689-
while L=100 is a diffuse white
1688+
This value is usually written as a unitless number;
1689+
for compatibility with the rest of CSS, it is written as a percentage.
1690+
100% means an L value of 100, not 1.0.
1691+
L=0% is deep black (no light at all)
1692+
while L=100% is a diffuse white
16901693
(the illuminant is D50 white, a standardized daylight spectrum with a color temperature of 5000K,
16911694
as reflected by a perfect diffuse reflector).
16921695
Values greater than 100 would correspond to specular highlights,
16931696
but their precise color is undefined in this specification.
1694-
Usefully, L=50 is mid gray, by design,
1697+
Usefully, L=50% is mid gray, by design,
16951698
and equal increments in L are evenly spaced visually:
16961699
the Lab color space is intended to be perceptually uniform.
16971700
The a and b axes convey hue;
@@ -1715,54 +1718,52 @@ Device-independent Colors: Lab and LCH
17151718
is the industry standard chromatic adaptation transform,
17161719
and is easy to calculate as it is a simple matrix multiplication.
17171720

1721+
LCH has the same L axis as Lab,
1722+
but uses polar coordinates C (chroma) and H (hue).
1723+
C is the geometric distance from the L axis
1724+
and H is the angle from the positive a axis,
1725+
with positive angles being more clockwise.
17181726

1719-
In Lab if two colors have the same L value,
1727+
In Lab and LCH, if two colors have the same L value,
17201728
they appear to have the same visual lightness--
17211729
regardless of how different their hues are.
1722-
This is different from HSL,
1723-
where for example blue (#00F) and yellow (#FF0) have the same HSL lightness
1724-
despite yellow being obviously far lighter than blue.
17251730

17261731
17281733

1729-
LCH has the same L axis as Lab,
1730-
but uses polar coordinates C (chroma) and H (hue).
1731-
C is the geometric distance from the L axis
1732-
and H is the angle from the positive a axis,
1733-
with positive angles being more clockwise.
1734-
1735-
Note: The Lightness axis in Lab should not be confused with the L axis in HSL.
1734+
Note: The Lightness axis in Lab and LCH should not be confused with the L axis in HSL.
17361735
For example, in HSL, the sRGB colors blue (#00F) and yellow (#FF0)
17371736
have the same value of L even though visually, blue is much darker.
17381737
In Lab, if two colors have the same measured L value,
17391738
they have identical visual lightness.
17401739
HSL and related polar RGB models were developed
1740+
in an attempt
17411741
to give similar usability benefits for RGB that LCH gave to Lab.
17421742

17431743

17441744

17451745

1746-
Specifying Lab and LCH: the lab() and lch() functional notations
1746+
Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations
17471747
17481748

17491749
CSS allows colors to be directly expressed in Lab and LCH.
17501750

17511751
1752-
lab() = lab( <<number>> <> <> [ / <> ]? )
1752+
lab() = lab( <<percentage>> <> <> [ / <> ]? )
17531753
17541754

17551755
The first argument specifies the CIE Lightness.
1756-
This is typically a number between ''0''
1756+
This is typically a number between ''0%''
17571757
(representing black)
1758-
and ''100''
1758+
and ''100%''
17591759
(representing white),
1760-
similar to the lightness argument of ''hsl()''.
1760+
17611762
However, CIE Lightness can exceed this range on some systems,
17621763
with extra-bright whites using a lightness up to ''400''.
1763-
Values less than ''0'' must be clamped to ''0'' at computed-value time;
1764+
Values less than ''0%'' must be clamped to ''0%'' at computed-value time;
17641765
values greater than
1765-
''100'' are permitted (for forwards compatibility with High Dynamic Range (HDR),
1766+
''100%'' are permitted (for forwards compatibility with High Dynamic Range (HDR),
17661767
and must not be clamped.
17671768

17681769
The second and third arguments are the distances along the "a" and "b" axises
@@ -1778,7 +1779,7 @@ Specifying Lab and LCH: the lab() and lch() functional notations
17781779
and interpreted identically to the <> in ''rgb()''.
17791780

17801781
1781-
lch() = lch( <<number>> <> <> [ / <> ]? )
1782+
lch() = lch( <<percentage>> <> <> [ / <> ]? )
17821783
17831784

17841785
The first argument specifies the CIE Lightness,
@@ -1792,13 +1793,14 @@ Specifying Lab and LCH: the lab() and lch() functional notations
17921793
If the provided value is negative,
17931794
it is clamped to ''0'' at computed-value time.
17941795

1795-
The third argument is the hue.
1796-
It's interpreted identically to the <> argument of ''hsl()'',
1797-
but doesn't map hues to angles in the same way.
1798-
Instead, ''0deg'' points along the positive "a" axis (toward red),
1799-
''90deg'' points along the positive "b" axis (toward yellow),
1800-
''180deg'' points along the negative "a" axis (toward green),
1801-
and ''270deg'' points along the negative "b" axis (toward blue).
1796+
The third argument is the hue angle.
1797+
It's interpreted similarly to the <> argument of ''hsl()'',
1798+
but doesn't map hues to angles in the same way
1799+
because they are evenly spaced perceptually.
1800+
Instead, ''0deg'' points along the positive "a" axis (toward purplish red),
1801+
''90deg'' points along the positive "b" axis (toward mustard yellow),
1802+
''180deg'' points along the negative "a" axis (toward greenish cyan),
1803+
and ''270deg'' points along the negative "b" axis (toward sky blue).
18021804
If the provided value is negative,
18031805
or is greater than or equal to ''360deg'',
18041806
it is set to the value modulo 360.

0 commit comments

Comments
 (0)