Color Palettes

Browse curated palettes for websites, web, mobile and desktop apps. Copy the code, edit and swap colours, or generate your own.

Use it from npm

Every palette, straight from npm

Colour sets plus the contrast, harmony and readability maths behind them.

adysrev0.2.0

$npm install adysre

React 18+React 19 recommended. Next.js, Vite, Remix and Astro all work.
Styles, onceTailwind v4, or import the pre-compiled stylesheet if you do not use it.
ESM onlyImport, do not require. Node 20+ if you server-render.

Wire up the styles once

Brings the design tokens and tells Tailwind to scan the package. Skip it and import the pre-compiled stylesheet instead.

app/globals.css

@import "tailwindcss";
@import "adysre/styles.css";

Import from adysre/palettes

Its own entry point, so nothing else comes along for the ride.

app/page.tsx

import { getPalette, PALETTES } from 'adysre/palettes';

const palette = getPalette('nordic-calm');
palette?.colors; // ['#2e3440', '#3b4252', …]

// The same colour maths the ADYSRE palette editor runs on:
import { contrastRatio, readableText, harmony } from 'adysre/palettes';

readableText('#2563eb');              // '#ffffff'
contrastRatio('#111827', '#f9fafb');  // 16.4
harmony('#2563eb', 'triadic', 5);