This package has been deprecated

Author message:

package renamed to hueman

Huebris

Tiny helpers for HSL colors

Features

• Brightness / Saturation calibration across hues
• Find intermediate hues (good for gradients)
• Works on both server and client

Usage

Installation

Guided tutorial on path.cafe (coming soon)

Via NPM:

npm install huebris

Script tag (via unpkg):

<!-- Available as global variable huebris -->
<script src="https://unpkg.com/huebris" />

Browser Module (via snowpack):

// OR import huebris from 'https://cdn.skypack.dev/huebris'
import { mix, lumCorrection, hsl2 } from 'https://cdn.skypack.dev/huebris';

API

mix(hue1,hue2,ratio)

Returns the mixed hue between hue1 and hue2 at a desired ratio, where ratio = 0 results in hue1, and ratio = 1 results in hue2. Will correctly wrap across 0/360 (both 0 and 360 are red in HSL)

  console.log(100, 200, 0.5) // "150"
  console.log(340, 100, 0.5) // "40"
  console.log(0, 200, 0.75) // "150"

lumCorrection(hue)

Returns a value [0,1] that represents the corrective coefficient to equalize the brightness based on the hue. WIP - formula bound to change (!)

  console.log(0) // "0.8" (red)
  console.log(120) // "0.6" (green)
  console.log(240) // "1.0" (blue)

hsl2(h,s,l)

Returns a CSS string with corrected saturation and luminance values

  console.log(hsl2(120, 100, 50)) // hsl(120, 80%, 40%) 

Details

HSL based themes

Coming soon

Luminance Calculations

Coming soon

---

Development

Contributing Guidelines

Commands

Guided process to commit changes and/or submit a pull request

npm run save

Roadmap

• Accessibility contrast guarantees with automated browser testing
• Alternate formulations
• Webapp color generator
• Examples & Tutorials

Acknowledgements

• HSLuv
• Color Vision
• Luminance Formulas

License

MIT © Marshall Brandt