@heyeso/color-range NPM

Color Range

version size downloads

Description

Color Range is a TypeScript library allows you to generate a percentage of mix between two colors within given a range. The provided range will determine the available midpoints, with each midpoint being a percentage of mix. It uses a linear interpolation algorithm to blend the two colors together, resulting in a smooth transition between the two. The library provides a simple and easy-to-use API, allowing you to specify the colors and the range for the blend. It can be useful for creating color schemes, gradient backgrounds, and other design elements in web and graphic design projects. It also support different color format like RGB, RGBA, and HEX. With this library, you can easily create dynamic and visually striking designs with minimal code.

Getting Started

Dependencies

Installing

npm i @heyeso/color-range

Usage

`colorRange()`

import { colorRange } from "@heyeso/color-range";

/**
 * Default colors for mapping.
 */
export const test_colors = [
    [255, 36, 0],
    [255, 0, 0],
  ];
/**
 * Default ranges for mapping.
 */
export const test_ranges = [0, 100];

const temperatureMap = colorRange(test_colors, test_ranges);
const temp1 = temperatureMap.getColor(50);

temp1?.rgb; // { r: 255, g: 18, b: 0 }
temp1?.toString; // "rgb(255, 18, 0)"
temp1?.toHex; // "#ff1200"

`createColor()`

import { createColor } from "@heyeso/color-range";

const color = createColor([3, 40, 69]);
color.toString; // "rgb(3, 40, 69)"
color.toHex; // "#032845"

isRGB()
isRGBString()
isHex()
stringToRGB()
hexToRGB()
arrayToRGB()

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!