Palette Generator：カラースキーム作成ツール

Palette Generator とは？

近日公開: Palette Generator は、カラーセオリーのアルゴリズムを適用して、1つのベースカラーから数学的にバランスの取れたカラーパレットを生成するブラウザベースのツールです。3つのモードを提供します：ハーモニー（補色・類似色・トライアド・テトラド・スプリット補色・モノクロマティック・ダブルスプリット補色・長方形・クラッシュ・ファイブトーン・シックストーンを含む11種類のハーモニータイプ）、ジェネレート（シェード/ティント/トーン・制約付きランダム・WCAG コントラストペア・グラデーション補間・画像カラー抽出）、ムード（20種類のムードベースプリセット）。結果は、ヘックス値としてコピーしたり、CSS変数ファイル・JSONオブジェクト・SCSS変数・Tailwindコンフィグ拡張としてダウンロードしたり、Adobe Swatch Exchange（ASE）ファイルとしてエクスポートできるパレットです。すべてブラウザ内で実行され、サーバーにデータは送信されません。

主な機能

• 補色カラースキーム: カラーホイール上で直接対向する色（180°離れた位置）を使用した2色のパレットを生成し、固有の視覚的バランスで最大限のコントラストを実現します。
• 類似色パレット: カラーホイール上で隣接する3色を生成し、背景や落ち着いたUIデザインに適した調和のとれた低コントラストのパレットを作成します。
• トライアドとテトラドのハーモニー: トライアドは120°間隔で均等に配置された3色を使用し、テトラドは90°間隔で4色を使用します。どちらもハーモニーを保ちながらリッチなマルチカラーオプションを提供します。
• スプリット補色スキーム: 補色のより柔らかな代替手段 — ベースカラーと補色そのものではなく、その両隣にある2色を取ります。コンポーネントで 'split-complementary' ハーモニータイプとして検証済みです。
• モノクロマティックバリエーション: 明度を変えることで同じ色相の複数のシェードを生成し、まとまりのある単色パレットを作成します。
• 彩度と明度の調整: ベースカラー入力は、手動で入力した任意の有効なHEX値、カラーピッカーウィジェットで選択した値、またはランダムボタンでランダムに生成した値を受け付けます。
• 複数の形式でカラーをコピー: パレット内の各カラーには独自のコピーボタンがあります。「すべてコピー」ボタンはパレット全体をカンマ区切りのHEX値として書き出し、セッション履歴にもアクションを記録します。
• パレットをJSON・CSS・SCSS・Tailwind・ASEとしてエクスポート: ツールから直接5つのエクスポート形式が利用でき、ウェブ開発・スタイルシートプリプロセッサ・Adobeデザインアプリケーションに対応しています。

Palette Generator の使い方

ステップ1：ベースカラーを選択する

近日公開: Palette Generator を開きます。ツールは現在のサイトカラースキームから導出されたデフォルトのベースカラーで読み込まれます（デフォルトスキームはブルーを使用）。3つの方法で変更できます：

• カラースウォッチ入力をクリックする（ネイティブブラウザカラーピッカーが開きます）
• スウォッチの隣のテキストフィールドにHEX値を直接入力またはペーストする
• 「ランダム」ボタンをクリックしてランダムなHEXカラーを生成する

大きなプレビュースウォッチがリアルタイムで更新され、コントラストテキストでそのヘックス値とともにベースカラーが表示されます。

ステップ2：ハーモニータイプを選択する

ベースカラーセクションの下に、11種類のハーモニータイプボタンがグリッド状に表示されます。1つをクリックして選択します：

アクティブなハーモニータイプボタンはプライマリカラーでハイライトされます。選択を変更するたびに生成されるパレットが即座に更新されます。

ステップ3：生成されたパレットを確認する

「生成されたパレット」セクションに結果の2つのビューが表示されます：

• カラーブロックの水平バンド。各ブロックが比例した幅を占めます。任意のブロックをクリックするとそのカラーのHEX値が直接コピーされます。
• バンドの下のリストに、各カラーのHEXコードがスウォッチと独自のコピーボタンとともに表示されます。最初のエントリはベースカラーとしてラベル付けされます。

例えば、#e63946 からトライアドハーモニーを使用すると：

#e63946  (ベース)
#46e639
#3946e6

ステップ4：コピーまたはエクスポート

エクスポートボタンを使用してパレットをワークフローに保存します：

• JSONエクスポート: { baseColor, harmonyType, palette } を含む triadic-palette.json をダウンロードします。
• CSSエクスポート: :root CSSカスタムプロパティ --color-1・--color-2 などとして triadic-palette.css をダウンロードします。
• Tailwind JSエクスポート: palette をカラーファミリーキーとして color-1・color-2 などのエントリを持つTailwindコンフィグ theme.extend.colors ブロックを含む triadic-tailwind.js をダウンロードします。
• SCSS変数エクスポート: $color-1・$color-2 などとSassマップを含む triadic-palette.scss をダウンロードします。
• ASEエクスポート（プレミアム）: Photoshop・Illustrator・その他Adobeアプリケーションで読み取れるバイナリAdobe Swatch Exchangeファイルをダウンロードします。

