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																	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