カラーパレットジェネレーター
インタラクティブなカラーホイールから調和のとれたカラーパレットを作成 — 類似色、補色、トライアドなどのハーモニールールを適用し、任意の値を即座にコピーできます。
明るさ
100%
ハーモニールール
アクティブカラー
HEX
RGB
HSL
パレット
ハーモニールールとベースカラーを選び、ホイールのマーカーをドラッグして微調整してください。スウォッチをクリックしてコピーするか、新しいベースカラーに設定できます。
カラーパレットジェネレーターについて
カラーパレットジェネレーターは、インタラクティブなカラーホイールから調和のとれた配色を作成します。ベースカラーを選び、ハーモニールール――類似色、モノクロマティック、トライアド、補色、分裂補色、正方形、シェード、または完全カスタム――を選択すると、ツールは即座に一致するパレットを計算し、ホイール上のドラッグ可能なマーカーで微調整できます。
各スウォッチはHEX、RGB、HSL、HSBの値を表示し、パレット内のどの色もワンクリックで新しいベースに昇格できます。明るさスライダーは色相の関係を保ったまま配色全体を明るく、または暗くシフトさせるので、配色のバリエーションをとても素早く探索できます。
すべての計算はブラウザ内でHSVホイールを使った色彩理論の数式でリアルタイムに行われ、アップロードもサーバー通信も一切ありません。パレットが決まったら、個別の値、すべての色を一度に、CSS変数、またはJSONとして書き出せます。
カラーパレットジェネレーターの使い方
- ピッカーでベースカラーを選ぶか、値を入力するか、「ランダム」をクリックします。
- 類似色、補色、トライアド、正方形などのハーモニールールを選びます。
- ホイール上のマーカーをドラッグし、明るさスライダーを調整して配色を微調整します。
- スウォッチをクリックしてコピーするか、新しいベースカラーとして設定して繰り返し調整します。
- 「すべてコピー」「CSS変数をコピー」「JSONをコピー」でパレットを書き出します。
よくある質問
はい、完全に無料です。パレットの計算はすべてブラウザ内で行われるため、クレジットもアカウントも利用制限もありません。
各ルールは、ベースカラーを基準にカラーホイール上の固定角度に他のパレットカラーを配置します。補色は反対側(180°)に位置し、トライアドは色を120°間隔で配置し、類似色は隣接した色を近くに保ち、分裂補色は反対の色相を挟み込み、正方形は4つの色相を90°間隔で配置します。
類似色やモノクロマティックの配色は、落ち着いてまとまりのある印象になるためインターフェースに最も安全です。ドミナントなベース色相に対して、ボタンやコールトゥアクション用の強いアクセントカラーが必要な場合は補色や分裂補色を使いましょう。
はい。カスタムルールに切り替えてホイール上の各マーカーを個別にドラッグするか、任意のハーモニールールから始めてマーカーをドラッグして調整できます。動かすたびにパレットが更新されます。
各スウォッチにはHEX、RGB、HSL、HSBの値が表示され、それぞれ個別にコピーできます。パレット全体をプレーンな値として、スタイルシート用のCSSカスタムプロパティとして、あるいはコードやデザインツールに渡すためのJSONとしてコピーすることもできます。
人気の検索
カラーパレット生成
色相環
カラーハーモニー生成
補色
類似色配色
無料パレット生成
お困りですか?
このツールで問題が見つかりましたか?チームにお知らせください。