Update lch() docs: add alpha parameter, improve hue description, fix image formats

Author: abdultalha0862

content/css/concepts/colors/terms/lch/lch.md

@@ -14,17 +14,18 @@ CatalogContent:
   - 'paths/front-end-engineer-career-path'
 ---
 
-The **`lch()`** function defines colors using the LCH (Lightness, Chroma, Hue) color space, which provides a more perceptually uniform way to represent colors compared to traditional RGB or HSL color spaces.
+The **`lch()`** function defines colors using the LCH (Lightness, Chroma, Hue) color space, which provides a uniform way to represent colors compared to traditional RGB or HSL color spaces.
 
 ## Syntax
 
 ```pseudo
-<property>: lch(lightness chroma hue);
+<property>: lch(lightness chroma hue / alpha);
 ```
 
 - `lightness`: A percentage value from `0%` to `100%`. Represents the brightness of the color. `0%` is completely black, `100%` is completely white, and `50%` represents the mid-tone.
 - `chroma`: A number value (typically `0` to `150` or higher). Represents the colorfulness or intensity of the color. `0` represents a neutral gray with no color, while higher values represent more vivid colors.
-- `hue`: A unitless number value representing an angle in the color wheel from `0` to `360`. `0` represents red, `120` represents green, and `240` represents blue.
+- `hue`: An angle value on the color wheel. It can be given with units like `deg`, `rad`, or `turn`, or as a unitless number interpreted as degrees. Angles wrap, so they are not limited to `0`–`360`; for reference, `0deg` represents red, `120deg` represents green, and `240deg` represents blue.
+- `alpha` (optional): A number from `0` to `1`, or a percentage from `0%` to `100%`, representing the opacity of the color. `0` (or `0%`) is fully transparent, `1` (or `100%`) is fully opaque. Defaults to `1` if omitted.
 
 ## Example 1
 
@@ -36,7 +37,7 @@ h1 {
 
 Sets the font color of the `h1` element to a vibrant orange-yellow color with medium lightness:
 
-![lch() Example 1](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-colors-lch-example-1.png)
+![lch() Example 1](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-colors-lch-example-1.jpg)
 
 ## Example 2
 
@@ -48,4 +49,16 @@ p {
 
 Sets the font color of the `p` element to a light purple color with moderate chroma:
 
-![lch() Example 2](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-colors-lch-example-2.png)
+![lch() Example 2](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-colors-lch-example-2.jpg)
+
+## Example 3
+
+```css
+div {
+  background-color: lch(60% 80 120 / 0.5);
+}
+```
+
+Sets the background color of the `div` element to a semi-transparent green color with 50% opacity:
+
+![lch() Example 3](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-colors-lch-example-3.jpg)