@evilmartians/harmony

Harmony: Accessible UI Color Palette

Installation

npm install @evilmartians/harmony

Usage

Harmony can work as drop-in replacement for the Tailwind color palette

// tailwind.config.js

import harmonyPalette from "@evilmartians/harmony/tailwind";

export default {
  theme: {
    colors: harmonyPalette,
  },
  //...
};

Polyfill

⚠️ Harmony uses oklch colors and requires a polyfill.

1. Install postcss plugin that polyfills oklch colors

npm install -D @csstools/postcss-oklab-function

1. Enable it in postcss.config.js:

export default {
    plugins: {
        tailwindcss: {},
+        '@csstools/postcss-oklab-function': { 'preserve': true },
        autoprefixer: {},
    },
}