New color guides and some associated link updates #33071

estelle · 2024-04-13T08:15:46Z

Four guides on CSS colors:

Applying color to HTML elements using CSS - This guide was rewritten and is now only about CSS properties that support <color> values. It's a guide to using CSS to apply color to a variety of types of content, including all CSS properties that accept <color> as a value.
CSS color values - New guide containing the removed content that was in applying color (above) . This content was completely rewritten and reordered
Using color wisely Content based on a section removed from the original very large applying color page. This content is mostly the same as what was removed from applying color, but with updates.
Color converter tool: A simplified tool that is much more intuitive. Adds HWB as a function. update content for accuracy and expanded color options. (The color() function will show in the tool when add color() function to color tool css-examples#176 is merged. it's not there at the moment).

(* these are the links to the previews of the main pages that have really changed / are new. Also, see the module landing page. All other files have minor edits, mostly "applying color" link removals. Hopefully, this section may be helpful once those link pages have passed muster as we go through rounds of reviews ;) )

This PR only includes updated links to "applying color", removing the link from CSS properties in which our readers, if they are using those properties, already know how to apply CSS to elements.

There will be a separate PR to add links to the three other guides. This PR is already big enough.

Fixes openwebdocs/project#194
Sidebar additions: mdn/yari#10945
Tool update: mdn/css-examples#176

…first day you learn CSS I didn't remove the link from more basic properties, like color. reordered stuff not fully relevant to the page and safari issue

github-actions · 2024-04-13T08:17:01Z

Preview URLs (24 pages)

External URLs (24)

URL: /en-US/docs/Web/CSS/background-color
Title: background-color

https://webaim.org/resources/contrastchecker/ (1 time)
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html (1 time)
https://www.w3.org/WAI/standards-guidelines/wcag/ (1 time)

URL: /en-US/docs/Web/CSS/text-decoration-color
Title: text-decoration-color

URL: /en-US/docs/Web/CSS/CSS_colors/Color_values
Title: CSS color values

https://commons.wikimedia.org/wiki/User:SharkD (1 time) (Note! This may be a new URL 👀)
https://creativecommons.org/licenses/by-sa/3.0/ (1 time) (Note! This may be a new URL 👀)
https://en.wikipedia.org/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/CSS_colors/Using_color_wisely
Title: Using color wisely

https://color.adobe.com/create/color-wheel (1 time) (Note! This may be a new URL 👀)
https://digital.gov/guides/accessibility-for-teams/visual-design/ (1 time) (Note! This may be a new URL 👀)
https://en.wikipedia.org/wiki/Color_theory (1 time) (Note! This may be a new URL 👀)
https://en.wikipedia.org/wiki/Mountain_Dew (1 time) (Note! This may be a new URL 👀)
https://medlineplus.gov/colorblindness.html (1 time) (Note! This may be a new URL 👀)
https://paletton.com/ (1 time) (Note! This may be a new URL 👀)
https://www.colorzilla.com/ (1 time) (Note! This may be a new URL 👀)
https://www.google.com/search?q=Mars&tbm=isch (1 time) (Note! This may be a new URL 👀)
https://www.khanacademy.org/ (1 time) (Note! This may be a new URL 👀)
https://www.khanacademy.org/computing/pixar/color (1 time) (Note! This may be a new URL 👀)
https://www.paletton.com/ (1 time) (Note! This may be a new URL 👀)
https://www.pixar.com/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/outline-color
Title: outline-color

https://webaim.org/resources/contrastchecker/ (1 time)
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html (1 time)
https://www.w3.org/WAI/standards-guidelines/wcag/ (1 time)

URL: /en-US/docs/Web/CSS/forced-color-adjust
Title: forced-color-adjust

https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ (1 time)

(comment last updated: 2024-04-25 17:39:37)

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

files/en-us/web/css/css_colors/applying_color/index.md

chrisdavidmills

Wonderful work @estelle!

I've had a good look through your edits, and it is looking pretty much ready to go, IMO.

I've made a few more minor comments for you to look through, but I'm now setting this to approved, so you can get on and merge when done.

chrisdavidmills · 2024-04-25T12:10:44Z

files/en-us/web/css/css_colors/applying_color/index.md


-> **Note:** There is no guarantee, though, that `print-color-adjust: exact` will result in your CSS being used exactly as given.
-> If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of `print-color-adjust`.
+> **Note:** A few now obsolete HTML attributes accepted colors as values, such as `bgcolor` and `vlink`. These attribute only accepted {{cssxref("named-color")}} and three or six digit {{cssxref("hex-color")}} values.


