Enhance color picker tool and remove GHLiveSample macro (#41158)

* Enhance color picker tool and remove GHLiveSample macro

* Apply suggestions from code review

Co-authored-by: Dipika Bhattacharya <[email protected]>

* address review comments

* Apply suggestions from code review

Co-authored-by: Dipika Bhattacharya <[email protected]>

* address review comments

* correct colorspace name casings

* Apply suggestions from code review

Co-authored-by: Dipika Bhattacharya <[email protected]>

* review comments

* align inputs

* better formatting

* rename to color_format_converter

* remove text to avoid repitition

---------

Co-authored-by: Dipika Bhattacharya <[email protected]>

Author: OnkarRuikar

files/en-us/_redirects.txt

@@ -12252,7 +12252,8 @@
 /en-US/docs/Web/CSS/CSS_cascade/specified_value	/en-US/docs/Web/CSS/CSS_cascade/Value_processing#specified_value
 /en-US/docs/Web/CSS/CSS_cascade/used_value	/en-US/docs/Web/CSS/CSS_cascade/Value_processing#used_value
 /en-US/docs/Web/CSS/CSS_charsets	/en-US/docs/Web/CSS/CSS_syntax
-/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool	/en-US/docs/Web/CSS/CSS_colors/Color_picker
+/en-US/docs/Web/CSS/CSS_colors/Color_picker	/en-US/docs/Web/CSS/CSS_colors/Color_format_converter
+/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool	/en-US/docs/Web/CSS/CSS_colors/Color_format_converter
 /en-US/docs/Web/CSS/CSS_container_queries	/en-US/docs/Web/CSS/CSS_containment/Container_queries
 /en-US/docs/Web/CSS/CSS_descriptor_definition	/en-US/docs/Web/CSS
 /en-US/docs/Web/CSS/CSS_display/flow_layout/Block_and_inline_layout_in_normal_flow	/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow
@@ -12331,7 +12332,7 @@
 /en-US/docs/Web/CSS/Tools/Border-image_generator	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator
 /en-US/docs/Web/CSS/Tools/Border-radius_generator	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator
 /en-US/docs/Web/CSS/Tools/Box-shadow_generator	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator
-/en-US/docs/Web/CSS/Tools/ColorPicker_Tool	/en-US/docs/Web/CSS/CSS_colors/Color_picker
+/en-US/docs/Web/CSS/Tools/ColorPicker_Tool	/en-US/docs/Web/CSS/CSS_colors/Color_format_converter
 /en-US/docs/Web/CSS/Understanding_CSS_z-index	/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index
 /en-US/docs/Web/CSS/Understanding_CSS_z-index/Adding_z-index	/en-US/docs/Web/CSS/CSS_positioned_layout/Using_z-index
 /en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_and_float	/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_floating_elements

files/en-us/_wikihistory.json

@@ -75899,7 +75899,7 @@
       "chrisdavidmills"
     ]
   },
