huebris.js

Quickstart

1. Download the latest version:

   Latest release on GitHub

2. Install to your project, ie:

   mv huebris.min.js /path/to/site/js/vendor/huebris/ 

3. Add script to page:

   <script src="/js/vendor/huebris/huebris.min.js"></script>
   <script>huebris.init();</script>

4. Set base hues:

   html {
     --huebris-primary:   purple;
     --huebris-secondary: turquoise;
   }

Configuration

JavaScript Init Variables

You can change the element where you set your CSS variables and set a custom prefix on init, ie:

huebris.init( 'html', 'huebris' );

CSS Variables

Most options are managed via CSS variables. Simply set any variables for options you want to change in your site’s CSS.

CSS variables that start with --huebris- (or your custom-defined prefix) get processed as hues:

html {

  --huebris-primary:   purple;
  --huebris-secondary: #669966;
  --huebris-tertiary:  hsl( 30, 100%, 50% );

}

Other options are set via pre-defined CSS variables beginning with --huebrisconf-.

Optionally tint black and white for a hued cast to the palette (default is simply black and white):

html {

  --huebrisconf-black: color-mix( in srgb, black 90%, khaki 10% );
  --huebrisconf-white: color-mix( in srgb, white 90%, khaki 10% );

}

Step settings - control how many variations to generate:

html {

  /* 2-6, or 0 to skip: number of variations to generate */
  --huebrisconf-tint-steps:  '4';
  --huebrisconf-tone-steps:  '4';
  --huebrisconf-shade-steps: '4';
  --huebrisconf-alpha-steps: '4';

  /* overrides the above settings if > 0: */
  --huebrisconf-global-steps: '0';

}

Output settings:

html {

  /* generate utility classes or just vars */
  --huebrisconf-utility-classes: 'true';

  /* 'value' (alpha60), 'steps' (alpha3), or 'compact' (a3) */
  --huebrisconf-output-mode: 'steps';

  /* CSS color-mix interpolation options           */
  /*   note - hue mode only applies to polar color */
  /*   spaces: (hsl, hwb, lch, oklch, lab, oklab)  */
  --huebrisconf-color-mode: 'srgb';
  --huebrisconf-hue-mode:   'shorter';

  /* outputs debug info to console if true */
  --huebrisconf-debug: 'false';   

}

Step Options

Steps map to variations with the following percentages of mixed-in color:

For example — with 5 steps, --primary-tint4 would map to:

color-mix( in srgb, var(--primary) 33%, var(--white) 67% );

Generated Color Palette Display

Helper functions are provided to display the generated palette for development and debugging:

Inject the palette into an existing element:

<div id="palette"></div>

<script>
  huebris.showPalette( document.getElementById( 'palette' ) );
</script>

Or get the palette as an object or string:

<script>
  const palette = huebris.getPalette( 'obj' ); // or 'str'
</script>

---

Full documentation can be found on GitHub.

Example

Setup

<style>
  html {
    --huebris-primary: purple;
  }
</style>

Output

