画像からカラーパレットを作成

画像上の位置からカラーパレットを作成する

Webデザインや資料作成で、画像内の色を再利用したい場合に便利です。本ツールは画像の特定位置の色をサンプリングし、パレットとして整理します。

具体的な利用例

例えば、ロゴ画像（1200×800ピクセル）を読み込むと、初期設定では10箇所が自動的にサンプリングされます。パレット容量を5に設定し、ロゴの主要な5色をクリックで指定すれば、表示用キャンバスから採った5色が保存されます。縮小や色変換があるため、元のブランド指定色との一致は保証されません。

実際のパラメータと処理

• 画像サイズ: 最大25 MiB、2400万画素まで。
• サンプリング位置: 初期は10箇所（ランダム）。クリックで追加可能。
• パレット容量: 1〜20色。超過時は古い色から削除。
• 表示キャンバス: 最大1050×720ピクセルに縮小。
• エクスポート形式: CSS変数、コード、SVG、PNG。

注意点と制限

このツールは位置サンプリング方式であり、画像全体の統計的な主要色を抽出するわけではありません。ランダムな開始点は重複したり、小さな領域を逃したりする可能性があります。そのため、必要な領域は手動でクリックして色を選んでください。

よくある質問

Q1: パレットの色を並べ替えることはできますか？

いいえ、並べ替え機能はありません。色はサンプリングされた順に表示され、エクスポートもその順序で行われます。

Q2: 画像の解像度が高すぎる場合はどうなりますか？

画像は最大1050×720ピクセルに縮小されて表示されますが、サンプリングも縮小後のキャンバス上で行われます。ただし、2400万画素を超える画像は読み込めません。

Q3: エクスポートしたCSS変数はどのような形式ですか？

CSS変数は、サンプリングされた色のHEX値を使用して生成されます。例えば、--color-ff0000: #ff0000;のような形式です。

チェックリスト

• 画像を読み込む
• パレット容量を調整する
• 重要な領域をクリックして色を追加する
• −で容量を減らすと末尾の色が削除される。満杯の状態で新しく選ぶと最も古い色が削除される
• エクスポート形式を選択する
• CSSまたはコードをコピーまたはダウンロードする