画像の主要カラーと HEX/RGB コードをブラウザ内で抽出し、マウスで画像上を直接スポイトでき、全色パレットも展開できます。
画像パレット抽出
画像の主要カラーと HEX/RGB コードをブラウザ内で抽出し、マウスで画像上を直接スポイトでき、全色パレットも展開できます。
画像パレット抽出について
ブラウザで主要色を高速サンプリング
画像を 1 枚アップロードまたは貼り付けると、ブラウザは最長辺 160 px の解析用キャンバスへ描画します。近い RGB バケットをまとめ、類似したスウォッチを統合し、透明ピクセルや白に近い背景を除外しながら 4、6、8 色の主要色を返せます。抽出した主要色は全色パレットに展開して一つずつコピーでき、元画像の上でマウスを動かせば任意の位置の色をスポイトして取得リストに集められます。
コピーできる色コードとコントラストの目安
各スウォッチには HEX、RGB、おおよその割合、推奨する黒または白の文字色、WCAG 風のコントラスト目安が表示されます。素早い配色探索には便利ですが、縮小されたブラウザ bitmap からのサンプルであり、校正済み色管理や印刷校正の代替ではありません。
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
画像はアップロードされますか？
いいえ。画像はブラウザ内の HTML5 Canvas でデコードおよびサンプリングされ、端末外へ送信されません。
抽出された色は完全に正確ですか？
主要配色を素早く把握するための結果です。縮小画像をサンプリングして近い RGB 色をまとめるため、校正済みの色管理フローの代替ではありません。
これらの色をデザインツールにコピーできますか？
はい。各スウォッチに HEX と RGB があり、コピーボタンで HEX コードをコピーできます。