Update lch() #33007
Update lch() #33007
Conversation
|
Preview URLs (comment last updated: 2024-04-11 22:22:08) |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
There was a problem hiding this comment.
@dipikabh Thanks for the review. I captured almost all your suggestions. I am leaving the example title as "hues in LCH". It's more about learning hues that adjusting hues, and there are now two links to it as an explanation for hues in lch.
| - `C` | ||
| - : A {{CSSXref("<number>")}}, a {{CSSXref("<percentage>")}}, or the keyword `none` (equivalent to `0%` in this case). This value is a measure of the color's chroma (roughly representing the "amount of color"). Its minimum useful value is `0%`, or `0`, while its maximum is theoretically unbounded (but in practice does not exceed `230`), with `100%` being equivalent to `150`. | ||
| - `H` | ||
|
|
||
| - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the color's {{CSSXref("<hue>")}} angle. | ||
| - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to [`0deg`, or magenta](#result_3)) representing the color's {{CSSXref("<hue>")}} angle. |
There was a problem hiding this comment.
I don't think we should link to the example here. The mention of "magenta" can be confusing. The example can explain none or 0deg.
| - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to [`0deg`, or magenta](#result_3)) representing the color's {{CSSXref("<hue>")}} angle. | |
| - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to `0deg`) representing the color's {{CSSXref("<hue>")}} angle. |
There was a problem hiding this comment.
I added the color and link based on #33007 (comment). Let's keep the link but remove "magenta"
There was a problem hiding this comment.
I'm not in favor of adding a link to the example section without indicating that the link destination is on the same page. Clicking on the link might cause a reader to lose their current context and they'll have to scroll back to find their previous location. Other links in the vicinity take readers to different pages, and without a hint, this link could confuse readers by unexpectedly navigating them to a place within an example's result.
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
@dipikabh Please note that I add a "note" under "L" lightness in values. This is new since your the last review. |
|
|
||
| - : A {{CSSXref("<number>")}} between `0` and `100`, a {{CSSXref("<percentage>")}} between `0%` and `100%`, or the keyword `none` (equivalent to `0%`). The number `0` corresponds to `0%` (black), and the number `100` corresponds to `100%` (white). This value specifies the color's brightness in the [CIELab color space](/en-US/docs/Glossary/Color_space#cielab_color_spaces). | ||
|
|
||
| > **Note:** The `L` is the perceived lightness, meaning the visually perceived lightness we see with our eyes, or "brightness", rather than the `L` in `hsl()`, which is the lightness as compared to other colors. |
There was a problem hiding this comment.
Thank you for adding this note!!
is this what we want to say:
| > **Note:** The `L` is the perceived lightness, meaning the visually perceived lightness we see with our eyes, or "brightness", rather than the `L` in `hsl()`, which is the lightness as compared to other colors. | |
| > **Note:** The `L` in `lch()` is the perceived lightness, which refers to the "brightness" we visually perceive with our eyes. This is different from the `L` in `hsl()`, where it represents lightness as compared to other colors. |
| - `C` | ||
| - : A {{CSSXref("<number>")}}, a {{CSSXref("<percentage>")}}, or the keyword `none` (equivalent to `0%` in this case). This value is a measure of the color's chroma (roughly representing the "amount of color"). Its minimum useful value is `0%`, or `0`, while its maximum is theoretically unbounded (but in practice does not exceed `230`), with `100%` being equivalent to `150`. | ||
| - `H` | ||
|
|
||
| - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to `0deg` in this case) representing the color's {{CSSXref("<hue>")}} angle. | ||
| - : A {{CSSXref("<number>")}}, an {{CSSXref("<angle>")}}, or the keyword `none` (equivalent to [`0deg`, or magenta](#result_3)) representing the color's {{CSSXref("<hue>")}} angle. |
There was a problem hiding this comment.
I'm not in favor of adding a link to the example section without indicating that the link destination is on the same page. Clicking on the link might cause a reader to lose their current context and they'll have to scroll back to find their previous location. Other links in the vicinity take readers to different pages, and without a hint, this link could confuse readers by unexpectedly navigating them to a place within an example's result.
and other tweaks.
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
The L in LCH is different from the L in HSL - it's the brightness. I didn't go into detail, because it's beyond the scope, but that explains the edits to L.
Otherwise, i added a few examples, including one that demonstrates the hue values.