インタラクティブなカラーホイールから調和のとれたカラーパレットを作成 — 類似色、補色、トライアドなどのハーモニールールを適用し、任意の値を即座にコピーできます。

明るさ 100%
ハーモニールール
アクティブカラー
HEX
RGB
HSL
パレット

ハーモニールールとベースカラーを選び、ホイールのマーカーをドラッグして微調整してください。スウォッチをクリックしてコピーするか、新しいベースカラーに設定できます。


カラーパレットジェネレーターについて

カラーパレットジェネレーターは、インタラクティブなカラーホイールから調和のとれた配色を作成します。ベースカラーを選び、ハーモニールール――類似色、モノクロマティック、トライアド、補色、分裂補色、正方形、シェード、または完全カスタム――を選択すると、ツールは即座に一致するパレットを計算し、ホイール上のドラッグ可能なマーカーで微調整できます。

各スウォッチはHEX、RGB、HSL、HSBの値を表示し、パレット内のどの色もワンクリックで新しいベースに昇格できます。明るさスライダーは色相の関係を保ったまま配色全体を明るく、または暗くシフトさせるので、配色のバリエーションをとても素早く探索できます。

すべての計算はブラウザ内でHSVホイールを使った色彩理論の数式でリアルタイムに行われ、アップロードもサーバー通信も一切ありません。パレットが決まったら、個別の値、すべての色を一度に、CSS変数、またはJSONとして書き出せます。

カラーパレットジェネレーターの使い方

  1. ピッカーでベースカラーを選ぶか、値を入力するか、「ランダム」をクリックします。
  2. 類似色、補色、トライアド、正方形などのハーモニールールを選びます。
  3. ホイール上のマーカーをドラッグし、明るさスライダーを調整して配色を微調整します。
  4. スウォッチをクリックしてコピーするか、新しいベースカラーとして設定して繰り返し調整します。
  5. 「すべてコピー」「CSS変数をコピー」「JSONをコピー」でパレットを書き出します。

よくある質問

はい、完全に無料です。パレットの計算はすべてブラウザ内で行われるため、クレジットもアカウントも利用制限もありません。

各ルールは、ベースカラーを基準にカラーホイール上の固定角度に他のパレットカラーを配置します。補色は反対側(180°)に位置し、トライアドは色を120°間隔で配置し、類似色は隣接した色を近くに保ち、分裂補色は反対の色相を挟み込み、正方形は4つの色相を90°間隔で配置します。

類似色やモノクロマティックの配色は、落ち着いてまとまりのある印象になるためインターフェースに最も安全です。ドミナントなベース色相に対して、ボタンやコールトゥアクション用の強いアクセントカラーが必要な場合は補色や分裂補色を使いましょう。

はい。カスタムルールに切り替えてホイール上の各マーカーを個別にドラッグするか、任意のハーモニールールから始めてマーカーをドラッグして調整できます。動かすたびにパレットが更新されます。

各スウォッチにはHEX、RGB、HSL、HSBの値が表示され、それぞれ個別にコピーできます。パレット全体をプレーンな値として、スタイルシート用のCSSカスタムプロパティとして、あるいはコードやデザインツールに渡すためのJSONとしてコピーすることもできます。

シェアする

人気の検索
カラーパレット生成 色相環 カラーハーモニー生成 補色 類似色配色 無料パレット生成
お困りですか?
このツールで問題が見つかりましたか?チームにお知らせください。
問題を報告

この無料ツールをあなたのウェブサイトに追加 — 下のコードをコピーして貼り付けてください。