2 NEW CSS Color Techniques

A website is incomplete without color because color highlights important elements of the website and affects how people feel about the website. Different colors create different emotions in people. Formerly, we had very few ways to use colors. For example - HEX, RGB, etc.

Now, in the new CSS update, some features have come that can be used more beautifully and make the website look modern. So today we will talk about 2 new color features.

Feature 1: OKLCH

OKLCH display colors close to the way the human eye sees colors. It was originally created by Björn Ottosson in December 2020. The function has been widely implemented in most modern browsers since May 2023.

Formerly, we used RGB or HSL, but many times these did not represent colors correctly. For example, one color was a little brighter, another less, then it was really difficult to understand the difference.

HTML

For the HTML code, we don’t need anything much but just a div element with the class name ‘box’.

<div class="box"></div>

CSS

We used OKLCH for the light green background color of the box, with a brightness of 70%, a glossiness of 0.2, and a hue of 30.

.box {
  width: 200px;
  height: 200px;
  background: oklch(70% 0.2 30);
}

Feature 1: Color Mix

This is a new CSS function with which we can create new colors by mixing two or more colors. The function is actually part of CSS Color Module Level 5. It will be available in browsers mainly between 2022 and 2023.

Support first came to Safari 16.2 in December 2022. Then it was added to Chrome 111 and Edge 111 in March 2023.

Formerly, if we were to mix two colors to create a new color, we would need separate software. But now CSS has the 'color-mix()' function. With which we can easily mix colors directly in the browser.

With this function, you can mix two colors in a specific ratio to create new colors. The biggest advantage is that it can produce more accurate colors.

CSS

Here we are making purple color by mixing red and blue colors.

.box {
  width: 200px;
  height: 200px;
  background: color-mix(in srgb, red 50%, blue 50%);
}

Answering one of the common questions, ‘Why is SCSS used?’
– SCSS is used to make web design code shorter and more beautiful.

Are you interested in CSS art? We have drawn pictures of the elephant, fox etc. using only CSS properties. These tutorials will entertain you.

I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also, to stay updated with the latest tutorial, subscribe to me on Youtube.