ここで実行 100% ブラウザ内で動作します。アップロードもログインも不要です。
Palette Generator
ベースカラー 1 色から補色・トライアド・アナロジー・モノトーンのパレットを生成。
ベースカラーを選ぶと 5 つのスウォッチが即座に更新されます。
使い方
- カラーピッカーでベースカラーを選びます。
- スキームを選びます。補色（ホイール上で 180 度）、トライアド（120 度と 240 度）、アナロジー（近い色相）、モノトーン（明度の段階）。
- 5 つのスウォッチが即座に表示され、それぞれ HEX・RGB・HSL の値が付きます。
- スウォッチの HEX・RGB・HSL ラベルを押すと、必要な形式でその値をコピーできます。
よくある用途
- Web サイトのテーマ —— ブランドカラーからアクセント・枠線・背景用の配色を導き出します。
- データ可視化 —— トライアドやアナロジーは、共通の基調を保ちつつ区別できる系列色を提供します。
- 色彩理論の学習 —— 色相の回転や明度の段階が配色の印象をどう変えるかを観察できます。
- デザインの引き渡し —— 正確な HSL 値をそのまま CSS カスタムプロパティへコピーします。
よくある質問
Q: 計算に使っている色モデルは？ A: HSL です。ベースカラーを HEX から RGB、HSL へ変換し、スキームごとに色相・彩度・明度のオフセットを適用してから表示用に戻します。
Q: 暗い色や彩度の高いベースカラーも使えますか？ A: はい。彩度と明度のオフセットは 0-100 の有効範囲にクランプされるため、極端なベースカラーでも 5 つの有効なスウォッチが生成されます。ただし黒や白に近い色では変化が小さくなります。
Q: 生成した色をスタイルシートに取り込むには？ A: スウォッチの値ラベルを押して HEX・RGB・HSL のテキストをコピーし、CSS 変数やデザインツールに貼り付けてください。
データはこのデバイス内にとどまります
Palette Generator は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。