Suggested change

> **Note:** A few now obsolete HTML attributes accepted colors as values, such as `bgcolor` and `vlink`. These attribute only accepted {{cssxref("named-color")}} and three or six digit {{cssxref("hex-color")}} values.

> **Note:** A few now-obsolete HTML attributes accepted colors as values, such as `bgcolor` and `vlink`. These attributes only accepted {{cssxref("named-color")}} and three- or six-digit {{cssxref("hex-color")}} values.

chrisdavidmills · 2024-04-25T12:14:12Z

files/en-us/web/css/css_colors/applying_color/index.md


-The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop websites. With [CSS](/en-US/docs/Web/CSS), there are lots of ways to add color to your [HTML](/en-US/docs/Web/HTML) [elements](/en-US/docs/Web/HTML/Element) to create just the look you want.
+> **Note:** It is important to [use colors wisely](/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely). Always select appropriate colors, ensure there is enough contrast between text and the background to ensure legibility, and always keep the needs of people with differing visual capabilities in mind.


Suggested change

> **Note:** It is important to [use colors wisely](/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely). Always select appropriate colors, ensure there is enough contrast between text and the background to ensure legibility, and always keep the needs of people with differing visual capabilities in mind.

> **Note:** It is important to [use colors wisely](/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely). Always select appropriate colors, ensure the contrast between text and backgrounds is sufficient to ensure legibility, and always keep the needs of people with differing visual capabilities in mind.

went with:

ensuring the contrast between text and the background is sufficient

chrisdavidmills · 2024-04-25T12:15:34Z

files/en-us/web/css/css_colors/applying_color/index.md


 ## See also

+- [`<color>`](/en-US/docs/Web/CSS/color_value) data type
+- [CSS color values](/en-US/docs/Web/CSS/CSS_colors/Color_values) guide
+- [Using colors wisely](/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely)


Suggested change

- [Using colors wisely](/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely)

- [Using color wisely](/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely)

chrisdavidmills · 2024-04-25T12:19:25Z

files/en-us/web/css/css_colors/color_picker_tool/index.md

@@ -6,31 +6,27 @@ page-type: guide

 {{CSSRef}}

-This tool makes it easy to create, adjust, and experiment with custom colors for the web. It also makes it easy to convert between various [color formats](/en-US/docs/Web/CSS/color_value) supported by [CSS](/en-US/docs/Web/CSS), including: HEXA colors, RGB (Red/Green/Blue) and HSL (Hue/Saturation/Lightness). Control over the alpha channel is also supported.
+This tool lets you pick a color in the sRGB {{glossary("color space")}} and converts it between various CSS [color formats](/en-US/docs/Web/CSS/color_value), helping you understand the syntax of sRGB color notations, including:


Suggested change

This tool lets you pick a color in the sRGB {{glossary("color space")}} and converts it between various CSS [color formats](/en-US/docs/Web/CSS/color_value), helping you understand the syntax of sRGB color notations, including:

This tool lets you pick a color in the sRGB {{glossary("color space")}} and converts it between various CSS [color formats](/en-US/docs/Web/CSS/color_value), helping you understand the syntax of the following sRGB color notations:

chrisdavidmills · 2024-04-25T12:24:22Z

files/en-us/web/css/css_colors/color_values/index.md

