/sass-okhsv-okhsl

SASS functions to convert OkHSV and OkHSL to RGB. Credit to Björn Ottosson

Primary LanguageSCSSMIT LicenseMIT

OkHSV / OkHSL to RGB Sass Functions

Sass functions to convert OkHSV and OkHSL to sRGB.

Credit to Björn Ottosson

Install

$ npm i -D @brybrant/sass-okhsv-okhsl

Setup

@use '~/node_modules/@brybrant/sass-okhsv-okhsl' as convert;

$red: convert.okhsv_to_rgba(29deg, 100%, 100%); // rgb(255, 0, 4)

$blue: convert.okhsl_to_rgba(265, 100%, 0.37); // rgb(14, 3, 255)

$blue_hex: convert.color_to_hex($blue); // #0E03FF

Functions

okhsv_to_rgba( $hue, $saturation, $value, $alpha )

Converts OkHSV color space to sRGB color space.

  • $hue

    A number or an angle representing the color's hue angle in OkHSV color space.
    ▪ Default: 0deg

  • $saturation

    A float (between 0 and 1) or percentage representing the color's saturation.
    1 or 100% is completely saturated, while 0 is completely unsaturated (gray).
    ▪ Default: 1

  • $value

    A float (between 0 and 1) or percentage representing the color's brightness.
    1 or 100% is completely bright, while 0 is completely black.
    ▪ Default: 1

  • $alpha

    An alpha value representing the color's transparency.
    1 or 100% is completely opaque, while 0 is completely transparent.
    ▪ Default: 1

Usage example

@debug okhsv_to_rgba(29deg, 1, 100%); // rgb(255, 0, 4)

@debug okhsv_to_rgba($hue: 170); // rgb(0, 255, 201)

okhsl_to_rgba( $hue, $saturation, $lightness, $alpha )

Converts OkHSL color space to sRGB color space.

  • $hue

    A number or an angle representing the color's hue angle in OkHSL color space.
    ▪ Default: 0deg

  • $saturation

    A float (between 0 and 1) or percentage representing the color's saturation.
    1 or 100% is completely saturated, while 0 is completely unsaturated (gray).
    ▪ Default: 1

  • $lightness

    A float (between 0 and 1) or percentage representing the color's lightness.
    1 or 100% is white, 0 is black, and 0.5 or 50% is "normal".
    ▪ Default: 0.5

  • $alpha

    An alpha value representing the color's transparency.
    1 or 100% is completely opaque, while 0 is completely transparent.
    ▪ Default: 1

Usage example

@debug okhsl_to_rgba(265, 100%, 0.37); // rgb(14, 3, 255)

@debug okhsl_to_rgba($lightness: 40%); // rgb(172, 0, 89)

color_to_hex( $color )

Converts any color to hexadecimal format.

  • $color

    Any valid CSS color (rgb, hsl, etc.)

Usage example

@debug color_to_hex(okhsv_to_rgba(143deg, 1, 1, 0.5)); // #00FF1F80

@debug color_to_hex(rgb(0 255 31 / 0.5)); // #00FF1F80