画像カラー抽出 — 画像から配色を取得

画像から色を抽出する手順

画像を選ぶ。「画像を選択」をクリックするか、画像ファイルを上のエリアにドラッグ＆ドロップします。
パレットを見る。その画像で目立っている色が、プレビューの下に色見本として並びます。
クリックしてコピーする。それぞれの色見本を押すとHEXコードが手に入り、CSSやデザインファイルにそのまま貼り付けられます。
別の画像を試す。「別の画像」を押すと、次の画像からパレットを抽出できます。

このツールでできること

画像全体を読み取って、その中で目立っている色を取り出し、そのまま使えるパレットにします。メインビジュアルの写真に合わせてサイトの配色を組み立てたいとき、画像でしか手元にないロゴから正確な色を取りたいとき、ムードボードの写真をHEXコードに落とし込みたいとき、商品写真に馴染むバナーを作りたいときなどに便利です。

処理はすべてブラウザ内で完結します。画像がサーバーに送信されることは一切ないため、ファイルは手元に保たれたままです。

抽出した色を配色として使うには

ここで出てくるのは「その画像に多く使われている色」であって、「配色として優れた色」とは限りません。写真からは近い色ばかりが並ぶことがよくありますし、色味の強い画像だと、ページ全体に使うには彩度が高すぎるパレットになることもあります。完成した配色ではなく、素材として受け取るのがちょうどいい距離感です。

実用的なのは、1〜2色をアクセントとして採用し、残りは無彩色系でレイアウトを支える組み方です。惜しいけれど少し違う、という色は、カラーピッカーに入れてHSLの明度を調整すると扱いやすくなります。そして、これらの色の上に文字を置く前にはコントラストチェッカーで確認してください。写真から抽出された色は、面積の大きさで選ばれているだけで、読みやすさは考慮されていません。

よくある質問

抽出された色が似たようなものばかりです

パレットは画像で目立っている色を反映します。夕焼けや森、色付きの背景で撮ったスタジオ写真のように、全体が一つの色調でまとまっている画像では、その近い色が並ぶのが自然な結果です。

ブランドカラーを正確に調べられますか？

きれいなロゴ画像であれば、かなり近い値が得られます。ただし画像の圧縮によって色がわずかに変化することがあるため、JPEGのロゴから取った値は公式の色と少しずれる可能性があります。

抽出した色をそのままサイトに使えますか？

使えますが、先にコントラストを確認してください。写真の中では美しく見える色でも、文字色や文字の背景に使うと読みづらいことがあります。

画像はサーバーにアップロードされますか？

いいえ。画像はブラウザ内で読み込まれるため、端末から外に出ることはありません。