# Cascading Style Sheets/Color/Relative colors

Relative colors is a great way to define colors. It is a powerful tool to create palettes. It is introduced in Chrome/Edge 119, Safari 16.4, Firefox 128 and Opera 106.

## Uses
### User interfaces

Consider the following color palettes: red, olive, teal and violet, as respective variables --base-color. You can set the following colors for the user interface:
* --background-color: oklch(from var(--base-color) 98% 0.02 h)
* --foreground-color: oklch(from var(--base-color) 20% 0.1 h)
* --button-color: oklch(from var(--base-color) 40% 0.2 h)
* --inverse-color: oklch(from var(--base-color) 99% 0.01 h)
* --notice-color: oklch(from var(--base-color) 90% 0.1 h)
This is some text.
This is a notice.
Button
This is some text.
This is a notice.
Button
This is some text.
This is a notice.
Button
This is some text.
This is a notice.
Button

### Palettes

You can create analogous, triadic, split complementary, square and rectangle palettes.
| Color | HSL | HSL | HSL | HSL | HSL | HSL | HSL | HSL | HSL | HSL | HSL | HSL | HSL | HSL | HSL | HSL | HSL | LCH | LCH | LCH | LCH | LCH | LCH | LCH | LCH | LCH | LCH | LCH | LCH | LCH | LCH | LCH | LCH | LCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH | OKLCH |
| Color | Analogous | Analogous | Analogous | Triadic | Triadic | Triadic | Split | Split | Split | Square | Square | Square | Square | Rectangle | Rectangle | Rectangle | Rectangle | Analogous | Analogous | Analogous | Triadic | Triadic | Triadic | Split | Split | Split | Square | Square | Square | Square | Rectangle | Rectangle | Rectangle | Rectangle | Analogous | Analogous | Analogous | Triadic | Triadic | Triadic | Split | Split | Split | Square | Square | Square | Square | Rectangle | Rectangle | Rectangle | Rectangle |
| Basic HTML colors ||||||||||||||||||||||||||||||||||||||||||||||||||||
| Red | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Yellow | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Lime | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Cyan | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Blue | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Magenta | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Maroon | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Olive | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Green | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Teal | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Navy | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Purple | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Pink colors ||||||||||||||||||||||||||||||||||||||||||||||||||||
| MediumVioletRed | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| DeepPink | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| PaleVioletRed | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| HotPink | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| LightPink | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Pink | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Red colors ||||||||||||||||||||||||||||||||||||||||||||||||||||
| DarkRed | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Red | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Firebrick | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Crimson | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| IndianRed | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| LightCoral | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Salmon | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| DarkSalmon | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| LightSalmon | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Orange colors ||||||||||||||||||||||||||||||||||||||||||||||||||||
| OrangeRed | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Tomato | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| DarkOrange | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Coral | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| Orange | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |