Skip to content

JavaScript utility library for simple 🧮, fast ⏱️ and accessible ♿ color manipulation.

License

Notifications You must be signed in to change notification settings

prjctimg/huetiful

Repository files navigation

NPM publish 📦 NPM Downloads

huetiful-logo

JavaScript utility library for simple, fast and accessible color manipulation.

Features

  • Collection methods for manipulating colors using the values of their properties as criteria.
  • Color maps from Tailwind and ColorBrewer exposed as wrapper functions to help you kickstart your palettes.
  • Utilities for setting and querying color properties.
  • Wrapper functions allowing method chaining for all the utilities in the API.
  • Color maps for Colorbrewer, TailwindCSS and CSS named colors exposed as wrapper functions.
  • Color token parser for all types including numbers, strings (all CSS parseable string represantations of color), plain objects, arrays (or ArrayLike objects) and even boolean values.
  • Accessibility utilities when handling color in design.

Installation

As of v3.0.0 the library is ESM only. You can compile your own UMD build from source if you want it.

Using a package manager

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 add huetiful-js

# For GitHub Package use @prjctimg/huetiful-js
Quick check 😄
import { achromatic, stats, colors } from 'huetiful-js';

let all = colors('all')
let grays = all.filter(achromatic)

console.log(grays)

console.log(stats(all))
In the browser and via CDNs

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

Make sure to set the type of the script tag to module when you load it in your HTML.

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

Or load the library as your HTML file using a <script> tag:

# With script tag

<script type='module' src='https://cdn.jsdelivr.net/npm/huetiful-js/lib/huetiful.min.js'></script


<!-- Or, if you like it this way -->

<script>

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

let myPalette = colors('all','700')

</script>

Quickstart

See the Quickstart here

Community

See the discussions

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.

License ⚖️

 © 2024, Dean Tarisai
 
Released under the Apache 2.0 license.
🧪 & 🔬 with 🥃 in Crowhill,ZW

About

JavaScript utility library for simple 🧮, fast ⏱️ and accessible ♿ color manipulation.

Resources

License

Code of conduct

Stars

Watchers

Forks

Sponsor this project

Packages