ryrodriguez25 · pull · Sep 21, 2025 · Sep 21, 2025
diff --git a/files/en-us/_redirects.txt b/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

diff --git a/files/en-us/_wikihistory.json b/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",

diff --git a/files/en-us/glossary/color_space/index.md b/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.

diff --git a/...ng_started/your_first_website/what_will_your_website_look_like/color-picker.png b/...ng_started/your_first_website/what_will_your_website_look_like/color-picker.png
diff --git a/.../your_first_website/what_will_your_website_look_like/color_format_converter.jpg b/.../your_first_website/what_will_your_website_look_like/color_format_converter.jpg
diff --git a/...nt/getting_started/your_first_website/what_will_your_website_look_like/index.md b/...nt/getting_started/your_first_website/what_will_your_website_look_like/index.md
@@ -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
 

diff --git a/files/en-us/web/accessibility/guides/colors_and_luminance/index.md b/files/en-us/web/accessibility/guides/colors_and_luminance/index.md
@@ -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);
 

diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/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
 

diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/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

diff --git a/files/en-us/web/css/color_value/color/index.md b/files/en-us/web/css/color_value/color/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/)
diff --git a/files/en-us/web/css/color_value/hsl/index.md b/files/en-us/web/css/color_value/hsl/index.md
@@ -401,7 +401,7 @@ div.legacyHSLA {
 - [`lch()`](/en-US/docs/Web/CSS/color_value/lch) and [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb) color functions
 - [Hue interpolation in `color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix#using_hue_interpolation_in_color-mix)
 - [List of all color notations](/en-US/docs/Web/CSS/color_value)
-- [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)
 - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors)
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module
 - [Color picker tool](https://apps.colorjs.io/picker/) by Lea Verou
diff --git a/files/en-us/web/css/color_value/hwb/index.md b/files/en-us/web/css/color_value/hwb/index.md
@@ -275,7 +275,7 @@ The output is as follows:
 ## See also
 
 - {{CSSXref("&lt;color&gt;")}}: For a list of all color notations
-- [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)
 - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors)
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module
 - {{CSSXref("&lt;hue&gt;")}}: the data type representing a hue angle of a color
diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md
@@ -35,7 +35,7 @@ hsl(150 30% 60% / 80%)
 hwb(12 50% 0%)
 hwb(194 0% 0% / 0.5)
 
-/* LAB (Lightness, A-axis, B-axis) */
+/* Lab (Lightness, A-axis, B-axis) */
 lab(50% 40 59.5)
 lab(50% 40 59.5 / 0.5)
 
@@ -47,7 +47,7 @@ lch(52.2% 72.2 50 / 0.5)
 oklab(59% 0.1 0.1)
 oklab(59% 0.1 0.1 / 0.5)
 
-/* Oklch (Lightness, Chroma, Hue) */
+/* OkLCh (Lightness, Chroma, Hue) */
 oklch(60% 0.15 50)
 oklch(60% 0.15 50 / 0.5)
 
@@ -162,7 +162,7 @@ For example:
 - `X` (`0.2`) in `color(xyz 0.2 0.1 0.6)` is analogous to `R` (`50%`) in `rgb(50% 70% 30%)`.
 - `H` (`0deg`) in `hsl(0deg 100% 80%)` is analogous to `H` (`140`) in `oklch(80% 0.1 140)`.
 
-Using Oklch as the interpolation color space and the two colors below as an example:
+Using OkLCh as the interpolation color space and the two colors below as an example:
 
 ```css
 lch(80% 30 none)

diff --git a/files/en-us/web/css/color_value/lab/index.md b/files/en-us/web/css/color_value/lab/index.md
@@ -71,7 +71,7 @@ The parameters are as follows:
   - : An {{CSSXref("&lt;alpha-value&gt;")}} representing the alpha channel value of the output color, where the number `0` corresponds to `0%` (fully transparent) and `1` corresponds to `100%` (fully opaque). Additionally, the keyword `none` can be used to explicitly specify no alpha channel. If the `A` channel value is not explicitly specified, it defaults to the alpha channel value of the origin color. If included, the value is preceded by a slash (`/`).
 
 > [!NOTE]
-> Usually when percentage values have a numeric equivalent in CSS, `100%` is equal to the number `1`. This is not always the case for LAB's lightness and `a` and `b` axes, as mentioned above. With `L`, the range is from 0 to 100, with `100%` equal to `100`. The `a` and `b` values support both negative and positive values, with `100%` being equal to `125` and `-100%` being equal to `-125`.
+> Usually when percentage values have a numeric equivalent in CSS, `100%` is equal to the number `1`. This is not always the case for Lab's lightness and `a` and `b` axes, as mentioned above. With `L`, the range is from 0 to 100, with `100%` equal to `100`. The `a` and `b` values support both negative and positive values, with `100%` being equal to `125` and `-100%` being equal to `-125`.
 
 #### Defining relative color output channel components
 

diff --git a/files/en-us/web/css/color_value/oklch/index.md b/files/en-us/web/css/color_value/oklch/index.md
@@ -88,7 +88,7 @@ The parameters are as follows:
 
 #### Defining relative color output channel components
 
-When using relative color syntax inside an `oklch()` function, the browser converts the origin color into an equivalent Oklch color (if it is not already specified as such). The color is defined as three distinct color channel values — `l` (lightness), `c` (chroma), and `h` (hue) — plus an alpha channel value (`alpha`). These channel values are made available inside the function to be used when defining the output color channel values:
+When using relative color syntax inside an `oklch()` function, the browser converts the origin color into an equivalent OkLCh color (if it is not already specified as such). The color is defined as three distinct color channel values — `l` (lightness), `c` (chroma), and `h` (hue) — plus an alpha channel value (`alpha`). These channel values are made available inside the function to be used when defining the output color channel values:
 
 - The `l` channel value is resolved to a `<number>` between `0` and `1`, inclusive.
 - The `c` channel value is resolved to a `<number>` between `0` and `0.4`, inclusive.
@@ -315,7 +315,7 @@ div {
 
 If we had used `0` instead of `0.01` and `2%`, with the same lightness values, the colors would have all been the same shade of grey. In this example, they are almost grey.
 
-### Hues in oklch
+### Hues in OkLCh
 
 The following example shows swatches with different `H` (hue) values of the `oklch()` functional notation.
 
@@ -553,6 +553,6 @@ The output is as follows:
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module
 - {{CSSXref("&lt;hue&gt;")}} data type
 - {{cssxref("color_value/lch","lch()")}} and {{cssxref("color_value/oklab","oklab()")}} color functions
-- [Interactive post on OKLCH color space](https://abhisaha.com/blog/interactive-post-oklch-color-space) (2024)
+- [Interactive post on OkLCh color space](https://abhisaha.com/blog/interactive-post-oklch-color-space) (2024)
 - [OKLCH in CSS: why we moved from RGB and HSL](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) (2024)
 - [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/) (2020)
diff --git a/files/en-us/web/css/color_value/rgb/index.md b/files/en-us/web/css/color_value/rgb/index.md
@@ -343,6 +343,6 @@ div.comma-separated {
 ## See also
 
 - The {{CSSXref("&lt;color&gt;")}} data type for a list of all color notations
-- [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)
 - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors)
 - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module