画像から色を抽出（カラーピッカー）
写真やロゴ、スクリーンショットの中の色を、スポイトのように取り出して調べられます。画像全体でよく使われている色も自動で取り出します。
画像を開いて、色を知りたい所をタップまたはクリックしてください。
またはここにファイルをドロップ
Ctrl+V（Mac は Command+V）で画像を貼り付けることもできます。
タップまたはクリックで色を取得します。押したまま動かすとルーペが表示されます。キーボードでは矢印キーと Enter を使います。
取得した色
まだ色を取得していません。
- HEX
- RGB
- HSL
- CMYK（概算）
最近の色
取得した色がここに最大 12 色まで表示されます。
メインカラー
ファイルは端末の外に出ません。処理はすべてブラウザの中で行われます。
使い方
- 画像を選ぶかドロップします。スクリーンショットは Ctrl+V か「画像を貼り付け」でも開けます。
- 色を知りたい場所をクリックまたはタップします。ルーペで位置を確かめながら選べます。
- 「取得した色」に表示された HEX や RGB の値を、横のボタンでコピーします。
- 「メインカラー」で「色の数」を選び、「HEX の一覧をコピー」「CSS としてコピー」「PNG で保存」でパレットを持ち出します。
主な機能
4つの表記でコピー
HEX、RGB、HSL、CMYK（概算）の値を、それぞれのコピーボタンでそのまま使えます。
ピクセル単位のルーペ
11×11 のピクセルが見えるルーペで、細い線や文字の色も狙って選べます。スマホでは指の上、マウスではポインターの横に表示されます。
最近の色を12色まで
取得した色は最大12色まで「最近の色」に並びます。保存されるのは色コードだけで、「消去」でいつでも削除できます。
メインカラーのパレット
画像によく使われている色を 5〜10色（初期値は6色）取り出し、それぞれの割合を数値と棒グラフで表示します。
パレットを書き出す
HEX の一覧や CSS のカスタムプロパティとしてコピーできるほか、「名前-palette.png」の画像として保存できます。
画面から色を取得
パソコンの Chrome と Edge では、「画面から色を取得」でページの外にある色も拾えます。
知っておくと便利なこと
ウェブ制作や資料作りで、ロゴや写真の色に合わせたいときに役立ちます。HEX（#1A73E8 のような6桁の表記）はウェブや多くのデザインアプリで、RGB と HSL は CSS で、CMYK は印刷の目安として使われます。CMYK は画面の色から計算したおおよその値なので、入稿用の正確な色としては使えません。
表示される値は sRGB の色です。メインカラーの割合は画像を縮小したコピーで計算しているため、写真ではおおよその目安と考えてください。グラデーションの多い写真よりも、イラストやロゴのように色数の少ない画像のほうが、はっきりしたパレットになります。キーボードでも、矢印キーで位置を動かして Enter で色を取得できます。
よくある質問
画像のカラーコードを調べるには？
画像を開いて調べたい場所をクリックかタップすると、HEX・RGB・HSL・CMYK の値が表示されます。コピーボタンを押せば、ほかのアプリにそのまま貼り付けられます。
スクリーンショットから色を取れますか？
はい。画面をコピーしたあと、このページで Ctrl+V（Mac は Command+V）を押すか、「画像を貼り付け」ボタンを使います。ボタンはクリップボードの読み取りができるブラウザで使えます。
「画面から色を取得」が使えません
このボタンは、EyeDropper という機能に対応したブラウザ（パソコンの Chrome と Edge）でだけ使えます。ほかのブラウザでは、画像を開いてその中から色を選んでください。
取得した色はどこに保存されますか？
最近の12色が、色コードとしてこのブラウザのローカルストレージに保存されます。画像そのものは保存されず、「消去」を押すと色の履歴も消えます。
画像から配色パレットを作れますか？
「メインカラー」で 5〜10色を自動で取り出せます。「CSS としてコピー」を使えば、カスタムプロパティの形でスタイルシートに貼り付けられます。