Skip to main content

画像カラーピッカー

写真内の任意のピクセルをクリックまたはタップして、正確なHEX、RGB、HSLの色の値をブラウザ内でそのまま読み取れます。拡大ルーペが選ぼうとしているピクセルを表示し、最近使った色の短い一覧と画像から抽出したパレットも保持されます。

色を取得する画像をアップロード

画像をクリックまたはドラッグしてください。選択はブラウザ内で行われ、サーバーにはアップロードされません。

またはドラッグ&ドロップ

最大50MB。JPG、PNG、WebP、AVIF、HEIC、HEIFに対応。

このカラーピッカーを使う理由

ピクセル単位の正確な選択

11×11の拡大ルーペがカーソルや指に追従し、選びたいピクセルに正確に合わせてから選択できます。

HEX・RGB・HSLと色の名前

選択するたびにHEX、RGB、HSLの値と最も近いCSSの色名が一緒に表示され、それぞれにコピーボタンが付いています。

画面全体から色を選択

対応するChromium系のデスクトップブラウザでは、画面から選択ボタンでアップロードした写真だけでなく画面上のどこからでも色を取得できます。

使い方

  1. 1

    写真をアップロード

    色を取得したい画像を選択するかドロップします。

  2. 2

    クリック・タップ・キーボードで選択

    ピクセルをクリックまたはタップするか、矢印キーで移動(Shiftを押すと一度に10ピクセル移動)してEnterでハイライトしたピクセルを選択します。

  3. 3

    必要な色をコピー

    HEX、RGB、HSLと最も近い色の名前を確認し、必要な値の横にあるコピーボタンを使います。

この色は何色?値の読み方

選択するたびに4つの情報が同時に表示されます。#3a7bd5のようなHEXコード、それに相当するRGBの数値、HSL(色相・彩度・明度)の数値、そして最も近いCSSの色名(例: "steel blue")です。各形式の横にあるコピーボタンは画面上の表示でコピーを知らせるため、デザインツールやCSSファイルで必要な形式を打ち直さずにそのまま取得できます。

キーボード操作と拡大ルーペ

クリックやタップは手早く選びたいときに便利ですが、小さな部分を拡大して扱うにはキーボードの方が楽です。矢印キーでピッカーを1ピクセルずつ動かし、Shiftを押すと10ピクセルずつ移動し、Enterで十字線の下にあるピクセルを確定できます。ピッカーを動かしている間に表示される11×11の拡大ルーペによって、複雑な写真やコントラストの低い写真でも1ピクセルに正確に合わせられます。

最近の色・パレット・sRGBの精度

このツールは最近選んだ色を最大12個まで記憶し、画像全体から最大8色の主要な色のパレットも抽出するので、複数の色を同時に比較できます。値はブラウザがファイルを解釈する方法であるsRGBとして読み取られるため、特殊なカラープロファイルで保存された写真は、カラーマネジメント対応のデザインソフトとはわずかに異なって表示されることがありますが、これは正常な動作であり不具合ではありません。

よくある質問

この色は正確には何色ですか?

気になるピクセルをクリックまたはタップすると、HEX、RGB、HSLの値と最も近い色の名前がすぐに表示されます。

アップロードした写真以外、画面上の他のアプリからも色を選べますか?

ChromeやEdgeなど、EyeDropper APIに対応したChromium系デスクトップブラウザであれば可能です。その場合は画面から選択ボタンが表示されます。Safariやほとんどのモバイルブラウザでは利用できません。

Photoshopなど他のデザインツールで見る色と完全に一致しますか?

多くの場合近い値になりますが、常に完全に一致するわけではありません。値はブラウザが画像を解釈する方法であるsRGBとして読み取られ、カラープロファイルが埋め込まれた写真はカラーマネジメント対応のソフトでわずかに異なって表示されることがあります。

使うのにアカウントは必要ですか?

不要です。このカラーピッカーは無料で、登録せずに使えます。

写真はどこかにアップロードされますか?

されません。画像はブラウザ内に留まり、サーバーには送信されません。

マウスではなくキーボードで色を選べますか?

できます。矢印キーでピッカーを1ピクセルずつ動かし、Shiftを押すと10ピクセルずつ移動し、Enterでハイライトしたピクセルを選択できます。

Advertisements