画像からカラーパレットを作る方法（HEXコード）

結論：Imgovoの画像からカラーパレットを作成を開き、写真、ロゴ、スクリーンショットを追加して、色数を選び、色を抽出をクリックします。画像の好きな場所をクリックすると、その正確なHEXコードを読み取れます。パレットは編集して、HEX、CSS変数、Tailwind、JSON、GIMPパレット、PNG/SVGのカラーシートとして書き出せます。何もアップロードされません。

パレットの使いみち

写真から作ったパレットは、ウェブサイト、プレゼン、ポスター、ロゴなどで、よくなじむ色を手早く選ぶ方法です。スクリーンショットやブランド画像の中にある色の、正確なHEXコードを調べるのにも使えます。

手順

1. 画像からカラーパレットを作成を開き、画像をページにドロップするか、クリックして選ぶか、クリップボードから貼り付けます。JPG、PNG、WebP、HEIC、TIFFなどに対応しています。ファイルがなくても、「例を試す」で様子を見られます。
2. 抽出する色数を決めます。写真には似た色合いがたくさんあります。すっきりしたブランドパレットなら5〜6色、細かく見たいなら10〜12色がおすすめです。
3. 色の選び方を、主要な色バランスアクセントから選びます。
4. 色を抽出をクリックします。
5. 色見本をクリックして選択します。色見本のボタンで、色のコピーやロックができます。

ある1点の正確な色を取る

画像をクリック（またはタップ）します。ピクセル単位では、Imgovoは縮小したコピーではなく、元の大きさの画像から1ピクセルを読み取ります。ピッカーのオプションで、3 × 3ピクセルの平均や5 × 5ピクセルの平均に切り替えることもできます。ノイズの多い写真にはこちらが向いています。そのあとパレットに追加か選択中の色を置き換えを選びます。

矢印キーで十字を動かしてEnterキーを押すこともできます。

画像の一部だけを分析する

範囲を選択を選び、画像の上で四角形をドラッグします。パレットはその部分だけから作られ、画像そのものはトリミングされません。画像全体を使うで、全体に戻せます。

その他のオプションでは、白に近い色や黒に近い色、選んだ色を無視したり、許容範囲を設定したりできます。代表色はグループの平均なので、1つのピクセルとしては存在しないことがあります。実際のピクセルが必要なときは、画像に含まれる色のオプションを選んでください。

パレットを編集し、ロックし、広げる

• 選択した色を、HEX、RGB、HSL、OKLCHで編集し、名前を付けられます。
• 残したい色はロックします。生成や適用を行っても、ロックした色はそのままです。
• 配色ルールで、1つの色から補色、類似色、スプリットコンプリメンタリー、トライアド、テトラード、モノクロマティックの組み合わせを作れます。
• スケールで、明度の段階、ティント、シェード、トーンを、5、9、11段階で作れます。
• バリエーションは、ロックされていない色を、パステル、ビビッド、くすみ、アース、モノクロ、ライトUI、ダークUIといったスタイルで埋めます。画像は再分析されません。
• 元に戻す／やり直す（Ctrl+ZとCtrl+Shift+Z）で、以前の色や設定に戻れます。

書き出し

書き出しから、パレットを次の形式でコピーまたはダウンロードできます。

• HEX、RGB、HSL、OKLCHのリスト
• CSS変数
• Tailwind CSS v4またはv3
• JSONまたはCSV
• GIMPパレット（.gpl）
• PNGまたはSVGのカラーシート
• 画像とパレットを並べたPNG

保存と共有

保存したパレットはこのブラウザの中だけに残ります。サイトのデータを消去すると消えるので、バックアップにはJSONファイルを書き出してください。パレットのリンクをコピーで作られるリンクには、色と短い名前だけが含まれ、画像は含まれません。リンクを知っている人は誰でもパレットを見られます。

使う前に色を確認する

写真から作ったパレットが、読みやすい文字色を保証するわけではありません。文字色と背景色の組み合わせは「コントラスト」タブで確かめましょう。色のコントラストを確認する方法（WCAG AAとAAA）をご覧ください。

プライバシー

色はお使いのブラウザの中で分析されます。画像が端末の外に出ることはなく、パレットと一緒に保存されることもありません。

今すぐ試す

画像からカラーパレットを作成を開き、画像を追加して、好きな場所をクリックしてHEXコードを取得してみましょう。元がSVGの場合は、先にSVG変換ツールでPNGにしておきます。