🎨 カラーパレットジェネレーター
類似色、補色、三色など、調和モードを使って美しい5色のカラーパレットを即座に生成。または任意の画像からパレットを直接抽出。気に入った色をロックし、HEX リスト、CSS 変数、Tailwind 設定、または JSON としてエクスポート。無料で、アップロードやログイン不要でブラウザ上で完全に動作。
スペースキーを押して新しいパレットを生成してください。
はじめからプライベート. このツールはすべてブラウザ内で動作します — 入力した内容はアップロードも保存もされず、オフラインでも使えます。
概要
このツールは2つの方法で5色のカラーパレットを作成します。4つの調和モード(ランダム、類似色、補色、三色)から生成するか、任意の画像から5つの主要な色を抽出します。画像はローカルで median-cut 量子化処理され、アップロードされません。個々のカラースウォッチをロックして、再生成時も保持し、任意の HEX コードをコピーしたり、必要な形式で全体をエクスポートできます:単純な HEX リスト、CSS カスタムプロパティ、Tailwind カラースニペット、または JSON 配列。すべてはブラウザ上で動作するため、色や画像データはデバイスから一切送信されません。サーバー、トラッキング、アカウント不要。 各スワッチも、最も近いPANTONE Solid Coatedの番号(例えばPANTONE 185 C)を表示しますので、生成されたまたは画像から導き出されたパレットは、印刷ワークフローに直接移行できます。
使い方
- モードのドロップダウンから配色モード(ランダム・アナログ・補色・トライアド)を選択してください。
- 「生成」ボタンをクリック(またはスペースバーを押す)して、新しい5色パレットを作成してください。
- スウォッチのロックアイコンをクリックするとその色が固定され、残りの色だけが再生成されます。
- スウォッチの「HEXをコピー」をクリックして、その色のHEXコードをクリップボードにコピーしてください。
- 「すべてコピー」を使うと5つのHEXコードをまとめてエクスポートし、デザインツールやコードにすぐ活用できます。
- 「画像から」をクリックして写真を選択すると、ツールがその5つの主要な色をローカルでパレットに抽出します。
- エクスポート形式を選択してください — HEX リスト、CSS 変数、Tailwind、または JSON — その後「コピー」をクリックして、パレットをプロジェクトに貼り付けます。
よくある質問
- このツールは無料で使えますか?
- はい、完全無料です。サブスクリプション・アカウント・隠れた制限は一切ありません。ページを開いてすぐパレットを生成できます。
- 色データはサーバーにアップロードされますか?
- いいえ。ツール全体がブラウザ内のJavaScriptで動作します。サーバーには何も送信されず、パレットデータはブラウザのlocalStorageにのみ保存されます。
- カラーパレットジェネレーターはオフラインで使えますか?
- はい。ページを一度読み込めば、完全オフラインで動作します。外部APIの呼び出しやCDNへの依存は一切ありません。
- 配色モードの違いは何ですか?
- ランダムは無関係な5色を選びます。アナログはカラーホイール上で隣接する5色をまとめ、落ち着いた統一感のある印象を作ります。補色はホイールの反対側の色を組み合わせて高いコントラストを生みます。トライアドは120度間隔の3つの色相グループを使い、鮮やかでバランスの良いパレットを作ります。
- 気に入った色を残したまま、残りだけを変えることはできますか?
- はい。スウォッチのロックアイコンをクリックするとその色が固定されます。ロックされたスウォッチは生成時にスキップされるので、お気に入りの色を残しながら自由に探索できます。
- 画像からパレットを作成できますか?
- はい。「画像から」をクリックして写真を選んでください。ツールが median-cut 量子化を使って画像の5つの主要な色をブラウザ内で抽出します — 画像はアップロードされません。
- 利用可能なエクスポート形式は?
- 単純な HEX リスト、CSS カスタムプロパティ(:root 変数)、Tailwind カラースニペット、または JSON 配列としてパレットをコピーできます。コードやデザインツールに貼り付ける準備が整っています。
- パレットのPantone番号は確認できますか?
- はい。5つのスワッチのそれぞれがHEXのコードと最も近いPANTONE Solid Coatedの一致(例:PANTONE 185 C)を表示します。Pantoneラベルをクリックしてコピーできます。一致は知覚的CIEDE2000の公式を使用しており、近似値sRGBの参照です。これは、Pantoneスポットインクがスクリーン値ではなく物理的に定義されているためです。