ステップ5：プリセットとして保存またはリセット

このベースカラーとハーモニータイプの組み合わせを定期的に使用する場合は、プリセットパネル（Glyph Widgetsサポーター機能）を使用して名前で保存し、ワンクリックで呼び出せるようにします。デフォルトに戻すにはクリアボタンをクリックします — これでベースカラー #8467c7 と補色ハーモニータイプにリセットされます。

実用的な使用例

ランディングページのカラーシステムを設計する

プライマリブランドカラー、例えば #0f62fe（IBM ブルー）から始めます。柔らかめのコントラストペアを得るためにスプリット補色ハーモニーを選択します。結果として、プライマリブルーと衝突しない2つのウォームアクセントオプションが得られます。CSS変数としてエクスポートして、スタイルシートの :root ブロックに直接ペーストします。

:root {
  --color-1: #0f62fe;
  --color-2: #fe620f;
  --color-3: #fe0f62;
}

Tailwindパレット拡張を生成する

Tailwind CSSプロジェクトを構築していて、カスタムカラーファミリーが必要な場合。ブランドカラーを入力し、明から暗へのシェードを生成するためにモノクロマティックを選択し、Tailwind JSとしてエクスポートします。ダウンロードしたファイルでは、各シェードが monochromatic-1・monochromatic-2 などとしてインデックス付けされた、貼り付けそのまま使える theme.extend.colors ブロックが得られます。

Adobe Illustratorプロジェクト用のスウォッチを準備する

印刷デザインでウェブカラーパレットを合わせる必要がある場合。ベースカラーを入力し、ハーモニータイプを選択して、ASEとしてエクスポートします。バイナリASEファイルはASEFフォーマットに従っており、手動で値を再入力することなくすべてのRGB値を保持したまま、IllustratorのSwatchesパネルに直接ロードできます。

ヒントとベストプラクティス

ランダムボタンは完全にランダムなHEXベースカラーを設定します。意図的には選ばなかったハーモニーを探索するために使用してください — 新しいデザインの予想外の出発点を見つける素早い方法です。

ハーモニータイプを比較するとき、ベースカラーは常に生成された各パレットの最初のエントリであることに注意してください。これにより、すでにコミットした色（ロゴカラー、ブランドガイドラインの値）にパレットを固定しながら、さまざまな補色オプションを探索できます。

トライアドパレットは、明確に異なる3つの機能的なカラーが必要な場合に効果的です — プライマリアクション・セカンダリアクション・破壊的または警告状態。120°の間隔により、どの2色も視覚的に過度に似ることがありません。

アクセシビリティのために、最終化する前に生成されたパレットのカラーを Contrast Checker に通してください。補色ペアはWCAGコントラスト要件を満たすことが多いですが、類似色パレットはテキスト使用に失敗する組み合わせを生成する可能性があります。

履歴パネル（サポーター機能）は、ベースカラーとハーモニータイプとともに「すべてコピー」のすべてのアクションを記録し、正確な値を覚えることなくセッション中に以前に生成したパレットに戻ることができます。

よくある問題とトラブルシューティング

HEX値を入力してもパレットが更新されない: ツールはテキスト入力の各キーストロークに反応します。不完全または無効なHEX文字列を入力すると、generateHarmony 関数は現在の値を受け取り、値が有効な6桁のHEXになるまで予期しない出力を生成する可能性があります。完全な値を入力するか、有効な結果を保証するためにカラーピッカー入力を使用してください。

ランダムボタンが非常に暗いまたは明るいパレットを生成する: generateRandomColor() 関数は、ほぼ黒やほぼ白を含むHEX値の全範囲を生成します。ランダムな結果が極端すぎる場合は、もう一度ランダムをクリックするか、カラーピッカーを使用してベースカラーを手動で調整してください。

ASEとしてエクスポートするとAdobeが開けないファイルが生成される: ASEエクスポートはDataViewを使用してブラウザ内にバイナリASEFフォーマットファイルを構築します。ダウンロードにゼロバイトが含まれているかファイルが拒否された場合、ブラウザが application/octet-stream で Blob をサポートしているか確認してください。最新のChromiumベースのブラウザとFirefoxはこれを正しく処理します。

「すべてコピー」がカンマ区切りリストをコピーするが、改行区切りの値が必要: クリップボード出力はセパレータとして , を使用します。テキストエディタに値をペーストし、ターゲットツールが1行に1つの値を必要とする場合は、検索と置換を使用して , を改行に変更してください。

