SCSS - detect color blackness

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

Quick solution:

xxxxxxxxxx

@use 'sass:color';

​

@if (color.blackness(red) > 50%) {

    // ...

}

Where:

• @use 'sass:color' imports the color module,
• color.blackness() is a function that calculates blackness component value (between 0% and 100%) in HWB color model,
• red is a color name that we use in blackness component value calculation.

In this example, we check $primary-color blackness. If the blackness is greater than 50%, we set the text color to white, otherwise we set it to black. This may be useful in web site conditional theming.

style.scss file:

xxxxxxxxxx

@use 'sass:color';

​

$primary-color: black;

​

div.element {

    background: $primary-color;

    @if (color.blackness($primary-color) > 50%) {

        color: white;

    } @else {

        color: black;

    }

}

style.css file (compiled from style.scss):

xxxxxxxxxx

div.element {

    background: black;

    color: white;

}

Final result for two different $primary-color values:

1. SASS - detect color whiteness

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

1. HWB color model - Wikipedia