ltc-color-palettes-js

Art-inspired colour palettes for JavaScript — a port of the ltc R package.

🎨 Show the demo

Install

npm install @leoneljdias/ltc-color-palettes-js

Then import in your project:

import { ltc, listPalettes, plotLtc } from "@leoneljdias/ltc-color-palettes-js";

Or use directly in the browser via a CDN:

<script type="module">
  import { ltc } from "https://cdn.jsdelivr.net/npm/@leoneljdias/ltc-color-palettes-js/src/index.js";
</script>

Palettes in action

Every palette in the package works as a discrete scale, a continuous scale, or a diverging one.

How can I use ltc-color-palettes-js?

Show all palettes

import { listPalettes } from "@leoneljdias/ltc-color-palettes-js";
console.log(listPalettes());
// ["paloma", "maya", "dora", "ploen", "olga", "mterese", ...]

Choose a palette and print it

import { ltc, plotLtc } from "@leoneljdias/ltc-color-palettes-js";

const alger = ltc("alger");
console.log(alger);
// ["#000000", "#1A5B5B", "#ACC8BE", "#F4AB5C", "#D1422F"]

// In a browser:
document.body.innerHTML = plotLtc(alger);

Bird visualization

import { ltc, bird } from "@leoneljdias/ltc-color-palettes-js";

const pal = ltc("pantone23");
// Requires at least 5 colors
const svg = bird(pal);
document.body.innerHTML = svg;

Adjust a palette — darken, brighten, or desaturate

import { ltc, adjustLtc, desaturateLtc } from "@leoneljdias/ltc-color-palettes-js";

const maya = ltc("maya");
adjustLtc(maya, -30);   // darker
adjustLtc(maya,  30);   // lighter
desaturateLtc(maya, 0.6); // muted

// Tune individual colours
adjustLtc(maya, -25, [1, 4]);  // darken colors at positions 1 and 4

Custom per-color adjustment

import { customAdjustLtc } from "@leoneljdias/ltc-color-palettes-js";
customAdjustLtc(maya, [-40, -20, 0, 20, 40]);

Check colour-vision accessibility

import { ltcCvd } from "@leoneljdias/ltc-color-palettes-js";

const cvd = ltcCvd("maya");
console.log(cvd);
// { normal: [...], deuteranopia: [...], protanopia: [...], tritanopia: [...] }

const mild = ltcCvd("expevo", 0.6); // milder simulation

Differences from the original R package

• Zero production dependencies. All color conversions are pure JS.
• plotLtc(), bird() return SVG strings instead of ggplot2 objects.
• ltcCvd() returns an object with arrays instead of a plot.
• The palette data and hex values are identical to the R package v0.4.0.
• This is not affiliated with the original author — a reimplementation in JavaScript.

Contributions

The original ltc R package is developed and maintained by Loukas Theodosiou. The palettes draw inspiration from the drawings and life of Pablo Picasso as well as from several books.

This JavaScript port is maintained on GitHub. Issues and pull requests are welcome.

Roadmap

Version 1.0.0 mirrors the CRAN version of the original R package.