クリアボタンがデフォルトにリセットする: クリアボタンは、現在のサイトカラースキームからのベースカラーと補色ハーモニータイプを含むデフォルト設定を復元するように設計されています。これは期待される動作です — 以前のカスタムカラーを復元するものではありません。

プライバシーとセキュリティ

Palette Generatorは完全にクライアントサイドで動作します。すべてのカラーハーモニー計算はJavaScriptを使用してブラウザ内で行われます — カラー値・設定・エクスポートデータはサーバーに送信されません。エクスポートされたファイル（JSON・CSS・SCSS・Tailwind JS・ASE）はメモリ内Blobオブジェクトとして生成され、デバイスに直接ダウンロードされます。ページが読み込まれると、ツールはオフラインで動作します。

よくある質問

Palette Generatorは無料ですか？

はい。コアのパレット生成とすべての標準エクスポート形式（JSON・CSS・SCSS・Tailwind JS）はアカウント不要で無料です。ASEエクスポートはGlyph Widgetsサポーター機能であり、Ko-fiで$5以上の寄付をすることで利用でき、30日間のプレミアムアクセスが付与されます。

Palette Generatorはオフラインで動作しますか？

はい。ブラウザでページが読み込まれると、すべてのカラー計算とファイルエクスポートはインターネット接続なしで機能します。ツールは通常のパレット生成中にネットワークリクエストを行いません。

Palette Generatorで自分のデータは安全ですか？

すべての計算はブラウザ内でローカルに実行されます。カラーデータ・ベースカラー・エクスポートファイルはサーバーに送信されません。パレット作業は完全にプライベートです。

トライアドとスプリット補色の違いは何ですか？

トライアドはカラーホイール上で正確に120°間隔で3色を選択します。スプリット補色はベースカラーと補色を挟む2色を取ります — 反対の色相の両側30°にある2色です。スプリット補色は通常、真の補色ペアよりも視覚的な緊張感が少なく、それでも良いコントラストを提供します。

エクスポートされたCSS変数の使い方は？

CSSエクスポートは --color-1・--color-2 などの名前の変数を持つ :root ブロックを生成します。このブロックをスタイルシートにペーストし、var(--color-1) で任意の場所から変数を参照します。ファイル名にはハーモニータイプが含まれているので、complementary-palette.css は明確にラベル付けされています。

Tailwindエクスポートをプロジェクトで直接使用できますか？

ダウンロードされるファイルは完全な tailwind.config.js ではなく、Tailwind設定スニペットです。theme.extend.colors 内から colors オブジェクトをコピーして、既存のTailwind設定にマージしてください。カラーファミリーは color-1・color-2 などのエントリで palette をキーとして使用するため、テンプレートで text-palette-color-1 や bg-palette-color-2 としてカラーを参照できます。

ASEエクスポート形式とは何で、誰向けですか？

ASE（Adobe Swatch Exchange）は、Photoshop・Illustrator・InDesignを含むAdobe Creative Suiteアプリケーションで使用するためのカラースウォッチを保存するバイナリ形式です。ウェブ（CSS）と印刷（Adobeアプリ）の両方で作業するデザイナーは、値を手動で再入力することなく、両方の環境でカラーの一貫性を維持するためにASEエクスポートを使用できます。

各ハーモニータイプは何色生成しますか？

補色は2色を生成し、類似色・トライアド・スプリット補色・クラッシュはそれぞれ3色を生成し、テトラドと長方形はそれぞれ4色を生成し、ダブルスプリット補色とファイブトーンはそれぞれ5色を生成し、シックストーンは6色を生成し、モノクロマティックは可変数のシェードを生成します。すべてのパレットエントリはパレットバンドとその下のリストに表示されます。

画像から選んだ色から始めることができますか？

はい。近日公開: Image Color Picker を使用して写真からカラーを抽出し、そのHEX値をコピーして、Palette Generatorのベースカラーテキストフィールドにペーストしてその周りのハーモニーを構築します。

お気に入りのパレットを保存できますか？

Glyph Widgetsサポーターアカウントがあれば、プリセットパネルでベースカラーとハーモニータイプを保存した名前付きプリセットを保存できます。履歴パネルも過去の「すべてコピー」操作を記録しており、以前に生成したパレットを簡単に見つけられます。

関連ツール

• 近日公開: Color Blender — 2色をブレンドして中間ステップを生成し、パレット作業を補完します。
• Color Picker — パレットを生成する前に、カラーホイールやスライダーを使用して正確なベースカラーを選択します。
• 近日公開: Gradient Generator — 生成されたパレットのカラーを使用してCSSグラデーションを作成します。
• Contrast Checker — UIテキストで使用する前に、パレットの任意の2色のWCAGコントラスト比を検証します。

今すぐ Palette Generator を試す: 近日公開: Glyph Widgets Palette Generator