+
+Color keywords include standard primary and secondary colors (such as `red`, `blue`, or `orange`), shades of gray (from `black` to `white`, including colors like `darkgray` and `lightgrey`), and a variety of other blended colors, including `lightseagreen`, `cornflowerblue`, and `rebeccapurple`. Named colors use the [RGB](/en-US/docs/Glossary/RGB) model and are associated with the sRGB (`srgb`) color space.
+
+There are over 160 named colors. There are named colors of special interest: [`transparent`](/en-US/docs/Web/CSS/named-color#transparent) sets a transparent color value, while [`currentcolor`](/en-US/docs/Web/CSS/color_value#currentcolor_keyword) sets the current value of the CSS {{cssxref("color")}} property. There are also named {{cssxref("system-colors")}}, such as `accentcolortext` and `buttonface`, that reflect the default color choices made by the user, the browser, or the operating system.


Suggested change

There are over 160 named colors. There are named colors of special interest: [`transparent`](/en-US/docs/Web/CSS/named-color#transparent) sets a transparent color value, while [`currentcolor`](/en-US/docs/Web/CSS/color_value#currentcolor_keyword) sets the current value of the CSS {{cssxref("color")}} property. There are also named {{cssxref("system-colors")}}, such as `accentcolortext` and `buttonface`, that reflect the default color choices made by the user, the browser, or the operating system.

There are over 160 named colors. There are named colors of special interest: [`transparent`](/en-US/docs/Web/CSS/named-color#transparent) sets a transparent color value, while [`currentcolor`](/en-US/docs/Web/CSS/color_value#currentcolor_keyword) sets the current value of the CSS {{cssxref("color")}} property. There are also named {{cssxref("system-color")}}s, such as `accentcolortext` and `buttonface`, that reflect the default color choices made by the user, the browser, or the operating system.

(or just turn it into a regular link, either way the link would be fixed)

There are also named {{cssxref("system-color")}} colors, such as ...

chrisdavidmills · 2024-04-25T12:39:23Z

files/en-us/web/css/css_colors/color_values/index.md

+      <td style="background-color: hsl(0.15turn 90% 50%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(270deg 90% 50%)</code></td>


Suggested change

<td><code>hsl(270deg 90% 50%)</code></td>

<td><code>hsl(270deg 90% 50% / 50%)</code></td>

good catch!

chrisdavidmills · 2024-04-25T12:45:25Z

files/en-us/web/css/css_colors/color_values/index.md

+
+Similar to `lch()` and `oklch()`, the `lightness` is either a {{cssxref("percentage")}} or for `lab()` a number between `0` and `100` and for `oklab()` a number between `0` and `1`, with `0` or `0%` being the complete lack of lightness, which is black.
+
+The `a` value is `<number>` between `-125` and `125` for `lab()` or `-0.4` and `0.4` for `oklab()`, a `<percentage>` between `-100%` and `100%`, or the keyword `none` (equivalent to `0%` in this case). This value specifies the color's distance along the a-axis in the color space, which defines how green (moving towards -100%) or red (moving towards +100%) the color is. Note that these values are signed (allowing both positive and negative values) and theoretically unbounded, meaning that you can set values outside the ±125 or ±0.4 (±100%) limits. In practice, values cannot exceed ±160 or ±0.5, respectively.


LOL, I'll redo that one in a different comment. I think I forgot to add it ;-)

chrisdavidmills · 2024-04-25T12:46:18Z

files/en-us/web/css/css_colors/color_values/index.md

+- A {{cssxref("percentage")}}, with `0%` being completely black and `100%` being completely white.
+- A number between `0` and `100` for `lab()` and `0` and `1` for `oklab()`, where `0` is completely black and`1`/`100` is completely white.
+
+The `a` value is `<number>` between `-125` and `125` for `lab()` or `-0.4` and `0.4` for `oklab()`, a `<percentage>` between `-100%` and `100%`, or the keyword `none` (equivalent to `0%` in this case). This value specifies the color's distance along the a-axis in the color space, which defines how green (moving towards -100%) or red (moving towards +100%) the color is. Note that these values are signed (allowing both positive and negative values) and theoretically unbounded, meaning that you can set values outside the ±125 or ±0.4 (±100%) limits. In practice, values cannot exceed ±160 or ±0.5, respectively.


Suggested change

The `a` value is `<number>` between `-125` and `125` for `lab()` or `-0.4` and `0.4` for `oklab()`, a `<percentage>` between `-100%` and `100%`, or the keyword `none` (equivalent to `0%` in this case). This value specifies the color's distance along the a-axis in the color space, which defines how green (moving towards -100%) or red (moving towards +100%) the color is. Note that these values are signed (allowing both positive and negative values) and theoretically unbounded, meaning that you can set values outside the ±125 or ±0.4 (±100%) limits. In practice, values cannot exceed ±160 or ±0.5, respectively.

The `a` value is a `<number>` between `-125` and `125` for `lab()` or `-0.4` and `0.4` for `oklab()`, a `<percentage>` between `-100%` and `100%`, or the keyword `none` (equivalent to `0%` in this case). This value specifies the color's distance along the a-axis in the color space, which defines how green (moving towards -100%) or red (moving towards +100%) the color is.

Note that these values are signed (allowing both positive and negative values) and theoretically unbounded, meaning that you can set values outside the ±125 or ±0.4 (±100%) limits. In practice, values cannot exceed ±160 or ±0.5, respectively.

chrisdavidmills · 2024-04-25T13:02:16Z

files/en-us/web/css/css_colors/color_values/index.md

+}
+```
+
+In addition, as the older sRGB color notations discussed above - `hsl()`, `hwb()`, and `rgb()` - do not express the full spectrum of visible colors and the `color()` function supports a much wider color gamut, when using these functions to define relative colors (discussed next), the output color returned by querying {{domxref("HTMLElement.style")}} property or the {{domxref("CSSStyleDeclaration.getPropertyValue()")}} method will be a `color(srgb ...)` value. To see an example of converting these color functions to `color()` in the `srgb` color space, check out our [color picker tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool).


Suggested change

In addition, as the older sRGB color notations discussed above - `hsl()`, `hwb()`, and `rgb()` - do not express the full spectrum of visible colors and the `color()` function supports a much wider color gamut, when using these functions to define relative colors (discussed next), the output color returned by querying {{domxref("HTMLElement.style")}} property or the {{domxref("CSSStyleDeclaration.getPropertyValue()")}} method will be a `color(srgb ...)` value. To see an example of converting these color functions to `color()` in the `srgb` color space, check out our [color picker tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool).

The older sRGB color notations discussed above — `hsl()`, `hwb()`, and `rgb()`— do not express the full spectrum of visible colors, while the `color()` function supports a much wider color gamut. As a result, when using the older functions types to define relative colors (discussed next), the output color returned by querying {{domxref("HTMLElement.style")}} property or the {{domxref("CSSStyleDeclaration.getPropertyValue()")}} method will be a `color(srgb ...)` value. To see an example of converting these color functions to `color()` in the `srgb` color space, check out our [color picker tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool).

I also think you should remove this paragraph from here, put it in place of the related paragraph in the next section, and remove the "(discussed next)" bit. It seems weird that the detail is here and not in the relative colors section.

Yes, this section uses color(), but this detail is not essential for an understanding of the example.

changed to:

Understanding color() is important when it comes to relative colors, discussed next. The older sRGB color notations discussed above — hsl(), hwb(), and rgb()— do not express the full spectrum of visible colors, while the color() function supports a much wider color gamut. As a result, when using the older functions types to define relative colors, the output color returned by querying {{domxref("HTMLElement.style")}} property or the {{domxref("CSSStyleDeclaration.getPropertyValue()")}} method will be a color(srgb ...) value.

To see an example of converting the hsl(), hwb(), and rgb() color functions to color() in the srgb color space, check out our color picker tool.

to make it more relevant here (i want to add it to color() instead of relative because i want to express why learning color is actually important.

chrisdavidmills · 2024-04-25T13:10:22Z

files/en-us/web/css/css_colors/using_color_wisely/index.md

+
+It's important to [understand color and luminance](/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance) and to always consider [color blindness](https://medlineplus.gov/colorblindness.html) and [vestibular disorders](/en-US/docs/Web/Accessibility/Seizure_disorders). There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from an inability to tell the difference between certain colors to the total inability to see color at all. There are even color and animation combinations that can lead your photosensitive users to experience [seizures](/en-US/docs/Web/Accessibility/Seizure_disorders#colors).
+
+While higher [color contrast](https://digital.gov/guides/accessibility-for-teams/visual-design/#color-and-contrast) is often a good thing when it comes to accessibility, when animating, especially rapidly, [reducing color contrast](/en-US/docs/Web/Accessibility/Seizure_disorders#reduce_contrast) on animating elements reduces seizure risk. If you include animations, use the [`prefers-reduced-motion`](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) feature of the {{cssxref("@media")}} query to reduce animations for users who have selected that preference.


Suggested change

While higher [color contrast](https://digital.gov/guides/accessibility-for-teams/visual-design/#color-and-contrast) is often a good thing when it comes to accessibility, when animating, especially rapidly, [reducing color contrast](/en-US/docs/Web/Accessibility/Seizure_disorders#reduce_contrast) on animating elements reduces seizure risk. If you include animations, use the [`prefers-reduced-motion`](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) feature of the {{cssxref("@media")}} query to reduce animations for users who have selected that preference.

While higher [color contrast](https://digital.gov/guides/accessibility-for-teams/visual-design/#color-and-contrast) is often a good thing when it comes to accessibility, when animating, especially rapidly, [reducing color contrast](/en-US/docs/Web/Accessibility/Seizure_disorders#reduce_contrast) on animating elements reduces seizure risk. If you include animations, use the [`prefers-reduced-motion`](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) {{cssxref("@media")}} query feature to reduce animations for users who have selected that preference.

estelle added 7 commits April 11, 2024 18:25

New guide: css colors

8cf5cac

links to color guides

f8edc7a

links to color guides

cadfb76

removed link to the basic guide from properties that aren't used the …

188add8

…first day you learn CSS I didn't remove the link from more basic properties, like color. reordered stuff not fully relevant to the page and safari issue

fix link to old section

a67b320

colors with hues

528a4d7

colors with hues

3b3b1f9

estelle requested review from a team as code owners April 13, 2024 08:15

estelle requested review from dipikabh and removed request for a team April 13, 2024 08:15

github-actions bot added Content:CSS Cascading Style Sheets docs Content:HTML Hypertext Markup Language docs size/xl >1000 LoC changed labels Apr 13, 2024

estelle marked this pull request as draft April 13, 2024 08:17

colors with hues

43a49d7

estelle mentioned this pull request Apr 13, 2024

Color Spaces and Functions openwebdocs/project#194

Closed

61 tasks

estelle and others added 9 commits April 13, 2024 01:46

New guide: using color wisely

caf3550

link

6499bec

Merge branch 'main' into colorguides

45b99c4

fix broken build

85cae38

complete color_values guide

ac1320a

size of example, guide description

2793d4f

First final draft: using colors wisely

9190a2c

guide on color and accessibilty

8c3f518

color picker guide

de37429

estelle changed the title ~~Draft: new color guide and associated link updates~~ New color guides and some associated link updates Apr 17, 2024

estelle marked this pull request as ready for review April 17, 2024 05:35

Merge branch 'main' into colorguides

4e8e2d4

estelle and others added 12 commits April 23, 2024 16:35

edits to border-color

a5b0dc8

applying colors: reordered and rewrote some paragraphs and notes

8b15f23

hex colors

195f27b

lint

d5cb607

Color picker tool updates

511eca6

Color picker tool updates

e12bb75

Color values updates: first half

a06d509

Color values updates: more

7be388a

Merge branch 'main' into colorguides

108ea38

Apply suggestions from code review

57e5273

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

Color values updates: more

efdc5ee

finished rereview

b2d79f3

estelle requested a review from chrisdavidmills April 25, 2024 00:01

estelle added 6 commits April 24, 2024 17:03

flaws

34cc2fe

remove link to tool since it's on this page

046d528

remove link to tool since it's on this page

44f15de

applying color: another pass

3018d20

additional tweaks to color_values

be0a12d

additional tweaks to wisely

187e0b8

chrisdavidmills reviewed Apr 25, 2024

View reviewed changes

files/en-us/web/css/css_colors/applying_color/index.md Outdated Show resolved Hide resolved

files/en-us/web/css/css_colors/applying_color/index.md Outdated Show resolved Hide resolved

chrisdavidmills approved these changes Apr 25, 2024

View reviewed changes

estelle added 6 commits April 25, 2024 10:23

applying colors edits

b595429

color picker tool edits

a96005a

applying colors edits

8dec368

color value edits

89af0ac

wisely edits

728383c

final edit. yay

1ddd9fa

estelle merged commit 5f13cbe into mdn:main Apr 25, 2024
8 checks passed

estelle deleted the colorguides branch April 25, 2024 17:43

estelle mentioned this pull request Apr 30, 2024

Updates to colour picker tool mdn/css-examples#178

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New color guides and some associated link updates #33071

New color guides and some associated link updates #33071

estelle commented Apr 13, 2024 •

edited

github-actions bot commented Apr 13, 2024 •

edited

chrisdavidmills left a comment

chrisdavidmills Apr 25, 2024

chrisdavidmills Apr 25, 2024

estelle Apr 25, 2024

chrisdavidmills Apr 25, 2024

chrisdavidmills Apr 25, 2024

chrisdavidmills Apr 25, 2024

chrisdavidmills Apr 25, 2024

estelle Apr 25, 2024

chrisdavidmills Apr 25, 2024

estelle Apr 25, 2024

chrisdavidmills Apr 25, 2024

chrisdavidmills Apr 25, 2024

chrisdavidmills Apr 25, 2024

chrisdavidmills Apr 25, 2024

estelle Apr 25, 2024 •

edited

chrisdavidmills Apr 25, 2024

	> Note: A few now obsolete HTML attributes accepted colors as values, such as `bgcolor` and `vlink`. These attribute only accepted {{cssxref("named-color")}} and three or six digit {{cssxref("hex-color")}} values.
	> Note: A few now-obsolete HTML attributes accepted colors as values, such as `bgcolor` and `vlink`. These attributes only accepted {{cssxref("named-color")}} and three- or six-digit {{cssxref("hex-color")}} values.


		The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop websites. With [CSS](/en-US/docs/Web/CSS), there are lots of ways to add color to your [HTML](/en-US/docs/Web/HTML) [elements](/en-US/docs/Web/HTML/Element) to create just the look you want.
		> Note: It is important to [use colors wisely](/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely). Always select appropriate colors, ensure there is enough contrast between text and the background to ensure legibility, and always keep the needs of people with differing visual capabilities in mind.

	- [Using colors wisely](/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely)
	- [Using color wisely](/en-US/docs/Web/CSS/CSS_colors/Using_color_wisely)

	This tool lets you pick a color in the sRGB {{glossary("color space")}} and converts it between various CSS [color formats](/en-US/docs/Web/CSS/color_value), helping you understand the syntax of sRGB color notations, including:
	This tool lets you pick a color in the sRGB {{glossary("color space")}} and converts it between various CSS [color formats](/en-US/docs/Web/CSS/color_value), helping you understand the syntax of the following sRGB color notations:


		Color keywords include standard primary and secondary colors (such as `red`, `blue`, or `orange`), shades of gray (from `black` to `white`, including colors like `darkgray` and `lightgrey`), and a variety of other blended colors, including `lightseagreen`, `cornflowerblue`, and `rebeccapurple`. Named colors use the [RGB](/en-US/docs/Glossary/RGB) model and are associated with the sRGB (`srgb`) color space.

		There are over 160 named colors. There are named colors of special interest: [`transparent`](/en-US/docs/Web/CSS/named-color#transparent) sets a transparent color value, while [`currentcolor`](/en-US/docs/Web/CSS/color_value#currentcolor_keyword) sets the current value of the CSS {{cssxref("color")}} property. There are also named {{cssxref("system-colors")}}, such as `accentcolortext` and `buttonface`, that reflect the default color choices made by the user, the browser, or the operating system.

	<td><code>hsl(270deg 90% 50%)</code></td>
	<td><code>hsl(270deg 90% 50% / 50%)</code></td>


		Similar to `lch()` and `oklch()`, the `lightness` is either a {{cssxref("percentage")}} or for `lab()` a number between `0` and `100` and for `oklab()` a number between `0` and `1`, with `0` or `0%` being the complete lack of lightness, which is black.

		The `a` value is `<number>` between `-125` and `125` for `lab()` or `-0.4` and `0.4` for `oklab()`, a `<percentage>` between `-100%` and `100%`, or the keyword `none` (equivalent to `0%` in this case). This value specifies the color's distance along the a-axis in the color space, which defines how green (moving towards -100%) or red (moving towards +100%) the color is. Note that these values are signed (allowing both positive and negative values) and theoretically unbounded, meaning that you can set values outside the ±125 or ±0.4 (±100%) limits. In practice, values cannot exceed ±160 or ±0.5, respectively.


		It's important to [understand color and luminance](/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance) and to always consider [color blindness](https://medlineplus.gov/colorblindness.html) and [vestibular disorders](/en-US/docs/Web/Accessibility/Seizure_disorders). There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from an inability to tell the difference between certain colors to the total inability to see color at all. There are even color and animation combinations that can lead your photosensitive users to experience [seizures](/en-US/docs/Web/Accessibility/Seizure_disorders#colors).

		While higher [color contrast](https://digital.gov/guides/accessibility-for-teams/visual-design/#color-and-contrast) is often a good thing when it comes to accessibility, when animating, especially rapidly, [reducing color contrast](/en-US/docs/Web/Accessibility/Seizure_disorders#reduce_contrast) on animating elements reduces seizure risk. If you include animations, use the [`prefers-reduced-motion`](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) feature of the {{cssxref("@media")}} query to reduce animations for users who have selected that preference.

New color guides and some associated link updates #33071

New color guides and some associated link updates #33071

Conversation

estelle commented Apr 13, 2024 • edited

github-actions bot commented Apr 13, 2024 • edited

chrisdavidmills left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle Apr 25, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle commented Apr 13, 2024 •

edited

github-actions bot commented Apr 13, 2024 •

edited

estelle Apr 25, 2024 •

edited