ADYSRE

カラーパレット

ウェブサイト、Web・モバイル・デスクトップアプリ向けの厳選パレットを閲覧。コードをコピーし、色を編集・入れ替え、または自分で生成できます。

npm から使う

すべてのパレットを npm から

カラーセットに加えて、コントラスト・調和・可読性の計算も付いてきます。

adysrev0.2.0
npm install adysre
  • React 18 以上React 19 推奨。Next.js、Vite、Remix、Astro で動作します。
  • スタイルは一度だけTailwind v4、または未使用ならコンパイル済みスタイルシートを読み込みます。
  • ESM のみimport で読み込みます（require は不可）。SSR には Node 20 以上。

スタイルは最初の一度だけ

デザイントークンが入り、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);