Skip to content

Commit

Permalink
Detail about <number>s in rgb-related color functions and glossary (m…
Browse files Browse the repository at this point in the history
…dn#28962)

* color number detail

* color() args

* 16,777,216

* Update files/en-us/glossary/rgb/index.md

Co-authored-by: yarusome <97945148+yarusome@users.noreply.github.com>

* Update files/en-us/glossary/rgb/index.md

Co-authored-by: yarusome <97945148+yarusome@users.noreply.github.com>

* Update files/en-us/web/css/color_value/rgb/index.md

Co-authored-by: yarusome <97945148+yarusome@users.noreply.github.com>

* Note: sRGB/rounding

---------

Co-authored-by: Sideways S <sidewayss@users.noreply.github.com>
Co-authored-by: yarusome <97945148+yarusome@users.noreply.github.com>
  • Loading branch information
3 people authored Sep 16, 2023
1 parent 9416f9b commit d71f07e
Show file tree
Hide file tree
Showing 5 changed files with 10 additions and 4 deletions.
4 changes: 2 additions & 2 deletions files/en-us/glossary/rgb/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ _Red-Green-Blue_ (**RGB**) is a color model that represents colors as mixtures o

Alone an RGB value has no meaning. A color model defines how the three components relate to a color space. Graphically, a point in a three-dimensional grid or cube represents a color. Each dimension (or axis) corresponds to a different channel. The RGB color model is then a _cubic_, or _Cartesian_, coordinate system of the underlying color space.

For the web, the underlying color space for an RGB value is _sRGB_ (Standard RGB), and each RGB component is a number between 0 and 255. Float values are supported.
For the web, the underlying color space for an RGB value is _sRGB_ (Standard RGB), and each RGB component is a number between 0 and 255.

Note that there are other 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_ 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 functional notation, [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) as three separate floats between 0 and 255 (for example, `rgb(46 139.5 87)`). In {{Glossary("OpenGL")}}, {{Glossary("WebGL")}}, and {{Glossary("GLSL")}} the red-green-blue components are fractions (floating-point numbers between 0.0 and 1.0), although in the actual color buffer they are typically stored as 8-bit integers.
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 functional notation, [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) as three separate numbers between 0 and 255 (for example, `rgb(46 139.5 87)`). 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.

RGB is not the only color model 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.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/css/color_value/color/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Functional notation: `color(colorspace c1 c2 c3[ / A])`

- `c1`, `c2`, `c3`

- : {{CSSXref("number")}}, {{CSSXref("percentage")}} values or the keyword `none`, which provide the component values in the color space.
- : {{CSSXref("number")}} between 0 and 1, a {{CSSXref("percentage")}} or the keyword `none`, which provide the component values in the color space.

- `A` {{optional_inline}}

Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/css/color_value/hsl/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ Functional notation: `hsl(H S L[ / A])`
- `A` {{optional_inline}}
- : An {{CSSXref("&lt;alpha-value&gt;")}} or the keyword `none`, where the number `1` corresponds to `100%` (full opacity).

> **Note:** This functional notation serializes to sRGB values, and the values of the red, green, blue components may be rounded in serialization.
> **Note:** See [Missing color components](/en-US/docs/Web/CSS/color_value#missing_color_components) for the effect of `none`.
### Formal syntax
Expand Down
4 changes: 3 additions & 1 deletion files/en-us/web/css/color_value/hwb/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ browser-compat: css.types.color.hwb

{{CSSRef}}

The **`hwb()`** functional notation expresses a given color according to its hue, whiteness, and blackness. An optional alpha component represents the color's transparency.
The **`hwb()`** functional notation expresses an {{glossary("RGB", "sRGB")}} color according to its hue, whiteness, and blackness. An optional alpha component represents the color's transparency.

{{EmbedInteractiveExample("pages/css/function-hwb.html")}}

Expand Down Expand Up @@ -36,6 +36,8 @@ Functional notation: `hwb(H W B[ / A])`

- : An {{CSSXref("&lt;alpha-value&gt;")}} or the keyword `none`, where the number `1` corresponds to `100%` (full opacity).

> **Note:** This functional notation serializes to sRGB values, and the values of the red, green, blue components may be rounded in serialization.
> **Note:** See [Missing color components](/en-US/docs/Web/CSS/color_value#missing_color_components) for the effect of `none`.
### Formal syntax
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/web/css/color_value/rgb/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ Functional notation: `rgb(R G B[ / A])`
- `A` {{optional_inline}}
- : An {{CSSXref("&lt;alpha-value&gt;")}} or the keyword `none`, where the number `1` corresponds to `100%` (full opacity).

> **Note:** This functional notation serializes to sRGB values, and the values of the red, green, blue components may be rounded in serialization.
> **Note:** See [Missing color components](/en-US/docs/Web/CSS/color_value#missing_color_components) for the effect of `none`.
### Formal syntax
Expand Down

0 comments on commit d71f07e

Please sign in to comment.