カラーパレット生成
ベースの色から補色・類似色・トライアド・モノクロームの配色を生成。HEX・RGB・HSLコードをコピーしてデザインに使えます。
生成された配色
使い方
- 1
ベースカラーを選択
カラーピッカーかHEXコードで基準になる色を選びます。
- 2
配色方式を選択
補色・類似色・トライアド・モノクロームから選びます。
- 3
コードをコピー
生成された色のHEX・RGB・HSLコードをコピーします。
このツールの特長
- 補色・類似色・トライアド・モノクロームの4方式に対応
- HEX・RGB・HSLコードを表示してコピー
- ベースカラーの変更に即座に反応
- 選択した色をサーバーへ送信しない
こんな場面で便利
Webサイトの配色設計
プライマリーカラーから全体の配色バランスを組み立てられます。
バナー・素材のデザイン
バナーやサムネイルで使う色の組み合わせを短時間で用意できます。
ブランドカラーの展開
ブランドカラーを基準に、ボタン・背景・アクセントの色相を整えられます。
詳しい説明
カラーパレットは、デザインで使う色の組み合わせです。ベースカラー1色を決めたうえで、色相の関係に基づいて他の色を選ぶと、まとまりのある配色になります。代表的な方式に、色相環の反対側を使う「補色」、隣接する色相を使う「類似色」、正三角形に配置する「トライアド」、明暗だけを変える「モノクローム」があります。
本ツールはHSL色空間（色相・彩度・明度）で色を計算するため、ベースカラーを基準にした配色が数学的に求まります。生成された各色のHEX（#RRGGBB）、RGB、HSLコードを表示し、ワンクリックでコピーできます。
すべての処理はブラウザ内で完結し、選択した色がサーバーに送信されることはありません。配色は即座に再生成されるため、色を変えながら比較できます。
よくある質問
補色とは何ですか？
色相環で正反対に位置する色の組み合わせです。強いコントラストが生まれるため、アクセントカラーとして効果的です。
生成された配色は保存できますか？
コードをコピーしてデザインツールやCSSに貼り付けて利用します。ツール上での保存は行われません。
ベースカラーはどう選べばいいですか？
ブランドカラーや、サイトの主要な印象に合わせた色を選びます。迷ったら好みの1色から始めて、類似色やモノクロームで展開するのが安全です。
選択した色は送信されますか？
いいえ。すべての計算はブラウザ内で完結し、色情報は送信されません。
関連ツール
すべての処理はブラウザ内で実行されます。ファイルがアップロードされることはありません。