スクリーンショットカラーピッカー

画像内の任意のピクセルの HEX、RGB、HSL のコードを正確に取得できます。

ブラウザ内で動作
アップロード不要
アカウント不要

ブラウザツールを読み込んでいます…

スクリーンショットカラーピッカーでできること

スクリーンショットからブランドカラー、ボタン、グラフの線の色を目で見て合わせるのは当てずっぽうです。画像を読み込んでカーソルを動かすと、拡大鏡が 11 × 11 ピクセルのグリッドを拡大表示し、どのピクセルの上にいるかが正確にわかります。クリックすると、色が大きな色見本として表示され、HEX、RGB、HSL の値がそれぞれのコピー欄に入ります。

最後に取得した 10 色は「最近使った色」の行に残るため、いくつかの色合いを比べて、1 つに戻ることもできます。アンチエイリアスのかかった縁やグラデーションはピクセルごとに色が変わるため、平坦な部分の中央から取得してください。画像全体の主な色を調べるには、カラーパレット抽出を使ってください。

例

選ぶもの

組み込みの請求ページのサンプル（「例を使う」）

結果

HEX #3157D5
RGB rgb(49, 87, 213)
HSL hsl(226, 66%, 51%)

サンプルでは、青い「支払い方法を更新」ボタンの内側のピクセルを取得しています。

スクリーンショットカラーピッカーの使い方

「ファイルを選択」をクリックするか、スクリーンショットを貼り付けるか、画像をドロップします。
画像の上でカーソルを動かして拡大し、目的のピクセルをクリックします。正確な座標で取得するには、「その他のオプション」で X と Y を入力し、「このピクセルを取得」をクリックします。
「コピー」をクリックして HEX コードをコピーするか、RGB や HSL をそれぞれの欄からコピーします。

知っておきたいこと

スクリーンショットに記録されるのは、カラープロファイルや Night Shift が適用された後に画面に表示された色です。アプリの CSS やデザインファイルの色と少し異なる場合があります。
JPG の圧縮では、特に縁の近くで色が少しずれます。正確さが重要なときは PNG のスクリーンショットから取得してください。
コードには透明度は含まれません。半透明のピクセルでは画像の下にアルファ値が表示されますが、HEX はそれを除いた色です。

スクリーンショットカラーピッカーについてよくある質問

画像内の色の HEX コードを調べるには？

画像を読み込み、拡大鏡がその色の上に来るまでカーソルを動かしてクリックします。HEX コードは結果の一番上に「コピー」ボタン付きで表示され、その下に RGB と HSL の値が表示されます。

取得した色がブランドカラーと少し違うのはなぜですか？

画面にはカラープロファイルが適用され、JPG の圧縮やアンチエイリアスで個々のピクセルが変わるためです。PNG の大きな平坦部分の中央から取得してください。値がわずかにずれている場合は、ブランドガイドのコードを使ってください。

ブラウザの外にある画面の色を取得できますか？

先にスクリーンショットを撮り、Ctrl+V または Cmd+V でここに貼り付けてください。どの画像にも使えるため、ほかのアプリやデザインファイルのスクリーンショットでも同じように取得できます。