@@ -798,7 +798,7 @@ Representing Colors: the <<color>> type</h2>
798798 * ''oklch()'' ,
799799 which specifies an Oklab color
800800 by Oklab Lightness, Chroma, and hue
801- using the [[#ok-lab|OKLCH ]] cylindrical coordinate model.
801+ using the [[#ok-lab|Oklch ]] cylindrical coordinate model.
802802<!--
803803 * ''device-cmyk()'' ,
804804 which specifies a device-specific CMYK color
@@ -2761,7 +2761,7 @@ Examples of HWB Colors</h3>
27612761-->
27622762
27632763<h2 id='lab-colors'>
2764- Device-independent Colors: CIE Lab and LCH, Oklab and OKLCH </h2>
2764+ Device-independent Colors: CIE Lab and LCH, Oklab and Oklch </h2>
27652765
27662766<h3 id="cie-lab">CIE Lab and LCH</h3>
27672767
@@ -2910,11 +2910,11 @@ Device-independent Colors: CIE Lab and LCH, Oklab and OKLCH</h2>
29102910
29112911 This does not help with hue curvature, however.
29122912
2913- <h3 id="ok-lab">Oklab and OKLCH </h3>
2913+ <h3 id="ok-lab">Oklab and Oklch </h3>
29142914
29152915 Recently, <dfn value export for="oklab()">Oklab</dfn> ,
29162916 an improved Lab-like space has been developed [[!Oklab]] .
2917- The corresponding polar form is called <dfn value export for="oklch()">OKLCH </dfn> .
2917+ The corresponding polar form is called <dfn value export for="oklch()">Oklch </dfn> .
29182918 It was produced by numerical optimisation
29192919 of a large dataset of visually similar colors,
29202920 and has improved hue linearity,
@@ -2941,12 +2941,12 @@ Device-independent Colors: CIE Lab and LCH, Oklab and OKLCH</h2>
29412941 The illuminant is [=D65=] , the same white point
29422942 as most RGB color spaces.
29432943
2944- OKLCH has the same L axis as Oklab,
2944+ Oklch has the same L axis as Oklab,
29452945 but uses polar coordinates C (chroma) and H (hue).
29462946
29472947 Note: Unlike CIE LCH, where Chroma can reach values of 200 or more,
2948- OKLCH Chroma ranges to 0.5 or so.
2949- The hue angles between CIE LCH and OKLCH are broadly similar,
2948+ Oklch Chroma ranges to 0.5 or so.
2949+ The hue angles between CIE LCH and Oklch are broadly similar,
29502950 but not identical.
29512951
29522952 <figure id="CIELCH-blue-hueshift">
@@ -2958,10 +2958,10 @@ Device-independent Colors: CIE Lab and LCH, Oklab and OKLCH</h2>
29582958 </figcaption>
29592959 </figure>
29602960
2961- <figure id="OKLCH -blue-no-hueshift">
2961+ <figure id="Oklch -blue-no-hueshift">
29622962 <img src="images/OKLCH-blue-slice.png" width="2485" height="1824"
2963- alt="diagram showing hue constancy in OKLCH ">
2964- <figcaption> A constant OKLCH hue slice,
2963+ alt="diagram showing hue constancy in Oklch ">
2964+ <figcaption> A constant Oklch hue slice,
29652965 showing the sRGB gamut around primary blue.
29662966 The visual hue remains constant.
29672967 </figcaption>
@@ -3156,10 +3156,10 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
31563156 Using commas inside these functions is an error.
31573157
31583158<h3 id="specifying-oklab-oklch">
3159- Specifying Oklab and OKLCH : the ''oklab()'' and ''oklch()'' functional notations</h3>
3159+ Specifying Oklab and Oklch : the ''oklab()'' and ''oklch()'' functional notations</h3>
31603160
31613161
3162- CSS allows colors to be directly expressed in Oklab and OKLCH .
3162+ CSS allows colors to be directly expressed in Oklab and Oklch .
31633163
31643164 <pre class='prod'>
31653165 <dfn>oklab()</dfn> = oklab( [ <<percentage>> | <<number>> | none]
@@ -3268,7 +3268,7 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
32683268 parsing/color-valid.html
32693269 </wpt>
32703270
3271- The first argument specifies the OKLCH Lightness,
3271+ The first argument specifies the Oklch Lightness,
32723272 interpreted identically to the Lightness argument of ''oklab()'' .
32733273
32743274 The second argument is the chroma.
@@ -3292,9 +3292,9 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
32923292 separated by a slash,
32933293 representing the [=alpha component=] .
32943294
3295- If the chroma of an OKLCH color is ''0%'' ,
3295+ If the chroma of an Oklch color is ''0%'' ,
32963296 the hue component is [=powerless=] .
3297- If the lightness of an OKLCH color is ''0%'' ,
3297+ If the lightness of an Oklch color is ''0%'' ,
32983298 both the hue and chroma components are [=powerless=] .
32993299
33003300
@@ -3317,7 +3317,7 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
33173317
33183318
33193319<h3 id='lab-to-lch'>
3320- Converting Lab or Oklab colors to LCH or OKLCH colors</h3>
3320+ Converting Lab or Oklab colors to LCH or Oklch colors</h3>
33213321
33223322 Conversion to the polar form is trivial:
33233323
@@ -3332,11 +3332,11 @@ although the visual color does not change from being on the neutral axis,
33323332small changes to the values can result in the reported hue angle swinging about wildly
33333333and being essentially random.
33343334In CSS, this means the hue is [=powerless=] ,
3335- and treated as [=missing=] when converted into LCH or OKLCH ;
3335+ and treated as [=missing=] when converted into LCH or Oklch ;
33363336in non-CSS contexts this might be reflected as a missing value, such as NaN.
33373337
33383338<h3 id='lch-to-lab'>
3339- Converting LCH or OKLCH colors to Lab or Oklab colors</h3>
3339+ Converting LCH or Oklch colors to Lab or Oklab colors</h3>
33403340
33413341 Conversion to the rectangular form is trivial:
33423342
@@ -4321,7 +4321,7 @@ Color Space for Interpolation</h3>
43214321 * If colors need to be evenly spaced perceptually (such as in a gradient),
43224322 the Oklab color space (and the older Lab), are designed to be perceptually uniform.
43234323 * If avoiding graying out in color mixing is desired, i.e. maximizing chroma throughout the transition,
4324- OKLCH (and the older LCH) work well for that.
4324+ Oklch (and the older LCH) work well for that.
43254325 * Lastly, compatibility with legacy Web content may be the most important consideration.
43264326 The sRGB color space, which is neither linear-light nor perceptually uniform, is the choice here,
43274327 even though it produces poorer results (overly dark or greyish mixes).
@@ -4449,13 +4449,13 @@ Interpolating with Missing Components</h3>
44494449
44504450 <div class="example" id="ex-analogous-hue">
44514451 For example, if these two colors
4452- are to be interpolated in OKLCH ,
4452+ are to be interpolated in Oklch ,
44534453 the missing hue in the CIE LCH color
4454- is analogous to the hue component of OKLCH
4454+ is analogous to the hue component of Oklch
44554455 and will be carried forward
44564456 while the missing blue component
44574457 in the second color
4458- is not analogous to any OKLCH component
4458+ is not analogous to any Oklch component
44594459 and will not be carried forward:
44604460
44614461 <pre>
@@ -4799,13 +4799,13 @@ Clipping</h4>
47994799 the amount of blue light is three times the amount of green,
48004800 while the amount of red light is half that of green.
48014801 There is six times as much blue primary as red.
4802- In OKLCH , this color has a hue angle of 265.1°
4802+ In Oklch , this color has a hue angle of 265.1°
48034803
48044804 If we now clip this color
48054805 to bring it into gamut for sRGB,
48064806 we get <code> color(srgb-linear 0.5 1 1)</code> .
48074807 The amount of blue light is the same as green.
4808- In OKLCH , this color has a hue angle of 196.1°,
4808+ In Oklch , this color has a hue angle of 196.1°,
48094809 a substantial change of 69°.
48104810 </div>
48114811
@@ -4843,7 +4843,7 @@ Chroma Reduction</h4>
48434843 In this example, Display P3 primary yellow
48444844 (<code> color(display-p3 1 1 0)</code> )
48454845 is being mapped to an sRGB display.
4846- The gamut mapping color space is OKLCH .
4846+ The gamut mapping color space is Oklch .
48474847
48484848 <pre class="lang-css"> color(display-p3 1 1 0)</pre>
48494849 is
@@ -4864,7 +4864,7 @@ Chroma Reduction</h4>
48644864 </pre>
48654865 <figure id="gamutmap-p3-yellow">
48664866 <img src="./images/slice-ok-110.23.svg" alt="" width="776" height="565" >
4867- <figcaption> A constant-hue slice of OKLCH color space.
4867+ <figcaption> A constant-hue slice of Oklch color space.
48684868 The vertical axis represents lightness,
48694869 the horizontal axis is chroma.
48704870 The color to be mapped,
@@ -4917,9 +4917,9 @@ Excessive Chroma Reduction</h4>
49174917 Simple gamut mapping in CIE LCH would give unsatisfactory results.
49184918 </div>
49194919
4920- <div class="example" id="OKLCH -p3-yellow-noclip">
4920+ <div class="example" id="Oklch -p3-yellow-noclip">
49214921 In this example, Display P3 primary yellow (<code> color(display-p3 1 1 0</code> )
4922- has the chroma progressively reduced, but this time in OKLCH color space.
4922+ has the chroma progressively reduced, but this time in Oklch color space.
49234923 <figure>
49244924 <img src="./images/p3-yellow-oklab.svg" alt="" width="700">
49254925 <figcaption>
@@ -4931,7 +4931,7 @@ Excessive Chroma Reduction</h4>
49314931 the Display P3 red, green and blue components.
49324932 </figcaption>
49334933 </figure>
4934- It can be seen that reduction in OKLCH chroma is better behaved.
4934+ It can be seen that reduction in Oklch chroma is better behaved.
49354935 Colors do not go outside the Display P3 gamut, and the resulting
49364936 gamut-mapped yellow has good chroma.
49374937 Simple gamut mapping in OK LCH would give acceptable results.
@@ -4974,9 +4974,9 @@ Chroma Reduction with Local Clipping</h4>
49744974 Gamut mapping in CIE LCH with local clip would give acceptable results.
49754975 </div>
49764976
4977- <div class="example" id="OKLCH -p3-yellow-clip">
4977+ <div class="example" id="Oklch -p3-yellow-clip">
49784978 In this example, Display P3 primary yellow (<code> color(display-p3 1 1 0</code> )
4979- has the chroma progressively reduced, but this time in OKLCH color space
4979+ has the chroma progressively reduced, but this time in Oklch color space
49804980 and with the local clip modification.
49814981 <figure>
49824982 <img src="./images/p3-yellow-oklab-clip.svg" alt="" width="700">
@@ -4989,7 +4989,7 @@ Chroma Reduction with Local Clipping</h4>
49894989 the Display P3 red, green and blue components.
49904990 </figcaption>
49914991 </figure>
4992- It can be seen that reduction in OKLCH chroma,
4992+ It can be seen that reduction in Oklch chroma,
49934993 which was already good,
49944994 is further improved by the local clip modification.
49954995 Simple gamut mapping in CIE LCH with local clip would give excellent results.
@@ -5019,15 +5019,15 @@ Deviations from Perceptual Uniformity: Hue Curvature</h4>
50195019 </figcaption>
50205020 </figure>
50215021
5022- Using OKLCH color space
5022+ Using Oklch color space
50235023 and deltaEOK distance metric
50245024 avoids this issue
50255025 at all hue angles.
50265026
50275027 <figure>
50285028 <img src="./images/OKLCH-blue-slice.png" alt="">
50295029 <figcaption>
5030- A constant-hue slice of OKLCH color space,
5030+ A constant-hue slice of Oklch color space,
50315031 at a hue angle of 264.06°
50325032 corresponding to sRGB primary blue.
50335033 The vertical axis is Lightness, the horizontal axis is Chroma.
@@ -5072,7 +5072,7 @@ CSS Gamut Mapping to an RGB Destination</h3>
50725072 colors inside the destination gamut
50735073 could be changed.
50745074
5075- CSS gamut mapping occurs in the <a href="#ok-lab">OKLCH color space</a> ,
5075+ CSS gamut mapping occurs in the <a href="#ok-lab">Oklch color space</a> ,
50765076 and the color difference formula used is <a href="#color-difference-OK">deltaEOK</a> .
50775077 The local-MINDE improvement is used.
50785078
@@ -5100,8 +5100,8 @@ CSS Gamut Mapping to an RGB Destination</h3>
51005100 exceeds one JND.
51015101 Then returned the clipped version of the color as the mapped result.
51025102
5103- For the OKLCH color space,
5104- one JND is is an OKLCH difference of 0.02.
5103+ For the Oklch color space,
5104+ one JND is is an Oklch difference of 0.02.
51055105
51065106<h4 id="binsearch">
51075107Sample Pseudocode for the Binary Search Gamut Mapping Algorithm with Local MINDE</h4>
@@ -5112,18 +5112,18 @@ Sample Pseudocode for the Binary Search Gamut Mapping Algorithm with Local MINDE
51125112 to be in gamut of a destination color space |destination|:
51135113
51145114 <ol>
5115- <li> if |destination| has no gamut limits (XYZ-D65, XYZ-D50, Lab, LCH, Oklab, OKLCH ) return |origin|
5116- <li> let |origin_OKLCH | be |origin| converted
5117- from |origin color space| to the OKLCH color space</li>
5118- <li> if the Lightness of |origin_OKLCH | is greater than or equal to 100%,
5115+ <li> if |destination| has no gamut limits (XYZ-D65, XYZ-D50, Lab, LCH, Oklab, Oklch ) return |origin|
5116+ <li> let |origin_Oklch | be |origin| converted
5117+ from |origin color space| to the Oklch color space</li>
5118+ <li> if the Lightness of |origin_Oklch | is greater than or equal to 100%,
51195119 return { 1 1 1 origin.alpha } in |destination|</li>
5120- <li> if the Lightness of |origin_OKLCH | is less than than or equal to 0%,
5120+ <li> if the Lightness of |origin_Oklch | is less than than or equal to 0%,
51215121 return { 0 0 0 origin.alpha } in |destination|</li>
51225122 <li> let inGamut(|color|) be a function which returns true if, when passed a color,
51235123 that color is inside the gamut of |destination|.
51245124 For HSL and HWB, it returns true if the color is inside the gamut of sRGB.
51255125 </li>
5126- <li> if inGamut(|origin_OKLCH |) is true, convert |origin_OKLCH | to |destination| and return it as the gamut mapped color</li>
5126+ <li> if inGamut(|origin_Oklch |) is true, convert |origin_Oklch | to |destination| and return it as the gamut mapped color</li>
51275127 <li> otherwise, let delta(|one|, |two|) be a function which returns the deltaEOK of color |one| compared to color |two|</li>
51285128 <li> let |JND| be 0.02</li>
51295129 <li> let |epsilon| be 0.0001</li>
@@ -5134,12 +5134,12 @@ Sample Pseudocode for the Binary Search Gamut Mapping Algorithm with Local MINDE
51345134 and returns the result
51355135 </li>
51365136 <li> set |min| to zero</li>
5137- <li> set |max| to the OKLCH chroma of |origin_OKLCH |</li>
5137+ <li> set |max| to the Oklch chroma of |origin_Oklch |</li>
51385138 <li> let |min_inGamut| be a boolean that represents when |min| is still in gamut, and set it to true
51395139 <li> while (|max| - |min| is greater than |epsilon|) repeat the following steps
51405140 <ol>
51415141 <li> set |chroma| to (|min| + |max|) /2</li>
5142- <li> set |current| to |origin_OKLCH | and then set the chroma component to |chroma|</li>
5142+ <li> set |current| to |origin_Oklch | and then set the chroma component to |chroma|</li>
51435143 <li> if |min_inGamut| is true and also if inGamut(|current|) is true, set |min| to |chroma| and continue to repeat these steps</li>
51445144 <li> otherwise, if inGamut(|current|) is false carry out these steps:
51455145 <ol>
@@ -5267,12 +5267,12 @@ Resolving Lab and LCH values</h3>
52675267 </div>
52685268
52695269<h3 id="resolving-oklab-oklch-values">
5270- Resolving Oklab and OKLCH values</h3>
5270+ Resolving Oklab and Oklch values</h3>
52715271
52725272 This applies to ''oklab()'' and ''oklch()'' values.
52735273
52745274 The computed and used value
5275- is the corresponding Oklab or OKLCH color
5275+ is the corresponding Oklab or Oklch color
52765276 paired with the specified alpha channel
52775277 (as a <<number>> , not a <<percentage>> ;
52785278 and defaulting to opaque if unspecified).
@@ -5626,7 +5626,7 @@ Serializing Lab and LCH values</h3>
56265626 </div>
56275627
56285628<h3 id="serializing-oklab-oklch">
5629- Serializing Oklab and OKLCH values</h3>
5629+ Serializing Oklab and Oklch values</h3>
56305630
56315631 The serialized form of ''oklch()'' and ''oklab()'' values
56325632 is derived from the [=computed value=]
@@ -6353,11 +6353,11 @@ Changes</h2>
63536353</h3>
63546354
63556355<ul>
6356- <li> Added gamut mapping section and defined a CSS gamut mapping algorithm as chroma reduction in OKLCH with local MINDE.</li>
6356+ <li> Added gamut mapping section and defined a CSS gamut mapping algorithm as chroma reduction in Oklch with local MINDE.</li>
63576357 <li> Computed value of color(xyz ...) is color(xyz-d65 ...)</li>
63586358 <li> Added srgb-linear to interpolation color spaces</li>
63596359 <li> Updated Changes from Colors 3 section</li>
6360- <li> Added Resolving Oklab and OKLCH values section</li>
6360+ <li> Added Resolving Oklab and Oklch values section</li>
63616361 <!-- to 19 Nov 2021 -->
63626362 <li> Added srgb-linear color space</li>
63636363 <li> Moved @color-profile and device-cmyk to level 5 per CSSWG resolution</li>
@@ -6370,9 +6370,9 @@ Changes</h2>
63706370 <li> Removed fallback colors from device-cmyk</li>
63716371 <li> Host syntax that does not declare a default now uses Oklab by default</li>
63726372 <li> Added sample code for deltaE OK</li>
6373- <li> Added sample conversion code for OKlab and OKLCH </li>
6373+ <li> Added sample conversion code for OKlab and Oklch </li>
63746374 <li> Added oklab() and oklch() functions</li>
6375- <i> Added description of Oklab and OKLCH </i>
6375+ <i> Added description of Oklab and Oklch </i>
63766376 <li> Added description of CIE LCH deficiencies</li>
63776377 <li> Allowed all components of a color to be "missing" via the ''none'' keyword,
63786378 defined when components are "powerless" and automatically become missing in some cases,
0 commit comments