画像 色 抽出
写真の任意のピクセルをクリックして正確な色を取得。
写真の上にカーソルを合わせると拡大表示され、クリックでそのピクセルの正確な色を取得できます。
ブラウザ内で動作します。ファイルが端末から出ることはありません。
- HEX・RGB・HSLに対応
- 拡大鏡で正確に選択
- 主要カラーパレット
画像から色を抽出する方法
- ここに写真をドロップします。
- 写真の上にカーソルを合わせ、欲しい正確なピクセルをクリックします。
- HEX、RGB、HSLの値をコピーします。
HEX・RGB・HSLの違い
| 形式 | 例 | 主な用途 |
|---|---|---|
| HEX | #3B82F6 | CSS、デザインツール、多くのスタイルガイド |
| RGB | rgb(59, 130, 246) | CSS、画像編集ソフト |
| HSL | hsl(217, 91%, 60%) | 色の明るさや彩度の調整 |
主要カラーパレットの作り方
写真を小さな作業用サイズに縮小したうえで、色量子化という手法を使って色を約8色の代表的な色調にグループ化します。これはGIFやパレット化されたPNGを出力するために色数を減らすのと同じ技術です。表示されるのは面積として最も広い色であり、必ずしも視覚的に最も目立つ色とは限りません。
正確に選ぶコツ
- クリックする前に拡大鏡でズームインしましょう。カーソル周辺のピクセルを拡大して表示するので、欲しいピクセルに正確に合わせられます。
- 同じセッション内で以前に選んだ色をもう一度使いたいときは「履歴」をクリックします。
- ノイズやJPEGのアーティファクトがある写真では、圧縮で個々のピクセルがずれやすいふちではなく、欲しい色の単色部分からピクセルを選びましょう。
画像カラーピッカーのFAQ
色の取得はどのくらい正確ですか？
カーソルの真下にあるピクセルを正確に読み取り、ルーペで拡大表示されるので正確に位置を合わせられます。
主要カラーパレットとは何ですか？
写真全体で最も多く現れる約8色を表示します。デザインを写真の色に合わせたいときに便利です。
以前に選んだ色に戻れますか？
はい。クリックした色はすべて「履歴」に保存されるので、もう一度クリックすればHEX、RGB、HSLの値を呼び出せます。
写真はアップロードされますか？
いいえ。色の取得はブラウザ内でピクセルを読み取るだけなので、写真が端末から出ることはありません。
HEXとRGBの違いは何ですか？
どちらも同じ色を異なる表記で表しているだけです。HEXは6桁のコード、RGBは赤・緑・青の値を0〜255で表します。使っているツールやCSSが求める方を使ってください。
HEXの代わりにHSLを使う理由は？
HSLは色相、彩度、明度を分けて扱うため、RGBの3つの値を計算し直すより、1つの数値を変えるだけで明るい色や落ち着いた色を作りやすくなります。
取得した色はJPEG圧縮の影響を考慮していますか？
いいえ、ドロップしたファイルのピクセル値をそのまま読み取るため、JPEG圧縮によってすでに生じた色のずれもそのまま反映されます。正確な色を知りたいときは、ふちではなく単色の部分から選んでください。