sass-hsb-functions
Description
Graphic design software typically displays colors in the HSB format. However, Sass currently only provides functions to manipulate HSL colors. This project provides some functions that can be used to convert colors from HSB to HSL format and manipulate them.
Installation
You can install the sass-hsb-functions
package via npm:
npm install sass-hsb-functions
Usage
Once installed, you can import the functions in your Sass project:
@use "sass-hsb-functions/hsb-functions";
// @use "{path-to-node_modules}/sass-hsb-functions/hsb-functions"; // if not using vite, webpack or parcel.
// Use the functions to manipulate HSB colors
$colorHSL: hsb-functions.hsb-to-color(
305,
84%,
95%
); // hsb(305, 84%, 95%) => hsl(305, 88.864142539%, 55.1%)
$colorHSL: hsb-functions.change-color-hsb(
$color: $colorHSL,
$saturation: 85%,
$brightness: 100%,
); // hsb(305, 85%, 100%) => hsl(305, 100%, 57.5%)
$colorHSL: hsb-functions.adjust-color-hsb(
$color: $colorHSL,
$saturation: 10%,
); // hsb(305, 95%, 100%) => hsl(305, 100%, 52.5%)
Functions
hsb-to-color($hue, $saturation, $brightness, $alpha: 1)
Converts an HSB color to HSLA.
$hue
: must have either the unit deg or no unit.$saturation
: must be between 0% and 100% (inclusive) Unitless values are also accepted.$brightness
: must be between 0% and 100% (inclusive) Unitless values are also accepted.$alpha
: optional, must be unitless and between 0 and 1 (inclusive).
Returns the equivalent HSLA color value.
change-color-hsb($color, $saturation: null, $brightness: null)
Sets saturation and/or brightness properties (HSB) of $color to new values. It is similar to the built-in change-color()
function on Sass.
$color
: valid SASS color value.$saturation
: must be between 0% and 100% (inclusive) Unitless values are also accepted.$brightness
: must be between 0% and 100% (inclusive) Unitless values are also accepted.
Returns the equivalent HSLA color value.
adjust-color-hsb($color, $saturation: 0%, $brightness: 0%)
Increases or decreases saturation and/or brightness properties (HSB) of $color by fixed amounts. It is similar to the built-in adjust-color()
function on Sass.
$color
: valid SASS color value.$saturation
: must be between 0% and 100% (inclusive) Unitless values are also accepted.$brightness
: must be between 0% and 100% (inclusive) Unitless values are also accepted.
Returns the equivalent HSLA color value.
Contributing
Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue on the GitHub repository.
License
This project is licensed under the MIT License.