Adds pages for rgb() and rgba() (#2929)

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
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>rgb()</code></strong> functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.</p>
+
+<div class="notecard note">
+  <h4>Note</h4>
+  <p>CSS Colors Level 4 made some changes to <code>rgb()</code>. In browsers that support the standard {{cssxref("color_value/rgba()","rgba()")}} is an alias for <code>rgb()</code>, they accept the same parameters and behave the same way.</p>
+
+  <p>The Level 4 specification also allows for space-separated in addition to comma-separated values.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">rgb(255,255,255) /* white */
+rgb(255,255,255,.5) /* white with 50% opacity */
+rgb(255 255 255); /* CSS Colors 4 space-separated values */
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+  <dt>Functional notation: <code>rgb[a](R, G, B[, A])</code></dt>
+  <dd><code>R</code> (red), <code>G</code> (green), and <code>B</code> (blue) can be either {{cssxref("&lt;number&gt;")}}s or {{cssxref("&lt;percentage&gt;")}}s, where the number <code>255</code> corresponds to <code>100%</code>. <code>A</code> (alpha) can be a {{cssxref("&lt;number&gt;")}} between <code>0</code> and <code>1</code>, or a {{cssxref("&lt;percentage&gt;")}}, where the number <code>1</code> corresponds to <code>100%</code> (full opacity).</dd>
+  <dt>Functional notation: <code>rgb[a](R G B[ / A])</code></dt>
+  <dd>CSS Colors Level 4 adds support for space-separated values in the functional notation.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.types.color.rgb_functional_notation")}}</p>
+
+<h3>Space-separated values</h3>
+
+<p>{{Compat("css.types.color.space_separated_functional_notation")}}</p>
+
+<h3>Accepts alpha value</h3>
+
+<p>{{Compat("css.types.color.rgb_function_accepts_alpha")}}</p>

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
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>rgba()</code></strong> functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.</p>
+
+<div class="notecard note">
+  <h4>Note</h4>
+  <p>CSS Colors Level 4 allows for space-separated in addition to comma-separated values.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">rgba(255,255,255,.5) /* white with 50% opacity */
+rgba(255 255 255,.5); /* CSS Colors 4 space-separated values */
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+  <dt>Functional notation: <code>rgb[a](R, G, B[, A])</code></dt>
+  <dd><code>R</code> (red), <code>G</code> (green), and <code>B</code> (blue) can be either {{cssxref("&lt;number&gt;")}}s or {{cssxref("&lt;percentage&gt;")}}s, where the number <code>255</code> corresponds to <code>100%</code>. <code>A</code> (alpha) can be a {{cssxref("&lt;number&gt;")}} between <code>0</code> and <code>1</code>, or a {{cssxref("&lt;percentage&gt;")}}, where the number <code>1</code> corresponds to <code>100%</code> (full opacity).</dd>
+  <dt>Functional notation: <code>rgb[a](R G B[ / A])</code></dt>
+  <dd>CSS Colors Level 4 adds support for space-separated values in the functional notation.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.types.color.alpha")}}</p>
+
+<h3>Space-separated values</h3>
+
+<p>{{Compat("css.types.color.space_separated_functional_notation")}}</p>

files/en-us/web/css/css_functions/index.html

@@ -156,23 +156,23 @@ <h2 id="Color_functions">Color functions</h2>
 <p>Functions which specify different color representations. THese may be used anywhere a {{cssxref("&lt;color_value&gt;","&lt;color&gt;")}} is valid.</p>
 
 <dl>
-  <dt>{{cssxref("color()", "color()")}} {{Experimental_Inline}}</dt>
+  <dt>{{cssxref("color_value/color()", "color()")}} {{Experimental_Inline}}</dt>
   <dd>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). </dd>
-  <dt>{{cssxref("device-cmyk()", "device-cmyk()")}}  {{Experimental_Inline}}</dt>
+  <dt>{{cssxref("color_value/device-cmyk()", "device-cmyk()")}}  {{Experimental_Inline}}</dt>
   <dd>Used to express CMYK colors in a device-independent way.</dd>
-  <dt>{{cssxref("hsl()", "hsl()")}} </dt>
+  <dt>{{cssxref("color_value/hsl()", "hsl()")}} </dt>
   <dd>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.</dd>
-	<dt>{{cssxref("hsla()", "hsla()")}} </dt>
+	<dt>{{cssxref("color_value/hsla()", "hsla()")}} </dt>
   <dd>The HSL color model defines a given color according to its hue, saturation, and lightness components. The alpha component represents the color's transparency.</dd>
-  <dt>{{cssxref("hwb()", "hwb()")}}  {{Experimental_Inline}}</dt>
+  <dt>{{cssxref("color_value/hwb()", "hwb()")}}  {{Experimental_Inline}}</dt>
   <dd>HWB (short for Hue-Whiteness-Blackness) is another method of specifying colors, similar to HSL.</dd>
-  <dt>{{cssxref("lab()", "lab()")}}  {{Experimental_Inline}}</dt>
+  <dt>{{cssxref("color_value/lab()", "lab()")}}  {{Experimental_Inline}}</dt>
   <dd>Lab color is device-independent and specifies physical measurements of color.</dd>
-	<dt>{{cssxref("lch()", "lch()")}}  {{Experimental_Inline}}</dt>
+	<dt>{{cssxref("color_value/lch()", "lch()")}}  {{Experimental_Inline}}</dt>
   <dd>LCH color is device-independent and specifies color using polar coordinates for chroma and hue.</dd>
-  <dt>{{cssxref("rgb()", "rgb()")}} </dt>
+  <dt>{{cssxref("color_value/rgb()", "rgb()")}} </dt>
   <dd>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.</dd>
-	<dt>{{cssxref("rgba()", "rgba()")}} </dt>
+	<dt>{{cssxref("color_value/rgba()", "rgba()")}} </dt>
   <dd>The RGB color model defines a given color according to its red, green, and blue components. The alpha component represents the color's transparency.</dd>
 </dl>