Getting started

There's no package to install. Chromateque ships as three plain JavaScript files that each expose a single global: colors, palettes, and the generator's helper functions. Drop the file you need into a page and reference the data directly.

<!-- pull in just the data you need -->
<script src="js/colors.js"></script>
<script>
  console.log(colors.length, "colors loaded");
</script>

Color list

js/colors.js exports a flat array of color objects, plus the rendering logic that powers the /colors.html archive. Filter it by category the same way the tabs on that page do.

// find every blue in the archive
const blues = colors.filter(c => c.category === "Blue");

Palette data

js/palettes.js exports a palettes array along with renderPaletteGrid(el, list), the same function used on the /palettes.html archive to draw palette cards and filter them by tag.

// render every "Warm" palette into a container
const warm = palettes.filter(p => p.tags.includes("Warm"));
renderPaletteGrid(document.getElementById("my-grid"), warm);

Generator

The homepage generator is built on js/generator.js, which converts an HSL seed into a hex palette using one of four color-theory schemes: analogous, complementary, triadic and monochrome.

// generate a triadic palette from a random hue
const { key, swatches } = generatePalette("triadic");
swatches.forEach(s => console.log(s.hex));

API reference

Color object

Palette object

Shortcuts

On the color and palette grids, click any swatch to copy its hex code to your clipboard. In the generator, press Space while the section is in view to draw a new palette without reaching for the mouse.

Contributing

Chromateque is maintained on GitHub. Palette and color suggestions, bug reports and pull requests are all welcome.