 | To view these examples, you need Chrome 119+, Edge 119+, Safari 16.4+, Firefox 128+ or Opera 106+. |
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.
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
You can create analogous, triadic, split complementary, square and rectangle palettes.
| Color | HSL | LCH | OKLCH | ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Analogous | Triadic | Split | Square | Rectangle | Analogous | Triadic | Split | Square | Rectangle | Analogous | Triadic | Split | Square | 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 | |||||||||||||||||||||||||||||||||||||||||||||||||||