カラーパレットジェネレーター

適切なルールを選ぶ

実務向けのパレット構造

生成された配色は出発点であり、完全なデザインシステムではありません。実運用のUIでは、見た目ではなく役割で色名を付けます: primary、secondary、accent、surface、border、text、success、warning、error。ニュートラルなグレーは別に追加するのがおすすめです。中性色はhueベースの生成器より細かい制御が必要になりやすいためです。

生成したHEXカラーをまずプロトタイプに入れ、実際の画面、明るい背景と暗い背景、hoverやdisabled状態で機能する色だけを残します。

CSS変数としてエクスポート

エクスポート手順ではシンプルなカスタムプロパティを使います:

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

CSS、Tailwind theme tokens、design tokensファイルに貼り付けるときは、自分のシステム名に変更してください。

HEX、RGB、HSL

入力と表示される出力はHEXです。CSS、デザインツール、チケットコメントの間で最も素早くコピーできる形式だからです。内部では基準色をHSLに変換し、hueまたはlightnessを動かしてから、結果をHEXに戻します。RGBやHSL表記が必要な場合は、生成されたHEX値をカラーコード変換ツールに通してください。

コントラストとアクセシビリティ

配色ルールはアクセシビリティを保証しません。テキスト、コントロール、グラフに色の組み合わせを使う前に、コントラストチェッカーで確認してください。

• 通常テキストと背景: WCAG AAで最低4.5:1。
• 大きいテキスト: 最低3:1。
• ボタン枠、アイコン、フォーカスリング、グラフ境界など重要な非テキストUI要素: 隣接色に対して最低3:1。

hueだけに頼らないでください。スウォッチでは違って見える2色でも、小さな文字、細いアイコン、ステータスラベルでは失敗することがあります。

ヒント

• 意味のある基準色から始めます。既存のブランドカラー、製品カラー、キャンペーンカラーなどが適しています。
• 主役色を1つ選び、残りは補助色として扱います。全色を同じ強さで使うと、多くのUIは忙しく見えます。
• 大きな面では彩度を下げます。アプリ背景、パネル、heroセクションでは特に有効です。
• テーマ適用後に再テストします。白背景で機能するパレットでも、ダークモードや密なグラフでは失敗することがあります。