コンテンツへスキップ
EVOA Toolbox

カラーパレット生成ツール

基準色から配色パターンを生成し、気に入った色をロックして、WCAGコントラストを確認できます。CSS、Tailwind、JSON、PNGでエクスポートも可能です。

ブラウザー内でローカルに処理されます。テキストはアップロードされません。

ツールを読み込み中…

このツールでできること

基準となる色を選ぶだけで、色彩理論のルールに基づいたパレットがすぐに作成されます。補色、類似色、トライアド、テトラード、スプリットコンプリメンタリー、モノクロマティック、そして濃淡や明暗の段階的なバリエーションに対応しています。色相の計算はHSLで行われ、各スウォッチにはHEX、RGB、HSL、OKLCHの値が表示されるため、お使いの環境に合う形式をコピーできます。

各スウォッチには、白い文字と黒い文字に対するコントラスト比と、WCAGのAA（4.5:1）、AAA（7:1）、または大きな文字向けの基準（3:1）のみを満たすかどうかも表示されます。ボタンや背景の色を選ぶときに役立ちます。「ランダム」を押して色を探索し、気に入った色をロックすれば、残りの色だけがその周りで変化します。

パレットが決まったら、CSSカスタムプロパティ、Tailwind v4の@themeブロック、Tailwind v3の設定拡張、JSON、またはPNGのスウォッチ画像としてエクスポートできます。すべてローカルで実行され、どこにも送信されません。

使い方

  1. 1カラーピッカーで基準色を選ぶか、#2f5beaのような16進数の値を入力します。
  2. 2配色パターンを選びます。モノクロマティック、シェード、ティントでは、数のスライダーを使います。
  3. 3「ランダム」を押して色を探索し、残したい色をロックします。
  4. 4文字やボタンに使う前に、各スウォッチのコントラストの表示を確認します。
  5. 5スウォッチごとに値をコピーするか、パレット全体を必要な形式でエクスポートします。

対応形式

入力：HEXカラー（#rgbまたは#rrggbb）。出力：CSS変数、Tailwind v3/v4のスニペット、JSON、PNG。

プライバシー

このツールはブラウザー上で動作します。入力されたデータはお使いのデバイス上で処理され、当社のサーバーには送信されません。

制限事項

  • 配色パターンは数学的な提案であり、完成したデザインではありません。目で見て調整し、実際の使用場面でテストしてください。
  • コントラストは、スウォッチの色を純粋な白と純粋な黒に対してのみ測定しています。実際の文字と背景の組み合わせは、別途確認してください。
  • 色の見え方は画面やカラープロファイルによって異なります。値はsRGBです。
  • アルファ（不透明度）の値はパレットに含まれません。

よくある質問

類似色とトライアドの違いは何ですか？

類似色は色相環で隣り合う色（30度ずつ離れた色）で、穏やかでまとまりのある印象になります。トライアドは120度ずつ離れた色で、より多様性とコントラストが生まれます。

AAとAAAとは何ですか？

文字に対するWCAG 2のコントラストレベルです。AAは通常の文字で4.5:1（大きな文字では3:1）、AAAは通常の文字で7:1が必要です。このツールでは、各スウォッチが白と黒のそれぞれに対して到達する最も高いレベルを表示します。

ロック機能はどのように動作しますか？

ロックしたスウォッチは、「ランダム」を押したり、基準色や配色パターンを変更したりしても色が変わりません。すでに気に入っている色を中心にパレットを組み立てられます。

Tailwind用にはどのエクスポートを使えばよいですか？

Tailwind 4（CSSファーストの設定）ではv4の@theme出力を、tailwind.config.jsをまだ使っているプロジェクトではv3の設定出力をお使いください。

関連ツール