画像からカラーパレット
画像をドロップすると、主要な色が分かります。画像は端末の中だけで処理されます。
画像をドロップして色を取得
または画像を貼り付け (⌘V / Ctrl+V)
一度に1枚 · 50MBまで
処理はブラウザ内で行われます。画像とその色がデバイスの外に出ることはありません。プライバシー
画像をアップロードせずにカラーパレットを取得するには?
このページに画像をドロップすると、主要な色を5色、8色、12色のいずれかで、占める割合の大きい順に表示します。色をクリックするとHEX、RGB、HSLの値をコピーでき、すべてをCSS変数やTailwind形式でまとめてコピーすることもできます。画像はブラウザ内で読み込まれ、アップロードされません。登録不要、広告なし。
更新日:
色はどのように選ばれますか?
画像の長辺を200ピクセルに縮小し、透明なピクセルを除いた残りを、見た目の近さでグループ分けします(Lab色空間でのk-meansクラスタリング)。ほとんど同じに見える色は1つとして数えます。同じ画像からは常に同じパレットが得られます。
パレットは何に使えますか?
| 出力 | 使いどころ |
|---|---|
| HEX、RGB、HSL | あらゆるデザインツール、またはCSS |
| CSS変数 | スタイルシート |
| Tailwind | tailwind.config の色設定 |
| JSONまたはリスト | コード |
| PNGスウォッチ | ムードボードや企画書 |
| .gpl | GIMP、Inkscape、Krita |
| .ase | Illustrator、Photoshop、InDesign |
画像そのものを別の形式にしたい場合は、無料の画像コンバーターをご利用ください。
制限
- 一度に1枚の画像のみ。
- アニメーションGIF、WebP、APNGは最初のフレームのみ。
- 完全に透明な画像からは色を取得できません。
- HEICの写真(iPhoneで撮影したもの)はChrome、Edge、Firefoxでは開けません。
Webページ上の画像から色を取得する
Chrome・Edge向けのImgkeep拡張機能なら、ファイルを保存しなくても右クリックひとつで同じことができます。画像を右クリックしてImgkeep、カラーパレットを取得の順に選ぶだけです。InstagramやPinterestのように写真が別のレイヤーの下に隠れているサイトでも動作します。
よくある質問
このカラーパレットツールは無料ですか?
はい。アカウント登録も、回数制限も、透かしも、広告もありません。
画像はアップロードされますか?
いいえ。色の解析はブラウザ内で行われ、画像がデバイスの外に出ることはありません。ページが送信するのは、ページビューの匿名カウントと、ストアへのリンクをたどったときのカウントだけで、画像・色・ファイル名が送られることはありません。
選んだ数より少ない色しか出てこないのはなぜですか?
画像に含まれる異なる色がそれより少ないためです。ほとんど同じに見える色は統合されるので、3色のフラットなロゴなら8色を指定しても3色になります。
どの形式でコピー・保存できますか?
各色はHEX、RGB、HSLでコピーできます。パレット全体はCSS変数、Tailwindの色定義スニペット、JSON、プレーンなリストとしてコピーできます。ファイルとしては、PNGのスウォッチ画像、GIMPパレット(.gpl、InkscapeやKritaでも読み込めます)、Adobeスウォッチ(.ase、Illustrator・Photoshop・InDesign用)で保存できます。
Webページ上の画像のパレットも取得できますか?
はい。Chrome・Edge向けの無料のImgkeep拡張機能を使えば、画像を右クリックしてImgkeep、カラーパレットを取得と選ぶだけです。InstagramやPinterestのように写真が別のレイヤーの下にあるサイトでは、Imgkeep: ここで画像を探す…、その他のオプション…、カラーパレットを取得の順に選んでください。
スマートフォンでも使えますか
はい、モバイルブラウザでも使えます。Imgkeep拡張機能はデスクトップ版のChromeとEdge向けです。
Webから直接色を取り出す。
Chrome・Edge向けのImgkeepなら、画像を右クリックしてパレットを取得したり、必要な形式で保存したりできます。