Add color wheel to the glossary

[teoli2003]

As part of openwebdocs/project#92 and as suggested in #14651, this PR adds a simple glossary entry for the color wheel.

[github-actions]

Preview URLs

• https://pr14734.content.dev.mdn.mozit.cloud/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor
• https://pr14734.content.dev.mdn.mozit.cloud/en-US/docs/Glossary/Color_wheel
• https://pr14734.content.dev.mdn.mozit.cloud/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
• https://pr14734.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/CSS_Colors/Applying_color
• https://pr14734.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients
• https://pr14734.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/gradient/conic-gradient

Flaws

Note! 3 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/CSS/CSS_Colors/Applying_color
Title: Applying color to HTML elements using CSS
on GitHub
Flaw count: 4

• broken_links:
  • Is currently http:// but can become https://
  • Can't resolve /en-US/docs/Web/CSS/color_value/hwb()
  • Is currently http:// but can become https://
  • Is currently http:// but can become https://

---

URL: /en-US/docs/Web/CSS/gradient/conic-gradient
Title: conic-gradient()
on GitHub
Flaw count: 1

• bad_bcd_links:
  • no explanation!

---

URL: /en-US/docs/Learn/CSS/Building_blocks/Values_and_units
Title: CSS values and units
on GitHub
Flaw count: 1

• broken_links:
  • Link points to the page it's already on

External URLs

URL: /en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients
Title: Using CSS gradients
on GitHub

No new external URLs

---

URL: /en-US/docs/Web/CSS/CSS_Colors/Applying_color
Title: Applying color to HTML elements using CSS
on GitHub

• https://commons.wikimedia.org/wiki/User:SharkD (1 time) (Note! This may be a new URL 👀)
• https://www.wikipedia.org/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/gradient/conic-gradient
Title: conic-gradient()
on GitHub

No new external URLs

---

URL: /en-US/docs/Glossary/Color_wheel
Title: Color wheel
on GitHub

• https://en.wikipedia.org/wiki/Color_wheel (1 time) (Note! This may be a new URL 👀)
• https://www.bhg.com/decorating/color/basics/color-wheel-color-chart/ (1 time) (Note! This may be a new URL 👀)
• https://www.canva.com/colors/color-wheel/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor
Title: Building up a basic demo with PlayCanvas editor
on GitHub

No new external URLs

---

URL: /en-US/docs/Learn/CSS/Building_blocks/Values_and_units
Title: CSS values and units
on GitHub

No new external URLs

(this comment was updated 2022-04-22 07:38:44.837850)

[wbamberg]

My main reason for asking for a link to a color wheel in #14651 is that to understands how to use hsl() I need to know which color wheel it uses. The page says "By definition, red is 0deg", but what color is 45deg, or 270deg? I would expect there to be a "standard" color wheel that I can use when I'm trying to work out what values to give to hsl().

Or am I misunderstanding something here?

[teoli2003]

Like always, things are more complicated.

I agree with you that we should display the information about which angle corresponds to which hue (for hsl() and hwb()). In both cases the angle represents the hue and they have the same angle-hue mapping.

Unfortunately, it doesn't lead to a unique color wheel. These are cylindrical coordinates while a wheel represents only polar coordinates which is a section of the cylinder. So a wheel can represent hue-saturation (with a fixed luminance), hue-luminance (with a fixed saturation) in hsl(), or hue-whiteness (with a fixed blackness), hue-blackness (with a fixed whiteness) in hwb().

Things get even muddier with lab() as these are cylindrical coordinates too, but not representing sRGB colors this time. The angle represents the chroma (I still need to double-check that this is a synonym for the hue) and I'm not sure at all that 0% represents red or that the other angles match (the only wheel I've found for it seems to imply it doesn't with yellow at the top and a different order of colors).

So I think I will do the following:

• add several examples (3?) of wheels (among hue-saturation, hue-luminance, hue-whiteness, hue-blackness, lab one) here in Color wheel.
• add a glossary entry about Cylindrical coordinates (for representing colors) [I have been trying to avoid going into such details, but I think we should]
• explicit the hue-angle mapping (likely with a color wheel) in both hsl() and hwb(). I'll see later for lab().

Thanks a lot for pointing this out.

[estelle]

LGTM

[teoli2003]

I resolved the conflict. I think all is ok.