どの色を組み合わせればいいか迷うのは時間の無駄です。このジェネレーターは色彩理論の定番ハーモニー、つまりカラーホイール上の色相関係をそのまま適用するので、感覚ではなく数学的に整合性の取れた配色が作れます。スウォッチをクリックすればHEXコードをコピーでき、配色全体をCSSカスタムプロパティとしてまとめてコピーすることもできます。完全にブラウザ内で処理されるため、アカウント登録もアップロードもブランドカラーの追跡もありません。
無料カラーパレット ジェネレーター
すべてブラウザー内で動作します。アップロードも登録も不要です。
ハーモニー
CSS変数
カラーパレット ジェネレーターとは?
カラーパレット ジェネレーターは、カラーホイール理論を使って1つのベースカラーから調和の取れた配色を作るツールです。HEXカラーを選ぶか入力し、補色・類似色・トライアド・モノクロなどのハーモニーを選ぶと、コピー可能なHEXコード付きの配色が瞬時に計算されます。すべてブラウザ内で完結します。
使い方
- 1ベースカラーを設定する. カラーピッカーで視覚的に選ぶか、#6366f1のようなHEXコードを入力するか、「ランダム」で新しい出発点を得ましょう。
- 2ハーモニーを選ぶ. 補色、スプリット補色、類似色、トライアド、テトラード、モノクロ、シェード、ティントを切り替えられます。配色は即座に再計算されます。
- 3色をコピーする. スウォッチをクリックしてHEXコードをコピーするか、コピーボタンで配色全体をCSS変数として取得できます。
こんな方に
- Webデザイナーが1つのブランドカラーからサイトを作り始めるとき、背景・ボタン・アクセント用に類似色やスプリット補色の組み合わせを生成できます。
- フロントエンド開発者がデザイントークンの叩き台を必要とするとき、配色をCSS変数としてコピーしてそのままスタイルシートに貼り付けられます。
- マーケターやスライド作成者がロゴカラーに合わせてグラフやSNS用画像、プレゼン資料を配色するとき、デザインツールなしで対応できます。
- イラストレーターや趣味で絵を描く人が1つの色相のシェードやティントを試し、作品の奥行き・ハイライト・影を作るとき。
よくある質問
このカラーパレット ジェネレーターは無料ですか?
はい、登録不要・透かしなし・回数制限なしの100%無料です。個人利用でも商用利用でも、好きなだけ配色を生成・コピーできます。
自分のカラーデータはどこかにアップロードされますか?
いいえ。配色計算はすべてブラウザ内で純粋なJavaScriptにより行われます。ブランドカラーの入力やクリック操作がサーバーに送信されることはありません。
補色とは何ですか?
補色とは、カラーホイール上でベースカラーの真反対、つまり色相を180度回転させた位置にある色のことです。青とオレンジのような補色ペアは最も強いコントラストを生むため、ブランドカラーの背景に対するCTAボタンなどでよく使われます。
類似色配色とトライアド配色の違いは何ですか?
類似色配色はベースカラーから約30度以内の隣接した色相を使うため、落ち着いてまとまりのある印象になります。トライアド配色は120度ずつ離れた3つの色相を使うため、色同士のコントラストが強く、鮮やかでバランスの取れた配色になります。
シェードとティントとは何ですか?
シェードはベースカラーの明度を黒に近づけて暗くしたもの、ティントは白に近づけて明るくしたものです。どちらも色相と彩度は同じままなので、ホバー状態、ボーダー、背景レイヤーなど1つのブランドカラーの応用に最適です。
Webサイトの配色は何色くらいが適切ですか?
よく使われるルールは60-30-10です。インターフェース全体の約60%を占めるメインカラー、30%のセカンダリカラー、10%のアクセントカラーという配分です。まずここで3〜5色のハーモニーを作り、各色の状態や面ごとにシェードとティントを追加していきましょう。
グレーや黒ではなぜ配色があまり変わらないのですか?
グレー、黒、白は彩度がゼロのため、ハーモニーの色相回転が作用する色相そのものがありません。何もない色相を回転させても同じニュートラルカラーに戻るだけです。代わりに明度モードでニュートラルな階調を作りましょう。黒や暗いグレーにはティント、白や明るいグレーにはシェード、中間のグレーにはモノクロを使います。