SCSS - detect color whiteness

In this article, we would like to show you how to detect color whiteness in HWB model using SCSS.

Quick solution:

xxxxxxxxxx

@use 'sass:color';

​

@if (color.whiteness(red) < 50%) {

    // ...

}

Where:

• whiteness() is a function returns the HWB whiteness of $color - value between 0% and 100%,
• red  is a color value - it can be any color value - rgb / rgba / hex / color name / etc.
• @use 'sass:color' imports the color module.

In this example, we check if the whiteness of the $color passed as argument to the colorText() mixin is less than 50%. If it is, we set the text color to white, otherwise we set it to black. This is very useful for themes on our web page.

Full example of style.scss file:

xxxxxxxxxx

@use 'sass:color';

​

$primary-color: black; /* color variable later assigned as the background of the element */

​

@mixin colorText($color) {

    @if (color.whiteness($color) < 50%) {

        color: white;

    } @else {

        color: black;

    }

}

​

.element {

    @include colorText($primary-color); /* sets the text color depending on $primary-color whiteness */

    background: $primary-color;

}

The style.scss file is compiled to style.css:

xxxxxxxxxx

.element {

    color: white;

    background: black;

}

Final result for two different $primary-color values:

1. SASS - detect color blackness

2. SCSS / SASS - create project with Live Sass Compiler (VS Code)

1. HWB color model - Wikipedia