UIデザインに特化！ 数学的な処理で一貫性のあるカラーパレットを生成する初のカラーツール -Harmonizer
Post on:2025年11月6日
sponsorsr
UIデザインに特化され、アクセシブルでライトモードでもダークモードでも各レベルのすべてのカラーが同じ彩度とコントラストを保ち、数学的な処理で一貫性のあるカラーパレットを生成する初のカラーツールを紹介します。
カラーパレットを生成するツールはたくさんありますが、UIデザインに特化されたものとなるとかなり限られます。さらにTailwinds CSS用のコードをエクスポートしたり、Figmaプラグインも用意された優れものです。
HarmonizerはUIデザインを向けにアクセシブルで、一貫性のあるカラーパレットを生成できるツールです。WebアプリとFigmaプラグインとして利用できます。
優れたカラーパレットを生成するツールは数多く存在しますが、これらの多くはUIデザインを考慮して作成されていないことがよくあります。
- レベルの不一致: 同じレベルの色でも明度や彩度が異なります。
- コントラストの推測: テキストの色はUI要素の背景に基づいて手動で調整する必要があります。
- テーマのミラーリング: ライトモードとダークモードにはカスタムマッピングが必要です。
Harmonizerは知覚的に一貫した明度とコントラストを持つ色を生成することで、これらの問題を解決しています。これによりレベルの信頼性が向上し、同じレベルの色を変更しても、テキストのコントラストがまったく同じままになります。
カラーパレットの生成にOKLCHカラーモデルとAPCAコントラスト計算式を用いることで、あらゆるレベルと色相において一貫した彩度とコントラストを持つUIデザイン用のカラーパレットを生成できます。
UIデザインを考慮して作成されたカラーパレット生成ツール
使い方は、簡単です。
- カラースペースを設定します（FigmaドキュメントのP3またはsRGBを継承します）。
- 明度ステップのレベル（例：100～900）を設定します。
- レベルごとにコントラストを調整します（背景に対して計算されます）。
- 色相を追加し、名前を付けます（例："Brand Blue"、"Error Red"）。
- 背景のコンテキストを設定します（デフォルト：白/黒、カスタマイズ可能）。
- 「パレットを作成」> Figma ファイルにカラープレビューと変数を生成します。
主な機能は、下記の通り。
- 調整可能なカラープロファイル
- OKLCH による知覚的に一貫した彩度
- APCA（デフォルト）または WCAG を使用した一貫したコントラスト計算
- 設定可能なコントラスト方向（前景色 vs. 背景色）
- コントラスト計算用の背景色をカスタマイズ可能
- 以前生成したカラーパレットの自動認識
- 既存のパレットプレビューと変数の自動更新
- 設定ファイルの保存・読み込みで簡単に共有可能
Harmonizerの主な機能
生成したカラーパレットはデベロッパー向けに、Tailwind CSS、CSSの変数、JSONでエクスポートできます。
カラーパレットのエクスポート
Figmaプラグインも用意されており、下記から利用できます。
sponsors