/* Variables */
html {
    --black: black;
    --white: white;
    --primary: purple;
    --grey: color-mix( in srgb, var(--black) 50%, var(--white) 50% );
    --primary-tint1: color-mix( in srgb, var(--primary) 80%, var(--white) 20% );
    --primary-tint2: color-mix( in srgb, var(--primary) 60%, var(--white) 40% );
    --primary-tint3: color-mix( in srgb, var(--primary) 40%, var(--white) 60% );
    --primary-tint4: color-mix( in srgb, var(--primary) 20%, var(--white) 80% );
    --grey-tint1: color-mix( in srgb, var(--grey) 80%, var(--white) 20% );
    --grey-tint2: color-mix( in srgb, var(--grey) 60%, var(--white) 40% );
    --grey-tint3: color-mix( in srgb, var(--grey) 40%, var(--white) 60% );
    --grey-tint4: color-mix( in srgb, var(--grey) 20%, var(--white) 80% );
    --primary-tone1: color-mix( in srgb, var(--primary) 80%, var(--grey) 20% );
    --primary-tone2: color-mix( in srgb, var(--primary) 60%, var(--grey) 40% );
    --primary-tone3: color-mix( in srgb, var(--primary) 40%, var(--grey) 60% );
    --primary-tone4: color-mix( in srgb, var(--primary) 20%, var(--grey) 80% );
    --primary-shade1: color-mix( in srgb, var(--primary) 80%, var(--black) 20% );
    --primary-shade2: color-mix( in srgb, var(--primary) 60%, var(--black) 40% );
    --primary-shade3: color-mix( in srgb, var(--primary) 40%, var(--black) 60% );
    --primary-shade4: color-mix( in srgb, var(--primary) 20%, var(--black) 80% );
    --grey-shade1: color-mix( in srgb, var(--grey) 80%, var(--black) 20% );
    --grey-shade2: color-mix( in srgb, var(--grey) 60%, var(--black) 40% );
    --grey-shade3: color-mix( in srgb, var(--grey) 40%, var(--black) 60% );
    --grey-shade4: color-mix( in srgb, var(--grey) 20%, var(--black) 80% );
    --black-alpha1: color-mix( in srgb, var(--black) 80%, transparent 20% );
    --black-alpha2: color-mix( in srgb, var(--black) 60%, transparent 40% );
    --black-alpha3: color-mix( in srgb, var(--black) 40%, transparent 60% );
    --black-alpha4: color-mix( in srgb, var(--black) 20%, transparent 80% );
    --white-alpha1: color-mix( in srgb, var(--white) 80%, transparent 20% );
    --white-alpha2: color-mix( in srgb, var(--white) 60%, transparent 40% );
    --white-alpha3: color-mix( in srgb, var(--white) 40%, transparent 60% );
    --white-alpha4: color-mix( in srgb, var(--white) 20%, transparent 80% );
    --grey-alpha1: color-mix( in srgb, var(--grey) 80%, transparent 20% );
    --grey-alpha2: color-mix( in srgb, var(--grey) 60%, transparent 40% );
    --grey-alpha3: color-mix( in srgb, var(--grey) 40%, transparent 60% );
    --grey-alpha4: color-mix( in srgb, var(--grey) 20%, transparent 80% );
    --primary-alpha1: color-mix( in srgb, var(--primary) 80%, transparent 20% );
    --primary-alpha2: color-mix( in srgb, var(--primary) 60%, transparent 40% );
    --primary-alpha3: color-mix( in srgb, var(--primary) 40%, transparent 60% );
    --primary-alpha4: color-mix( in srgb, var(--primary) 20%, transparent 80% );
    --primary-tint1-alpha1: color-mix( in srgb, var(--primary-tint1) 80%, transparent 20% );
    --primary-tint1-alpha2: color-mix( in srgb, var(--primary-tint1) 60%, transparent 40% );
    --primary-tint1-alpha3: color-mix( in srgb, var(--primary-tint1) 40%, transparent 60% );
    --primary-tint1-alpha4: color-mix( in srgb, var(--primary-tint1) 20%, transparent 80% );
    --primary-tint2-alpha1: color-mix( in srgb, var(--primary-tint2) 80%, transparent 20% );
    --primary-tint2-alpha2: color-mix( in srgb, var(--primary-tint2) 60%, transparent 40% );
    --primary-tint2-alpha3: color-mix( in srgb, var(--primary-tint2) 40%, transparent 60% );
    --primary-tint2-alpha4: color-mix( in srgb, var(--primary-tint2) 20%, transparent 80% );
    --primary-tint3-alpha1: color-mix( in srgb, var(--primary-tint3) 80%, transparent 20% );
    --primary-tint3-alpha2: color-mix( in srgb, var(--primary-tint3) 60%, transparent 40% );
    --primary-tint3-alpha3: color-mix( in srgb, var(--primary-tint3) 40%, transparent 60% );
    --primary-tint3-alpha4: color-mix( in srgb, var(--primary-tint3) 20%, transparent 80% );
    --primary-tint4-alpha1: color-mix( in srgb, var(--primary-tint4) 80%, transparent 20% );
    --primary-tint4-alpha2: color-mix( in srgb, var(--primary-tint4) 60%, transparent 40% );
    --primary-tint4-alpha3: color-mix( in srgb, var(--primary-tint4) 40%, transparent 60% );
    --primary-tint4-alpha4: color-mix( in srgb, var(--primary-tint4) 20%, transparent 80% );
    --grey-tint1-alpha1: color-mix( in srgb, var(--grey-tint1) 80%, transparent 20% );
    --grey-tint1-alpha2: color-mix( in srgb, var(--grey-tint1) 60%, transparent 40% );
    --grey-tint1-alpha3: color-mix( in srgb, var(--grey-tint1) 40%, transparent 60% );
    --grey-tint1-alpha4: color-mix( in srgb, var(--grey-tint1) 20%, transparent 80% );
    --grey-tint2-alpha1: color-mix( in srgb, var(--grey-tint2) 80%, transparent 20% );
    --grey-tint2-alpha2: color-mix( in srgb, var(--grey-tint2) 60%, transparent 40% );
    --grey-tint2-alpha3: color-mix( in srgb, var(--grey-tint2) 40%, transparent 60% );
    --grey-tint2-alpha4: color-mix( in srgb, var(--grey-tint2) 20%, transparent 80% );
    --grey-tint3-alpha1: color-mix( in srgb, var(--grey-tint3) 80%, transparent 20% );
    --grey-tint3-alpha2: color-mix( in srgb, var(--grey-tint3) 60%, transparent 40% );
    --grey-tint3-alpha3: color-mix( in srgb, var(--grey-tint3) 40%, transparent 60% );
    --grey-tint3-alpha4: color-mix( in srgb, var(--grey-tint3) 20%, transparent 80% );
    --grey-tint4-alpha1: color-mix( in srgb, var(--grey-tint4) 80%, transparent 20% );
    --grey-tint4-alpha2: color-mix( in srgb, var(--grey-tint4) 60%, transparent 40% );
    --grey-tint4-alpha3: color-mix( in srgb, var(--grey-tint4) 40%, transparent 60% );
    --grey-tint4-alpha4: color-mix( in srgb, var(--grey-tint4) 20%, transparent 80% );
    --primary-tone1-alpha1: color-mix( in srgb, var(--primary-tone1) 80%, transparent 20% );
    --primary-tone1-alpha2: color-mix( in srgb, var(--primary-tone1) 60%, transparent 40% );
    --primary-tone1-alpha3: color-mix( in srgb, var(--primary-tone1) 40%, transparent 60% );
    --primary-tone1-alpha4: color-mix( in srgb, var(--primary-tone1) 20%, transparent 80% );
    --primary-tone2-alpha1: color-mix( in srgb, var(--primary-tone2) 80%, transparent 20% );
    --primary-tone2-alpha2: color-mix( in srgb, var(--primary-tone2) 60%, transparent 40% );
    --primary-tone2-alpha3: color-mix( in srgb, var(--primary-tone2) 40%, transparent 60% );
    --primary-tone2-alpha4: color-mix( in srgb, var(--primary-tone2) 20%, transparent 80% );
    --primary-tone3-alpha1: color-mix( in srgb, var(--primary-tone3) 80%, transparent 20% );
    --primary-tone3-alpha2: color-mix( in srgb, var(--primary-tone3) 60%, transparent 40% );
    --primary-tone3-alpha3: color-mix( in srgb, var(--primary-tone3) 40%, transparent 60% );
    --primary-tone3-alpha4: color-mix( in srgb, var(--primary-tone3) 20%, transparent 80% );
    --primary-tone4-alpha1: color-mix( in srgb, var(--primary-tone4) 80%, transparent 20% );
    --primary-tone4-alpha2: color-mix( in srgb, var(--primary-tone4) 60%, transparent 40% );
    --primary-tone4-alpha3: color-mix( in srgb, var(--primary-tone4) 40%, transparent 60% );
    --primary-tone4-alpha4: color-mix( in srgb, var(--primary-tone4) 20%, transparent 80% );
    --primary-shade1-alpha1: color-mix( in srgb, var(--primary-shade1) 80%, transparent 20% );
    --primary-shade1-alpha2: color-mix( in srgb, var(--primary-shade1) 60%, transparent 40% );
    --primary-shade1-alpha3: color-mix( in srgb, var(--primary-shade1) 40%, transparent 60% );
    --primary-shade1-alpha4: color-mix( in srgb, var(--primary-shade1) 20%, transparent 80% );
    --primary-shade2-alpha1: color-mix( in srgb, var(--primary-shade2) 80%, transparent 20% );
    --primary-shade2-alpha2: color-mix( in srgb, var(--primary-shade2) 60%, transparent 40% );
    --primary-shade2-alpha3: color-mix( in srgb, var(--primary-shade2) 40%, transparent 60% );
    --primary-shade2-alpha4: color-mix( in srgb, var(--primary-shade2) 20%, transparent 80% );
    --primary-shade3-alpha1: color-mix( in srgb, var(--primary-shade3) 80%, transparent 20% );
    --primary-shade3-alpha2: color-mix( in srgb, var(--primary-shade3) 60%, transparent 40% );
    --primary-shade3-alpha3: color-mix( in srgb, var(--primary-shade3) 40%, transparent 60% );
    --primary-shade3-alpha4: color-mix( in srgb, var(--primary-shade3) 20%, transparent 80% );
    --primary-shade4-alpha1: color-mix( in srgb, var(--primary-shade4) 80%, transparent 20% );
    --primary-shade4-alpha2: color-mix( in srgb, var(--primary-shade4) 60%, transparent 40% );
    --primary-shade4-alpha3: color-mix( in srgb, var(--primary-shade4) 40%, transparent 60% );
    --primary-shade4-alpha4: color-mix( in srgb, var(--primary-shade4) 20%, transparent 80% );
    --grey-shade1-alpha1: color-mix( in srgb, var(--grey-shade1) 80%, transparent 20% );
    --grey-shade1-alpha2: color-mix( in srgb, var(--grey-shade1) 60%, transparent 40% );
    --grey-shade1-alpha3: color-mix( in srgb, var(--grey-shade1) 40%, transparent 60% );
    --grey-shade1-alpha4: color-mix( in srgb, var(--grey-shade1) 20%, transparent 80% );
    --grey-shade2-alpha1: color-mix( in srgb, var(--grey-shade2) 80%, transparent 20% );
    --grey-shade2-alpha2: color-mix( in srgb, var(--grey-shade2) 60%, transparent 40% );
    --grey-shade2-alpha3: color-mix( in srgb, var(--grey-shade2) 40%, transparent 60% );
    --grey-shade2-alpha4: color-mix( in srgb, var(--grey-shade2) 20%, transparent 80% );
    --grey-shade3-alpha1: color-mix( in srgb, var(--grey-shade3) 80%, transparent 20% );
    --grey-shade3-alpha2: color-mix( in srgb, var(--grey-shade3) 60%, transparent 40% );
    --grey-shade3-alpha3: color-mix( in srgb, var(--grey-shade3) 40%, transparent 60% );
    --grey-shade3-alpha4: color-mix( in srgb, var(--grey-shade3) 20%, transparent 80% );
    --grey-shade4-alpha1: color-mix( in srgb, var(--grey-shade4) 80%, transparent 20% );
    --grey-shade4-alpha2: color-mix( in srgb, var(--grey-shade4) 60%, transparent 40% );
    --grey-shade4-alpha3: color-mix( in srgb, var(--grey-shade4) 40%, transparent 60% );
    --grey-shade4-alpha4: color-mix( in srgb, var(--grey-shade4) 20%, transparent 80% );
}

/* Optional utility classes: */
.black { background-color: var(--black); }
.black-text { color: var(--black); }
.white { background-color: var(--white); }
.white-text { color: var(--white); }
.primary { background-color: var(--primary); }
.primary-text { color: var(--primary); }
.grey { background-color: var(--grey); }
.grey-text { color: var(--grey); }
/* etc... */

Palette Display