Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()

This content originally appeared on Bram.us and was authored by Bramus!

Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview:

1. Relative color syntax, e.g.

   .bg-primary-100 {
     background-color: hsl(from var(--theme-primary) h s 90%);
   }
   .bg-primary-200 {
     background-color: hsl(from var(--theme-primary) h s 80%);
   }
   .bg-primary-300 {
     background-color: hsl(from var(--theme-primary) h s 70%);
   }
   ...

2. CSS color-contrast, e.g.

   .text-contrast-primary {
     color: color-contrast(var(--theme-primary) vs white, black);
   }

3. CSS color-mix, e.g.

   .text-primary-dark {
     color: color-mix(var(--theme-primary), black 10%);
   }
   .text-primary-darker {
     color: color-mix(var(--theme-primary), black 20%);
   }

All three features are part of the the CSS Color Module Level 5 spec and are a very welcome addition.

Create a color theme with these upcoming CSS features →

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-04-27T22:33:24+00:00) Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast(). Retrieved from https://www.scien.cx/2021/04/27/create-a-color-theme-with-css-relative-color-syntax-css-color-mix-and-css-color-contrast/

MLA

" » Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()." Bramus! | Sciencx - Tuesday April 27, 2021, https://www.scien.cx/2021/04/27/create-a-color-theme-with-css-relative-color-syntax-css-color-mix-and-css-color-contrast/

HARVARD

Bramus! | Sciencx Tuesday April 27, 2021 » Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()., viewed ,<https://www.scien.cx/2021/04/27/create-a-color-theme-with-css-relative-color-syntax-css-color-mix-and-css-color-contrast/>

VANCOUVER

Bramus! | Sciencx - » Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast(). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/27/create-a-color-theme-with-css-relative-color-syntax-css-color-mix-and-css-color-contrast/

CHICAGO

" » Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/04/27/create-a-color-theme-with-css-relative-color-syntax-css-color-mix-and-css-color-contrast/

IEEE

" » Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/04/27/create-a-color-theme-with-css-relative-color-syntax-css-color-mix-and-css-color-contrast/. [Accessed: ]

rf:citation

» Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast() | Bramus! | Sciencx | https://www.scien.cx/2021/04/27/create-a-color-theme-with-css-relative-color-syntax-css-color-mix-and-css-color-contrast/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.