実装

• culori

  JSnpm i culori

  本ツールの計算エンジン。変換・色差・WCAG 比・ガマット・色覚フィルタまで揃い、必要な関数だけを取り込める。

  converter() / formatCss() / wcagContrast() / differenceCiede2000() / clampChroma() / filterDeficiencyDeuter()

  ドキュメントソース色値 · 拡張色空間 · 相対輝度 · WCAG コントラスト比 · 色差 ΔE · 色差の内訳 · ガマット・出力適合 · 色覚シミュレーション · グレースケール耐性 · トーン展開 · 2色間グラデーション · 色のミックス · 調和スキーム生成

• Color.js

  JSnpm i colorjs.io

  CSS Color 4/5 の仕様に忠実な実装。コントラストのアルゴリズム（WCAG21・APCA・Lstar 等）を選べるのが強み。

  new Color() / .to() / .contrast(bg, "APCA") / .deltaE() / .toGamut()

  ドキュメントソース色値 · 拡張色空間 · ガマット・出力適合 · 色差 ΔE · WCAG コントラスト比 · APCA コントラスト

• chroma.js

  JSnpm i chroma-js

  スケールと補間の定番。段階数を指定した配色の生成や、補間空間の切り替えが短く書ける。

  chroma.scale([...]).mode("oklch") / .bezier() / .luminance()

  ドキュメントソース2色間グラデーション · トーン展開 · 明度・彩度バリエーション · 色相分布 · データビズプレビュー

• colord

  JSnpm i colord

  約 2.5KB の軽量ライブラリ。プラグインで a11y 判定やミックスを足せる。バンドルサイズを削りたい場面向け。

  colord("#3A7BD5").toHex() / .contrast() / プラグイン: a11y, mix, harmonies

  ドキュメント色値 · WCAG コントラスト比 · 色のミックス · 調和スキーム生成

• apca-w3

  JSnpm i apca-w3

  APCA（WCAG 3 ドラフト系の知覚コントラスト）の本家実装。Lc 値を自前で出すならこれ。

  APCAcontrast(sRGBtoY(txt), sRGBtoY(bg))

  ドキュメントソースAPCA コントラスト

• color-blind

  JSnpm i color-blind

  色覚シミュレーションを1行で。型ごとの関数が用意されており、テストコードに組み込みやすい。

  blinder.deuteranopia("#3A7BD5")

  ドキュメント色覚シミュレーション · 色覚識別性 · 色覚セーフ提案

• Leonardo

  JSnpm i @adobe/leonardo-contrast-colors

  「この背景でコントラスト比 4.5 の色」を逆算してパレットを生成する。基準先行で配色を組むときに強い。

  new Theme({ colors, backgroundColor, lightness, contrast })

  ドキュメントソーストーン展開 · アクセシブル化ナッジ · 役割カバレッジ · デザイントークン出力 · ダーク/ライト変換

• Material Color Utilities

  JSnpm i @material/material-color-utilities

  1色から役割つきのカラースキーム一式（Material 3）を生成する。HCT という知覚寄りの色空間を使う。

  themeFromSourceColor() / Hct.fromInt()

  ドキュメント調和スキーム生成 · 調和スキーム判定 · 役割カバレッジ · セマンティックロール割当 · デザイントークン出力 · ダーク/ライト変換

• Radix Colors

  JSnpm i @radix-ui/colors

  12段階の各ステップに用途（背景・境界・テキスト）が定義済みのスケール。役割の決め方をそのまま借りられる。

  blue.blue9 / blueDark / blueA（透過スケール）

  ドキュメント役割カバレッジ · セマンティックロール割当 · デザイントークン出力 · ダーク/ライト変換

• D3（d3-color / d3-interpolate / d3-scale-chromatic）

  JSnpm i d3-scale-chromatic

  データビズの配色。連続・発散・カテゴリの各スキームが検証済みで揃っており、系列色に迷わない。

  d3.interpolateOklab() / d3.schemeTableau10 / d3.scaleSequential()

  ドキュメントソースデータビズプレビュー · SVG プレビュー · 色相分布 · 2色間グラデーション

• Open Props

  CSSnpm i open-props

  CSS 変数だけで使えるパレット。ビルド構成を増やさずにトークン運用を始められる。

  var(--red-5) / var(--gray-0) … var(--gray-12)

  ドキュメントデザイントークン出力 · トーン展開 · ダーク/ライト変換

• CSS ネイティブ

  CSS

  混色・明度調整・ダーク切替は、いまはブラウザだけでできる。まずライブラリを足さずに済むかを確認する。

  oklch() / color-mix() / light-dark() / rgb(from … r g b / 50%)

  ドキュメント色のミックス · 拡張色空間 · 不透明度 · ダーク/ライト変換 · 2色間グラデーション · デザイントークン出力

相対輝度

culori

WCAG コントラスト比

culoricolorjs.iocolord

色差 ΔE

culoricolorjs.io

色覚シミュレーション

culoricolor-blind

色相分布

chroma-jsd3-scale-chromatic

調和スキーム生成

culoricolord@material/material-color-utilities

トーン展開

culorichroma-js@adobe/leonardo-contrast-colorsopen-props

拡張色空間

culoricolorjs.ioCSS ネイティブ

不透明度

CSS ネイティブ

ガマット・出力適合

culoricolorjs.io

APCA コントラスト

colorjs.ioapca-w3

色差の内訳

culori

グレースケール耐性

culori

色覚識別性

color-blind

役割カバレッジ

@adobe/leonardo-contrast-colors@material/material-color-utilities@radix-ui/colors

調和スキーム判定

@material/material-color-utilities

SVG プレビュー

d3-scale-chromatic

データビズプレビュー

chroma-jsd3-scale-chromatic

明度・彩度バリエーション

chroma-js

2色間グラデーション

culorichroma-jsd3-scale-chromaticCSS ネイティブ

色のミックス

culoricolordCSS ネイティブ

アクセシブル化ナッジ

@adobe/leonardo-contrast-colors

色覚セーフ提案

color-blind

ダーク/ライト変換

@adobe/leonardo-contrast-colors@material/material-color-utilities@radix-ui/colorsopen-propsCSS ネイティブ

セマンティックロール割当

@material/material-color-utilities@radix-ui/colors

デザイントークン出力

@adobe/leonardo-contrast-colors@material/material-color-utilities@radix-ui/colorsopen-propsCSS ネイティブ

色値

culoricolorjs.iocolord

カード見出しの ⟨/⟩ から、いま表示中の色を埋めたスニペットをコピーできます。

• 相対輝度
• WCAG コントラスト比
• APCA コントラスト
• 色差 ΔE
• 色覚シミュレーション
• 色覚識別性
• グレースケール耐性
• 拡張色空間
• ガマット・出力適合
• トーン展開
• 2色間グラデーション
• 色のミックス
• 調和スキーム生成