画像カラー抽出ツール
画像をアップロードすると、主要な色を自動抽出します。HEX・RGB・HSLコードをすぐにコピーできます。
ここに画像をドロップするか ファイルを選択
JPG、PNG、WebP、GIF、BMPに対応
色の抽出方法
1
画像をアップロード
画像ファイルをドラッグ＆ドロップするか、ファイル選択ボタンをクリックしてください。
2
カラーコードを確認
抽出された色のリストからHEX、RGB、HSLタブを切り替えて確認できます。
3
コードをコピーして活用
カラーコードをクリックするとクリップボードにコピーされます。デザインツールやコードにそのまま貼り付けてください。
HEX・RGB・HSLとは？
HEX
HEX — Web・デザインの標準形式
#RRGGBB形式の16進数コードです。CSS・Figma・Photoshopで最も広く使われています。
RGB
RGB — 光の三原色
赤(R)・緑(G)・青(B)それぞれ0〜255の値で色を表現します。
HSL
HSL — 色相・彩度・明度
色相(H)・彩度(S)・明度(L)で構成されます。感覚的に色を調整したい場合に便利です。
活用例
ブランドカラーの分析、SNSサムネイルのパレット統一、UIテーマの色抽出など様々な場面で活用できます。
よくある質問
何色まで抽出できますか？
最大10色まで抽出できます。5色・8色・10色から選択できます。
抽出された色が実際の画像と少し違うのはなぜですか？
アルゴリズムが類似した色をグループ化して代表色を選ぶためです。これは意図された動作です。
アップロードした画像はサーバーに保存されますか？
いいえ。すべての処理はブラウザ上で行われ、画像はサーバーに送信されません。
HEXとRGBどちらを使えばいいですか？
CSSやデザインツールではHEXが最も汎用的です。プログラムで色を調整する場合はRGBやHSLが便利です。
透過PNG画像をアップロードするとどうなりますか？
透過部分は白として処理されます。透過が多い画像では結果が異なる場合があります。
モバイルでも使えますか？
はい。モバイルブラウザでもファイル選択ボタンからギャラリーの画像を選んで色を抽出できます。