-  "Web/CSS/CSS_colors/Color_picker": {
+  "Web/CSS/CSS_colors/Color_format_converter": {
     "modified": "2020-10-30T22:49:32.596Z",
     "contributors": [
       "td2014",

files/en-us/glossary/color_space/index.md

@@ -61,7 +61,7 @@ CIELab color functions include {{CSSXref("color_value/lab", "lab()")}} (lightnes
 > [!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 Lab, 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
   - : Expresses color as `L` in a range from `0` to `100`, and `a` and `b` with a range from `-125` to `125`. The `a` and `b` axes are not bound by these range values, which are references in defining percentage inputs and outputs in relation to the `Display P3` color space. The whitepoint is D50.

files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/color-picker.png

@@ -61,10 +61,10 @@ At this point, it's good to start putting together the content that will eventua
 
 Let's choose a background color for your page.
 
-1. Go to [the Color Picker](/en-US/docs/Web/CSS/CSS_colors/Color_picker) and find a color you like.
-2. When you click on a color, you'll see a strange six-character code like `#660066`. That's called a _hex code_ (short for hexadecimal), and represents your color. Copy the code down somewhere safe for now.
+1. Go to [the Color Picker](/en-US/docs/Web/CSS/CSS_colors/Color_format_converter) and find a color you like.
+2. When you pick a color, you'll see a strange six-character code like `#660066`. That's called a _hex code_ (short for hexadecimal), and represents your color. Copy the code down somewhere safe for now.
 
-![Color-Picker-Tool on MDN Docs website with RGB, HSL, and HEX colors ](color-picker.png)
+![Color format converter tool on MDN Docs website](color_format_converter.jpg)
 
 ## Choosing an image
 

files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/color_format_converter.jpg

@@ -40,7 +40,7 @@ Currently, the {{glossary("RGB", "RGB color space")}} predominates as the space
 
 ## The sRGB color space
 
-Color has many ways of being defined, as is apparent in the [`<color>` data type](/en-US/docs/Web/CSS/color_value), including RGB, RGB decimal, RGB percent, HSL, HWB, LCH, LAB, and CMYK, among others.
+Color has many ways of being defined, as is apparent in the [`<color>` data type](/en-US/docs/Web/CSS/color_value), including RGB, RGB decimal, RGB percent, HSL, HWB, LCH, Lab, and CMYK, among others.
 
 For digital concerns, much of the technology has historically resided in the RGB color space. The RGB color model is extended to include "alpha" — RGBA — to allow specification of the opacity of a color. Other methods for measuring color involve measurements using other color spaces and are supported in modern displays and browsers. Still, color measurements in the RGB color space predominate, including in video production.
 
@@ -82,7 +82,7 @@ color: hsl(300deg 100% 50% / 100%);
 color: hwb(300deg 0% 0%);
 color: hwb(300 0% 0% / 1);
 
-/* by LAB representation of the sRGB value */
+/* by Lab representation of the sRGB value */
 color: lab(60 93.56 -60.5);
 color: lab(60 93.56 -60.5 / 1);
 

files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md

@@ -83,7 +83,7 @@ The following example shows the effect of using different interpolation color sp
 The following example shows how to specify a color space when interpolating colors in repeating gradients.
 Three boxes show different types of repeating gradients using the [`repeating-conic-gradient()`](/en-US/docs/Web/CSS/gradient/repeating-conic-gradient), [`repeating-linear-gradient()`](/en-US/docs/Web/CSS/gradient/repeating-linear-gradient), and [`repeating-radial-gradient()`](/en-US/docs/Web/CSS/gradient/repeating-radial-gradient) functions.
 The first box uses the Lab color space to interpolate between two color values.
-The second and third boxes use Oklch and additionally provide a [`<hue-interpolation-method>`](/en-US/docs/Web/CSS/hue-interpolation-method) to specify how to interpolate between hue values.
+The second and third boxes use OkLCh and additionally provide a [`<hue-interpolation-method>`](/en-US/docs/Web/CSS/hue-interpolation-method) to specify how to interpolate between hue values.
 
 #### HTML
 

files/en-us/web/accessibility/guides/colors_and_luminance/index.md

@@ -12,7 +12,7 @@ Choosing the correct color space is important for producing desired results. Giv
 
 - If the result of physically mixing two colored lights is desired, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity.
 - If colors need to be evenly spaced perceptually (such as in a gradient), the Oklab color space (and the older Lab) are appropriate, because they are designed to be perceptually uniform.
-- If avoiding graying out in color mixing is desired, i.e., maximizing chroma throughout the transition, Oklch (and the older LCH) work well.
+- If avoiding graying out in color mixing is desired, i.e., maximizing chroma throughout the transition, OkLCh (and the older LCH) work well.
 - Only use sRGB if you need to match the behavior of a specific device or software that uses sRGB. The sRGB color space is neither linear-light nor perceptually uniform, and produces poorer results such as overly dark or grayish mixes.
 
 ## Syntax

files/en-us/web/css/color-interpolation-method/index.md

@@ -383,7 +383,7 @@ The output is as follows:
 - {{CSSXref("color")}} property
 - [The `<color>` data type](/en-US/docs/Web/CSS/color_value) for a list of all color notations
 - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors)
-- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker)
+- [Color_format_converter tool](/en-US/docs/Web/CSS/CSS_colors/Color_format_converter)
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module
 - [`color-gamut`](/en-US/docs/Web/CSS/@media/color-gamut) media feature
 - [Wide Gamut Color in CSS with Display-p3](https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/)