Cascading Style Sheets/Color/Relative colors

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. 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 colorsred white Redyellow black Yellowlime black Limecyan black Cyanblue white Bluemagenta white Magentamaroon white Maroonolive white Olivegreen white Greenteal white Tealnavy white Navypurple white Purple Pink colorsMediumVioletRed whiteDeepPink whitePaleVioletRed blackHotPink blackLightPink blackPink black Red colorsDarkRed whiteRed whiteFirebrick whiteCrimson whiteIndianRed whiteLightCoral blackSalmon blackDarkSalmon blackLightSalmon black Orange colorsOrangeRed whiteTomato blackDarkOrange blackCoral blackOrange black