カラーパレット生成 - 無料オンラインツール

機能

補色

類似色

トライアド配色

スプリットコンプリメンタリー

CSS 変数として書き出し

使い方

1. ベースカラーと配色スキームを選ぶと、ステージにパレットが並びます。

2. スペースキー（またはシャッフル）でバリエーションを試せます。列にカーソルを合わせると、コピー・編集・明暗ステップの展開・ロックができます。

3. ステージの下地（白 / グレー / ダーク / 市松）を切り替えて配色を確認し、CSS・Tailwind・JSON・SVG・PNG 形式でエクスポートできます。

このツールについて

良い配色が偶然生まれることはめったになく、ほとんどは色相環上の関係に従っています。このジェネレーターは1つのベースカラーから、類似色（隣り合う色相で落ち着いたデザインに）、単色（同じ色相で明度を変える）、補色（反対の色相で強いコントラスト）、分裂補色、トライアド、テトラードといった古典的な配色ルールで6色のパレットを作ります。各列には値とおおよその色名が表示され、コピー、編集、明暗の段階の表示、ほかの色をシャッフルしても変わらないようにする固定ができます。白・グレー・暗い色・透明（チェック柄）の背景でパレットを確認し、CSS 変数、Tailwind の色設定、JSON、SVG、PNG のカラーチャートとして書き出せます。

よくある質問

配色ルールにはどんな違いがありますか？

類似色は隣り合う色相、単色は1つの色相で明度だけを変え、補色は反対の色相を組み合わせ、分裂補色は補色の両隣の色相を使います。トライアドは120°ずつ離れた3色、テトラードは90°ずつ離れた4色です。

ウェブサイトに向いているのはどの配色ですか？

落ち着いた印象になる類似色や単色の配色が UI では最も扱いやすいです。補色やトライアドは強いアクセントになるので、メインカラー1色、サブカラー1色、行動を促すボタンに少量の補色を使うのが一般的です。

色の固定はどう機能しますか？

列を固定すると、スペースキーやシャッフルでバリエーションを作ってもその色は変わりません。ブランドカラーが決まっていて、それに合う色を探したいときに便利です。

生成されたパレットはアクセシブルですか？

配色の調和は文字の読みやすさを保証しません。パレットの2色を文字と背景に使う前に、コントラストチェッカーで WCAG AA（本文 4.5:1）を満たすか確認してください。

どの形式で書き出せますか？

CSS カスタムプロパティ、Tailwind の theme.extend.colors のスニペット、HEX 値の JSON 配列、色見本入りの SVG ファイル、各列に値を記載した 1500 × 900 の PNG です。

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

機能

使い方

このツールについて

よくある質問

関連ツール