调色板

浏览为网站、Web、移动端和桌面应用精选的调色板 -- 复制代码、编辑与交换颜色，或生成你自己的。

从 npm 使用

所有配色，直接从 npm 获取

配色之外，还带上对比度、调和与可读性的计算。

adysrev0.2.0

$npm install adysre

React 18 及以上推荐 React 19。Next.js、Vite、Remix 和 Astro 均可。
样式只接一次Tailwind v4，或直接引入预编译好的样式表。
仅 ESM使用 import，不支持 require。服务端渲染需 Node 20 及以上。

样式只需接一次

引入设计变量并让 Tailwind 扫描本包。不用 Tailwind 就改引预编译样式表。

app/globals.css

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

从 adysre/palettes 引入

独立入口，不会把其他东西一起带进来。

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);