huetiful

huetiful copied to clipboard

📜 API · 🐞 Report Bug · 🍩 Request Feature · 🧠 Wiki

• Description
  • Features
• Installation
  • Using a package manager
  • In the browser and via CDNs
• Quickstart
• Community
• Contributing
  • References

Description

huetiful-js is a small (~15kB) & fast library for color manipulation written in JavaScript.

It is function oriented and borrows a lot of its features from color theory but tries to hide away the science from the developer.

The library aims to parse colors from as many types as possible allowing freedom to define our color tokens as we see fit as well as parse colors from other source. For instance, methods such as the HTML Canvas API's getImageData() method. The collection methods try to be as generic as possible by treating ArrayLike and Map-like objects as valid color collections so long as the values are parseable color tokens.

It uses Culori under the hood which provides access to low level functions for color conversions and other necessary bells and whistles that this library depends on. It works both in Node and the browser.

Features

• Filtering collections of colors by using the values of their properties as ranges. For example distance against a comparison color and luminance.
• Sorting collections of colors in by their properties. For example using saturation or hue in either descending or ascending order
• Creating custom palettes and color scales
• Manipulating individual color tokens for example setting and querying properties
• Predicate functions for determining the properties of a color e.g chromaticity or overtone.
• Calculating values of central tendency and other statistical values from collections of colors
• Wrapping collections of colors/individual color tokens similar to Lodash's _.chain utility allowing method chaining before returning our final output.
• Color maps for Colorbrewer, TailwindCSS and CSS named colors
• Converting colors across different types including numbers, strings (all CSS parseable string represantations of color), plain objects, arrays and even boolean values

Installation

Using a package manager

Note that the library is ESM and UMD only.

Assuming you already have Node already installed, you can add the package using npm/yarn or any other Node based package manager:

npm i huetiful-js

Or:

yarn install huetiful-js

In the browser and via CDNs

You can use also a CDN in this example, jsdelivr to load the library remotely:

import {...} from 'https://cdn.jsdelivr.net/npm/huetiful-js/lib/huetiful.esm.js'

Or load the library as a UMD glabal (huetiful) in your HTML file using a <script> tag:

# With script tag

<script src='https://cdn.jsdelivr.net/npm/huetiful-js/dist/huetiful.umd.js'></script>

Quickstart

See the Quickstart here

Community

See the discussions and just say hi, or share a coding meme (whatever breaks the ice🏔️)

Contributing

This project is fully open source! Contributions of any kind are greatly appreciated! See🔍 the contributing page on the documentation site) file for more information on how to get started.

References

This project is a result of open source resources from many places all over the Internet. See the references here

 License ⚖️

 © 2024, xml-wizard
 Released under the  Apache 2.0 license.
 🧪 & 🔬 with 🥃 in Crowhill,ZW