画像カラーパレット生成
画像を選ぶだけで、デザインに使えるカラーパレットを作成できます。気に入った色をコピーし、グラデーションやCSS変数として書き出せます。処理はすべてブラウザ内で完結します。
- 画像からブラウザ内でパレット抽出
- 平均サンプリング対応のスポイト
- CSS / Tailwind / SVG / PNG / JSON 出力
- Zero Upload — 画像は端末外に送られない
画像をドロップ、またはファイルを選択
JPG / PNG / WebP / GIF / BMP / SVG
クリップボードから画像を貼り付けることもできます（Ctrl/Cmd+V）。
画像は端末内のみで処理され、サーバーへアップロードされません。
画像
パレット
画像を選ぶとパレットが生成されます。
「画像カラーパレット生成」について
Solasuの Image Color Palette Studio（画像カラーパレット生成）は、画像から色を取り出し、そのままデザインに使える形へ整えるためのブラウザツールです。
検査や鑑識のためのツールではなく、デザイナー・イラスト制作者・Web制作者・SNS投稿者・UI制作者が、写真やイラストからブランドカラーや配色の出発点を見つける実用ツールとして設計しています。
画像ファイルはSolasuのサーバーへ送信されず、端末内のメモリ上でのみ処理されます。
画像から色を抽出する方法
JPG・PNG・WebP・GIF・BMP・SVGなどの画像をドロップまたは選択すると、ブラウザ内で色が抽出されます。色数は5 / 8 / 12 / 16から選べ、バランス・主要色・鮮やか・落ち着き・暖色・寒色・コントラストなどの抽出モードも切り替えできます。
画像上をクリックするとスポイトで任意の地点の色を取得できます。写真のノイズが多い場合は、3×3や5×5などの平均サンプリングが便利です。
カラーパレットとHEX / RGB / HSL
カラーパレットは、デザインに使う色のまとまりです。HEXはWebで最もよく使われる表記、RGBは光の三原色、HSLは色相・彩度・明度で直感的に調整しやすい表記です。このツールでは各色をワンクリックでコピーできます。
抽出された割合はサンプリングに基づく推定値です。厳密なピクセル面積比ではない点に留意してください。色名も近似ラベルであり、標準規格名ではありません。
CSS・Gradient・Tailwindとして使う
抽出した色から linear / radial / conic のCSSグラデーション、CSS Custom Properties、Tailwind向けのカラーオブジェクトを生成できます。UIプレビューで見出し・本文・ボタンへの当てはめも確認できます。
PNG・SVG・JSON・TXTとしても保存できるため、デザイン共有や実装への引き渡しが簡単です。画像自体をサーバーへアップロードして共有する機能はありません。
写真からブランドカラーや配色を見つける
商品写真やイラストから主要色とアクセント候補を分けて表示します。暖色・寒色・パステルなどの派生パレットや、補色・類似色などの配色候補も提案できます（「最適な配色」ではなく提案です）。
簡易コントラスト比の確認や色覚シミュレーションもあります。詳細なWCAG分析が必要な場合は、既存のカラーアクセシビリティツールへ進んでください。
よくある質問
画像から色を抽出できますか？
はい。画像を選ぶと自動でカラーパレットが生成されます。スポイトで任意の地点の色も取得できます。
対応している画像形式は？
JPG / JPEG、PNG、WebP、GIF、BMP、SVGに対応しています。アニメGIFは先頭フレームを使用します。
画像はサーバーにアップロードされますか？
いいえ。すべての処理はブラウザ内で行われ、画像データは外部へ送信されません。
HEXとRGBの違いは？
HEXは#RRGGBB形式の表記、RGBは赤・緑・青の数値です。どちらも同じ色を表せます。HSLは色相・彩度・明度で調整しやすい表記です。
カラーパレットをCSSにできますか？
はい。CSS変数、グラデーション、Tailwind用オブジェクトとしてコピー・ダウンロードできます。
写真から主要色を取得できますか？
はい。Dominantモードや面積比の推定表示で、面積の大きい色を把握しやすくしています。
スマートフォンでも使えますか？
はい。アップロード、パレット表示、コピー、書き出しをスマホでも使いやすい縦流れのUIにしています。
PNGやSVGとして保存できますか？
はい。スウォッチ画像（PNG）や色情報付きSVG、JSON / CSS / TXTとしても保存できます。