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