From 7243b8035136ebaac1956b20d46b0640430c9b39 Mon Sep 17 00:00:00 2001 From: Rachel Andrew Date: Mon, 8 Mar 2021 21:44:02 +0000 Subject: [PATCH] Adds pages for rgb() and rgba() (#2929) --- .../web/css/color_value/rgb()/index.html | 50 +++++++++++++++++++ .../web/css/color_value/rgba()/index.html | 43 ++++++++++++++++ files/en-us/web/css/css_functions/index.html | 18 +++---- 3 files changed, 102 insertions(+), 9 deletions(-) create mode 100644 files/en-us/web/css/color_value/rgb()/index.html create mode 100644 files/en-us/web/css/color_value/rgba()/index.html diff --git a/files/en-us/web/css/color_value/rgb()/index.html b/files/en-us/web/css/color_value/rgb()/index.html new file mode 100644 index 000000000000000..abccdf7cd40dc07 --- /dev/null +++ b/files/en-us/web/css/color_value/rgb()/index.html @@ -0,0 +1,50 @@ +--- +title: rgb() +slug: Web/CSS/color_value/rgb() +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - Web + - color + - rgb +--- +
{{CSSRef}}
+ +

The rgb() functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.

+ +
+

Note

+

CSS Colors Level 4 made some changes to rgb(). In browsers that support the standard {{cssxref("color_value/rgba()","rgba()")}} is an alias for rgb(), they accept the same parameters and behave the same way.

+ +

The Level 4 specification also allows for space-separated in addition to comma-separated values.

+
+ +

Syntax

+ +
rgb(255,255,255) /* white */
+rgb(255,255,255,.5) /* white with 50% opacity */
+rgb(255 255 255); /* CSS Colors 4 space-separated values */
+
+ +

Values

+ +
+
Functional notation: rgb[a](R, G, B[, A])
+
R (red), G (green), and B (blue) can be either {{cssxref("<number>")}}s or {{cssxref("<percentage>")}}s, where the number 255 corresponds to 100%. A (alpha) can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}}, where the number 1 corresponds to 100% (full opacity).
+
Functional notation: rgb[a](R G B[ / A])
+
CSS Colors Level 4 adds support for space-separated values in the functional notation.
+
+ +

Browser compatibility

+ +

{{Compat("css.types.color.rgb_functional_notation")}}

+ +

Space-separated values

+ +

{{Compat("css.types.color.space_separated_functional_notation")}}

+ +

Accepts alpha value

+ +

{{Compat("css.types.color.rgb_function_accepts_alpha")}}

diff --git a/files/en-us/web/css/color_value/rgba()/index.html b/files/en-us/web/css/color_value/rgba()/index.html new file mode 100644 index 000000000000000..9a2b24af1242a0a --- /dev/null +++ b/files/en-us/web/css/color_value/rgba()/index.html @@ -0,0 +1,43 @@ +--- +title: rgba() +slug: Web/CSS/color_value/rgba() +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - Web + - color + - rgba +--- +
{{CSSRef}}
+ +

The rgba() functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.

+ +
+

Note

+

CSS Colors Level 4 allows for space-separated in addition to comma-separated values.

+
+ +

Syntax

+ +
rgba(255,255,255,.5) /* white with 50% opacity */
+rgba(255 255 255,.5); /* CSS Colors 4 space-separated values */
+
+ +

Values

+ +
+
Functional notation: rgb[a](R, G, B[, A])
+
R (red), G (green), and B (blue) can be either {{cssxref("<number>")}}s or {{cssxref("<percentage>")}}s, where the number 255 corresponds to 100%. A (alpha) can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}}, where the number 1 corresponds to 100% (full opacity).
+
Functional notation: rgb[a](R G B[ / A])
+
CSS Colors Level 4 adds support for space-separated values in the functional notation.
+
+ +

Browser compatibility

+ +

{{Compat("css.types.color.alpha")}}

+ +

Space-separated values

+ +

{{Compat("css.types.color.space_separated_functional_notation")}}

diff --git a/files/en-us/web/css/css_functions/index.html b/files/en-us/web/css/css_functions/index.html index 313b50955dfc8b7..7e092c7145417bb 100644 --- a/files/en-us/web/css/css_functions/index.html +++ b/files/en-us/web/css/css_functions/index.html @@ -156,23 +156,23 @@

Color functions

Functions which specify different color representations. THese may be used anywhere a {{cssxref("<color_value>","<color>")}} is valid.

-
{{cssxref("color()", "color()")}} {{Experimental_Inline}}
+
{{cssxref("color_value/color()", "color()")}} {{Experimental_Inline}}
Allows a color to be specified in a particular, specified colorspace (rather than the implicit sRGB colorspace that most of the other color functions operate in).
-
{{cssxref("device-cmyk()", "device-cmyk()")}} {{Experimental_Inline}}
+
{{cssxref("color_value/device-cmyk()", "device-cmyk()")}} {{Experimental_Inline}}
Used to express CMYK colors in a device-independent way.
-
{{cssxref("hsl()", "hsl()")}}
+
{{cssxref("color_value/hsl()", "hsl()")}}
The HSL color model defines a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
-
{{cssxref("hsla()", "hsla()")}}
+
{{cssxref("color_value/hsla()", "hsla()")}}
The HSL color model defines a given color according to its hue, saturation, and lightness components. The alpha component represents the color's transparency.
-
{{cssxref("hwb()", "hwb()")}} {{Experimental_Inline}}
+
{{cssxref("color_value/hwb()", "hwb()")}} {{Experimental_Inline}}
HWB (short for Hue-Whiteness-Blackness) is another method of specifying colors, similar to HSL.
-
{{cssxref("lab()", "lab()")}} {{Experimental_Inline}}
+
{{cssxref("color_value/lab()", "lab()")}} {{Experimental_Inline}}
Lab color is device-independent and specifies physical measurements of color.
-
{{cssxref("lch()", "lch()")}} {{Experimental_Inline}}
+
{{cssxref("color_value/lch()", "lch()")}} {{Experimental_Inline}}
LCH color is device-independent and specifies color using polar coordinates for chroma and hue.
-
{{cssxref("rgb()", "rgb()")}}
+
{{cssxref("color_value/rgb()", "rgb()")}}
The RGB color model defines a given color according to its red, green, and blue components. An optional alpha component represents the color's transparency.
-
{{cssxref("rgba()", "rgba()")}}
+
{{cssxref("color_value/rgba()", "rgba()")}}
The RGB color model defines a given color according to its red, green, and blue components. The alpha component represents the color's transparency.