Add lch() color function term entryCloses #8211 #8228
Conversation
|
|
There was a problem hiding this comment.
Pull request overview
Adds a new Codecademy Docs term entry for the CSS lch() color function, including example usage and supporting media assets.
Changes:
- Added a new
lch()term page under CSS Colors terms. - Added two media images referenced by the new documentation examples.
Reviewed changes
Copilot reviewed 1 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
content/css/concepts/colors/terms/lch/lch.md |
New documentation entry for lch() with syntax, parameter descriptions, and two examples. |
media/css-colors-lch-example-1.png |
Media asset for Example 1 screenshot (currently appears to be JPEG content with a .png name). |
media/css-colors-lch-example-2.png |
Media asset for Example 2 screenshot (currently appears to be JPEG content with a .png name). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| - `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. |
There was a problem hiding this comment.
The hue parameter is described as a unitless number, but CSS lch() accepts an angle (deg, rad, turn, etc.) and also allows values outside 0–360 (they wrap). Updating this description would make the entry more accurate and avoid implying invalid inputs.
| - `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. |
|  | ||
|
|
||
| ## Example 2 | ||
|
|
||
| ```css | ||
| p { | ||
| color: lch(70% 50 260); | ||
| } | ||
| ``` | ||
|
|
||
| Sets the font color of the `p` element to a light purple color with moderate chroma: | ||
|
|
||
|  |
There was a problem hiding this comment.
These images are referenced as .png files, but the added media assets appear to be JPEGs (their headers start with JFIF). Once the media files are re-exported/renamed, please update these URLs so the docs render correctly.
|
I have implemented all the changes suggested by the Copliot Ready for Review. Let me know if there are any changes |
Updated the description to clarify that LCH is a perceptually uniform color space. Added details about parameters and return value for the lch() function.
mamtawardhani
left a comment
mamtawardhani
left a comment
There was a problem hiding this comment.
Hey @abdultalha0862, could you please check the image 3. I feel the image here is incorrect.
mamtawardhani
added
css
|
@mamtawardhani I apologise for the wrong file I submitted. I have now uploaded the correct image. Please review it and let me know if any changes are needed. |
3 participants
Description
Added documentation for the CSS
lch()color functionIssue Solved
#8211
Type of Change
Checklist
mainbranch.Issues Solvedsection.