feat: improvements on glossary Color Space (#33407)

* feat: improvements * feat: improvements on sRGB section * Apply suggestions from code review --------- Co-authored-by: Hamish Willee <[email protected]>
mdn · Jun 7, 2024 · e00b9c7 · e00b9c7
1 parent 58d3a9a
commit e00b9c7
Showing 1 changed file with 13 additions and 12 deletions.
diff --git a/files/en-us/glossary/color_space/index.md b/files/en-us/glossary/color_space/index.md
@@ -6,11 +6,11 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
-**Color spaces** are named organizations of colors for underlying color models of coordinate-based color arrangements. A color model defines how the components of a color (for example, the `h`, `w`, and `b` channels of an [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb) color) relate to a color space. Color spaces are three-dimensional grids that represent colors. Each dimension (or axis) corresponds to a different channel. Colors can be expressed in multiple color spaces, or transformed from one color space to another, while still looking the same.
+**Color spaces** are named organizations of colors for underlying color models of coordinate-based color arrangements. A color model defines how the components of a color (for example, the `h`, `w`, and `b` channels of an [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb) color) relate to a color space. Most color spaces are three- or four- dimensional grids that represent colors. Each dimension (or axis) corresponds to a different channel. Colors can be expressed in multiple color spaces, and can be transformed from one color space to another, while still looking the same.
 
-Color spaces categorize and define specific ranges of colors. Each color space is defined by a mathematical model and associated rule set. Each color space has a defined [gamut](/en-US/docs/Glossary/Gamut), which refers to the specific range of colors it can represent. These rules enable consistent and reproducible color representation across different devices and software.
+Color spaces categorize and define specific ranges of colors. Each color space is defined by a mathematical model and associated rule set. Each color space has a defined {{glossary("Gamut", "gamut")}}, which refers to the specific range of colors it can represent. These rules enable consistent and reproducible color representation across different devices and software.
 
-The _sRGB_ color space (standard red, green, and blue) was created for the web, but we are no longer limited to this color space. [CSS Color Module Level 4](https://drafts.csswg.org/css-color) specifies several predefined color spaces, and [CSS Color Module Level 5](https://drafts.csswg.org/css-color-5/) goes further, specifying features for defining custom color spaces.
+The _sRGB_ color space (standard red, green, and blue) was created for the web, but we are no longer limited to this color space. [CSS Color Module Level 4](https://drafts.csswg.org/css-color-4) specifies several predefined color spaces, and [CSS Color Module Level 5](https://drafts.csswg.org/css-color-5/) goes further, specifying features for defining custom color spaces.
 
 ## Named color spaces
 
@@ -20,13 +20,13 @@ Color spaces are either [rectangular or polar](https://ericportis.com/posts/2024
 
 ### RGB color spaces
 
-RGB is a color model that represents colors as mixtures of three underlying components — red, green, and blue color channels — that create various hues when combined. sRGB, or "Standard RGB", is the underlying color space for {{Glossary("RGB")}} colors. sRGB is intended as a common color space for the creation of images for viewing on the Internet and World Wide Web (WWW). sRGB is primarily used for displaying colors on computer screens, including laptops and smartphones.
+RGB is a color model that represents colors as mixtures of three underlying components — red, green, and blue color channels — that create various hues when combined. sRGB, or "Standard RGB", is the underlying color space for {{Glossary("RGB")}} colors. sRGB is intended to codify the display specification of PC and the {{glossary("world wide web", "Web")}} based imaging systems. It is now usually the assumed color space for those without tagged or without an embedded color profile.
 
 There are several RGB color spaces, like the _Adobe RGB_ color space, that can represent a wider {{glossary("gamut")}} of color than the _sRGB_ color space. The coordinates in _sRGB_ and _Adobe RGB_ (`a98-rgb`) are different. There are many ways to describe the RGB components of a color. In {{Glossary("CSS")}} they can be represented as a single 24-bit integer in hexadecimal notation (for example, `#add8e6` is light blue), or in [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) functional notation as three separate numbers between 0 and 255 (for example, `rgb(46 139.5 87)`).
 
 CSS `<color>` values in the sRGB color spaces include {{cssxref("hex-color")}}, {{cssxref("named-color")}}, {{cssxref("color_value/rgb", "rgb()")}}, {{cssxref("color_value/hsl", "hsl()")}} (hue, saturation, lightness), and {{cssxref("color_value/hwb", "hwb()")}} (hue, whiteness, blackness). There are also the `srgb`, `srgb-linear`, `a98-rgb`, and `prophoto-rgb` color spaces for the [`color()`](/en-US/docs/Web/CSS/color_value/color) function.
 
-The HSV (hue, saturation, and value) color space, and its synonym HSB (hue, saturation, and brightness), are represented in CSS as [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb). Named colors are simply keywords mapped to specific hex values. Converting these various color notations to sRGB is straightforward mathematically. Note that {{cssxref("&lt;color&gt;","currentcolor","#currentcolor_keyword")}} can be any color, it is not restricted to sRGB.
+The HSV (hue, saturation, and value) color space, and its synonym HSB (hue, saturation, and brightness), are represented in CSS as [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb). Named colors are simply keywords mapped to specific hex values. Converting these various color notations to sRGB is straightforward mathematically. Note that {{cssxref("&lt;color&gt;","currentcolor","#currentcolor_keyword")}} can be any color — it is not restricted to sRGB.
 
 The `rgb()` color function is not the only color function that can represent the _sRGB_ color space. Cylindrical coordinate systems like the [`HSL`](/en-US/docs/Web/CSS/color_value/hsl) (_hue-saturation-lightness_) or [`HWB`](/en-US/docs/Web/CSS/color_value/hwb) (_hue-whiteness-blackness_) color models are also used to represent a sRGB color on the web.
 
@@ -62,11 +62,11 @@ The CIELAB (or CIELab) color space, also referred to as L\*a\*b* (or Lab* for sh
 
 Lab is a rectangular coordinate system, with a central lightness `L` axis. Positive values along the `a` axis are a purplish red while negative values are the complement: green. Positive values along the `b` axis are yellow and negative are blue/violet. Desaturated colors have small values for `a` and `b` with greater absolute values being more saturated.
 
-CIELab color functions include {{CSSXref("color_value/lab", "lab()")}} (lightness, a-axis, b-axis) and {{CSSXref("color_value/lch", "lch()")}} (lightness, chroma, hue) as well as {{CSSXref("color_value/oklab", "oklab()")}} and {{CSSXref("color_value/oklch", "oklch()")}}. The lightness values are the same, but `lch()` is a polar, cylindrical coordinate system using polar coordinates `C` (chroma) and `H` (hue) rather than axes.
+CIELab color functions include {{CSSXref("color_value/lab", "lab()")}} (lightness, a-axis, b-axis) and {{CSSXref("color_value/lch", "lch()")}} (lightness, chroma, hue) as well as {{CSSXref("color_value/oklab", "oklab()")}} and {{CSSXref("color_value/oklch", "oklch()")}}. The lightness values are the same, but `lch()` and `oklch` are polar, cylindrical coordinate systems, that use polar coordinates `C` (chroma) and `H` (hue) rather than axes.
 
-> **Note:** The hue and lightness in `lch()` are different from the same-named values in {{cssxref("color_value/hsl", "hsl()")}} or other sRGB color spaces.
+> **Note:** The hue and lightness in `lch()` and `oklch` are different from the same-named values in {{cssxref("color_value/hsl", "hsl()")}} or other sRGB color spaces.
 
-CIELab color spaces, including LCH, Oklab, and Oklch, are device-independent color spaces.
+CIELab color spaces, including Lab, Lch, Oklab, and Oklch, are device-independent color spaces.
 
 - `lab-d50` color space
 
@@ -82,22 +82,23 @@ CIELab color spaces, including LCH, Oklab, and Oklch, are device-independent col
 
 ### XYZ color spaces
 
-While combinations of red, green, and blue work well for representing colors on screen, sRGB doesn't directly correspond to how humans perceive color. Created by the International Commission on Illumination (CIE) in 1931, the CIEXYZ (or XYZ for short) color spaces are the first defined quantitative links between distributions of wavelengths in the electromagnetic visible spectrum and perceived colors in human vision.
+While combinations of red, green, and blue work well for representing colors on screen, sRGB doesn't directly correspond to how humans perceive color. Created by the International Commission on Illumination (CIE) in 1931, the CIE 1931 XYZ (or XYZ for short) color spaces are the first defined quantitative links between distributions of wavelengths in the electromagnetic visible spectrum and perceived colors in human vision.
 
-People with normal vision have three kinds of cone cells that sense light, having peaks of spectral sensitivity in differing wavelengths. The CIE X, Y, and Z parameters correspond to levels of stimuli of the three kinds of cone cells which, in principle, describe every color. The CIEXYZ color space, with its tri-stimulus values, encompasses all visible colors.
+People with normal vision have three kinds of cone cells that sense light, having peaks of spectral sensitivity in differing wavelengths. The CIE X, Y, and Z parameters correspond to levels of stimuli of the three kinds of cone cells which, in principle, describe every color. The CIE 1931 XYZ color space, with its tri-stimulus values, encompasses all visible colors.
 
 - `xyz` and `xyz-d65` color space
 
  - : The `xyz` identifier is a synonym for the `xyz-d65` color space. The axes are not limited to a `0` to `1` range as the color space is not bound to this range; these values are only used as reference points in defining percentage inputs and outputs. The whitepoint is D65.
 
 - `xyz-d50` color space
 
- - : `xyz-d50` is the same as `xyz-d65` except it uses `d50` as the whitepoint.
+ - : `xyz-d50` is the same as `xyz-d65` except it uses D50 as the whitepoint.
 
 ## See also
 
 - {{cssxref("@media/color-gamut", "color-gamut")}} `@media` feature
 - [CSS data type: `<color>`](/en-US/docs/Web/CSS/color_value)
 - [sRGB color space](https://webstore.iec.ch/publication/6168)
 - [CIELAB color space](https://en.wikipedia.org/wiki/CIELAB_color_space) on Wikipedia
-- [Oklab](https://bottosson.github.io/posts/oklab/) color space
+- [CIE 1931 color space](https://en.wikipedia.org/wiki/CIE_1931_color_space) on Wikipedia
+- [Oklab color space](https://bottosson.github.io/posts/oklab/)