カラーパレット生成

パレット生成ツールについて

ブランドのメインカラーを選ぶだけで、インターフェースに必要な色がすべて揃います。組み合わせる色、状態を表す色、ニュートラル、濃淡、ライト・ダークのトークン、コントラストの確認、貼り付けるだけのコードまで、すべてブラウザ内で完結します。

1色からパレット一式を作成

メインカラーからセカンダリとターシャリの色を導き出し、そのスタイルに合わせた状態色（情報、成功、警告、危険）と、背景やテキスト用のわずかに色味のあるグレーを作成します。

すぐに使える濃淡

すべての色に、最も明るい50から最も暗い950まで11段階の濃淡があり、背景、枠線、ホバー時、テキストに使えます。提案された色が合わない場合は好きな色に置き換えられ、濃淡もそれに合わせて変わります。

ライト・ダークのトークン

背景、サーフェス、枠線、テキスト、ホバー、フォーカス、アラートの背景。用途ごとの色がそれぞれパレットの濃淡を参照し、ライトテーマ用とダークテーマ用に1つずつ値を持ちます。

コントラストのチェック

テキストと背景のすべての組み合わせを、WCAGの基準で評価します。通常の文字は4.5:1、大きな文字は3:1、AAAレベルは7:1です。

CSS、Tailwind、JSONにエクスポート

各値をHEX、RGB、HSL、OKLCHでコピーしたり、CSS変数ファイル、Tailwind v4のテーマ、Tailwind v3の設定、JSON、シンプルなリストとしてダウンロードしたりできます。すべてブラウザ内で処理され、何も送信・保存されません。