Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move color keywords into their own page #14615

Merged
merged 7 commits into from
Apr 4, 2022
Merged

Move color keywords into their own page #14615

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4de0b74
Move color keywords in their own page
teoli2003 Apr 3, 2022
cb19ae9
Fix links to <color>
teoli2003 Apr 3, 2022
8d84db0
Typos
teoli2003 Apr 3, 2022
e411900
Move notes about evolution near the end of the article
teoli2003 Apr 3, 2022
9534e35
Fix color_keywords link
teoli2003 Apr 4, 2022
7f7075c
Improve intro
teoli2003 Apr 4, 2022
debae62
Add backlink
teoli2003 Apr 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions files/en-us/web/css/color_value/color_keywords/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@ tags:
---
{{CSSRef}}

**Color keywords** are case-insensitive identifiers that represent a specific color, such as `red`, `blue`, `black`, or `lightseagreen`. Although the names more or less describes their respective colors, they are essentially artificial, without a strict rationale behind the names used.
**Color keywords** are case-insensitive identifiers representing a specific color, such as `red`, `blue`, `black`, or `lightseagreen`. Although the names more or less describe their respective colors, they are essentially artificial, without a strict rationale behind the terms used.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW I would probably have left as "that represent"


All keywords specify a color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB).

There are a few caveats to consider when using color keywords:

- [HTML](/en-US/docs/Web/HTML) only recognizes the 16 basic color keywords found in CSS Level 1, using a specific algorithm to convert unrecognized values (often to completely different colors). The other color keywords should only be used in CSS and [SVG](/en-US/docs/Web/SVG).
- Unlike HTML, CSS will completely ignore unknown keywords.
- The color keywords all represent plain, solid colors, without transparency.
- [HTML](/en-US/docs/Web/HTML) only recognizes the 16 basic color keywords (`black`, `silver`, `gray`, `white`, `maroon`, `red`, `purple`, `fuchsia`, `green`, `lime`, `olive`, `yellow`, `navy`, `blue`, `teal`, and `aqua`).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW I like this a lot more

- An algorithm converts all other values (a CSS color keyword or a random string) to a color (leading most of the time to completely different colors than the CSS color associated in the table below). Therefore, color keywords beside these 16 values should only be used in CSS and [SVG](/en-US/docs/Web/SVG), but not in HTML.
- Unlike HTML, CSS completely ignores unknown keywords.
- The color keywords all represent plain, solid colors without transparency.
- Several keywords are aliases for each other:

- `aqua` / `cyan`
Expand All @@ -32,6 +33,8 @@ There are a few caveats to consider when using color keywords:

- In addition to the color keywords, the [`<color>`](/en-US/docs/Web/CSS/color_value) data type supports other keywords: [`transparent`](/en-US/docs/Web/CSS/color_value#transparent_keyword) to create a wholly transparent color, [`currentColor`](/en-US/docs/Web/CSS/color_value#currentcolor_keyword) that represents the value of an element's {{Cssxref("color")}} property lets you use the `color` value on properties that do not receive it by default, as well as _[system color keywords](/en-US/docs/Web/CSS/color_value#system_colors)_ that reprensents colors that matches those of the OS.

## List of all color keywords

<table>
<thead>
<tr>
Expand Down