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