カラーパレット生成ツール

カラーパレット生成ツールとは？

カラーパレットジェネレーターは、1つのベースカラーから完全なパレットを構築したいデザイナーやフロントエンド開発者向けの無料オンラインカラースキームメーカーです。HEXカラーを1つ入力するだけで、HSLカラー演算を使って明るいティント、暗いシェード、補色、さらに類似色やトライアド配色を瞬時に導き出します。各スウォッチはHEX値とともに表示され、ワンクリックでコピーできるボタンが付いています。UIカラーの選定、明暗のカラーランプの作成、ブランドに合うアクセントカラー探しに活用できます。HEXカラーパレットジェネレーター、シェード/ティント作成ツール、補色ファインダーが1つになっています。

カラーパレット生成ツールの使い方

1. 「ベースカラー (HEX)」フィールドに #rrggbb または #rgb 形式でベースカラーを入力するか、大きなカラーピッカーのスウォッチをクリックして視覚的に選びます。
2. 「片側あたりのシェード数」を 2、3、4 のいずれかに設定し、ベースカラーの両側に生成する明るいティントと暗いシェードの数を調整します。
3. 「シェードとティント」セクションを確認します。明るいティントはベースカラーの上に、暗いシェードは下に表示され、それぞれにラベル（Lighter N / Base / Darker N）が付き、HEX値とともに示されます。
4. 「調和カラー」セクションで、補色、類似色（+30度 / -30度）、トライアド（+120度 / -120度）を確認します。
5. 任意のスウォッチの横（またはベースフィールドの横）にあるコピーボタンをクリックして、そのHEX値をクリップボードにコピーします。

使用例

#ff0000

#00ffff

#ff0000

#00ff00

よくある質問

どのカラー形式を入力できますか？

ベースカラーは #rrggbb（6桁）または #rgb（3桁）の短縮形のいずれかのHEX値で入力します。値が有効なHEXカラーでない場合は「Invalid HEX color」というメッセージが表示され、パレットは生成されません。すべての出力スウォッチは #rrggbb 形式のHEXで表示されます。

シェードとティントはいくつ生成されますか？

片側あたり 2、3、4 のいずれかを選びます。ツールはその数だけ明るいティント（白に向かって補間）と、同じ数の暗いシェード（黒に向かって補間）を生成し、中央にベースカラーを加えます。

どんな調和カラーが含まれますか？

補色（色相を180度回転）、2つの類似色（+30度と-30度）、2つのトライアドカラー（+120度と-120度）を出力します。すべてHSLでベースカラーの色相を回転させて計算されます。

HEXを入力する代わりに視覚的に色を選べますか？

はい。内蔵のカラーピッカー付きの大きなスウォッチをクリックして色を選べます。HEXフィールドは自動的に更新され、変更するたびにパレットが瞬時に再計算されます。

私のカラーデータはどこかにアップロードされますか？

いいえ。すべてはローカルのカラー演算を使ってブラウザ内で完結します。カラー値がサーバーに送信されることは一切ないため、オフラインでも動作し、パレットのプライバシーが保たれます。