カラーパレット生成
ベースの色から4方式の配色候補を生成。HEX・RGB・HSLを表示し、HEXコードをコピーしてデザインに使えます。
生成された配色
処理が完了しました
カラーパレット生成
次回は「マイツール」からすぐ開けます。保存するのはこのブラウザのツール一覧で、入力値・計算結果は保存しません。
⌥Dショートカットキー (Option+D) でも一瞬でマイツールを起動できます
使い方
- 1
ベースカラーを選択
カラーピッカーかHEXコードで基準になる色を選びます。
- 2
配色方式を選択
補色・類似色・トライアド・モノクロームから選びます。
- 3
コードをコピー
生成された色のボタンを押すとHEXコードをコピーできます。
このツールの特長
- 補色・類似色・トライアド・モノクロームの4方式に対応
- HEX・RGB・HSLを表示、HEXをコピー
- ベースカラーの変更に即座に反応
- 選択した色をサーバーへ送信しない
こんな場面で便利
Webサイトの配色設計
プライマリーカラーから全体の配色バランスを組み立てられます。
バナー・素材のデザイン
バナーやサムネイルで使う色の組み合わせを短時間で用意できます。
ブランドカラーの展開
ブランドカラーを基準に、ボタン・背景・アクセントの色相を整えられます。
詳しい説明
カラーパレットは、デザインで使う色の組み合わせです。ベースカラー1色を決めたうえで、色相の関係に基づいて他の色を選ぶと、まとまりのある配色になります。代表的な方式に、色相環の反対側を使う「補色」、隣接する色相を使う「類似色」、正三角形に配置する「トライアド」、明暗だけを変える「モノクローム」があります。
本ツールはHSL色空間（色相・彩度・明度）で色を計算するため、ベースカラーを基準にした配色が数学的に求まります。生成された各色のHEX（#RRGGBB）、RGB、HSLコードを表示します。各カードのボタンでHEXコードをコピーできます。
すべての処理はブラウザ内で完結し、選択した色がサーバーに送信されることはありません。配色は即座に再生成されるため、色を変えながら比較できます。
よくある質問
補色とは何ですか？
基準色の色相を180度動かした色です。アクセントの候補にでき、文字と背景の読みやすさはコントラスト比で確認します。
生成された配色は保存できますか？
コードをコピーしてデザインツールやCSSに貼り付けて利用します。ツール上での保存は行われません。
ベースカラーはどう選べばいいですか？
ブランドカラーや、サイトの主要な印象に合わせた色を選びます。基準色から候補を作り、背景・本文・操作ボタンに割り当てて比率を確認します。
選択した色は送信されますか？
いいえ。すべての計算はブラウザ内で完結し、色情報は送信されません。
関連ガイド
ガイド色変換のやり方｜HEX・RGB・HSLと透明度の注意点
HEX・RGB・HSLの対応を数値と図で確認。3桁HEX、HSLの丸め、透明な色の合成、対応する入力形式とコピー前の検算を解説します。
ガイド配色の決め方｜補色・類似色・トライアドを用途で選ぶ
基準色から4方式のパレットを作り、背景・本文・操作色へ割り当てる手順を解説。実際の生成色数、HEXコピー、文字のコントラスト確認まで比較表と図で示します。
ガイドコントラスト比の調べ方｜WCAG 2.2の基準・透過背景・判定手順
通常文字4.5:1、大きい文字3:1を対象別に選び、実際の文字色と背景色を検査。丸めによる誤判定、プレースホルダー、ガラス調の透過背景も数値例で解説します。
関連ツール
色変換
HEX・RGB・HSL形式の相互変換。カラーピッカーから直接選択もできます。
コントラストチェッカー
文字の色と背景の色のコントラスト比を計算し、WCAGの達成基準（AA・AAA）との適合を即座に判定します。読みやすい配色づくりの確認に役立ちます。
画像カラーパレット抽出
画像をアップロードすると、使われている主要な色を自動で抽出してカラーパレットを作ります。色の数（4/6/8色）を選び、HEX・RGBコードをワンクリックでコピー可能。処理はすべてブラウザ内で完結します。
画像圧縮
画像ファイルのサイズを簡単に圧縮。圧縮後の見た目と容量を確認しながら、WebサイトやSNS投稿向けに調整できます。
すべての処理はブラウザ内で実行されます。ファイルがアップロードされることはありません。
検証: 4方式の色数・HEXコピー・入力エラーをブラウザで確認