pixel → HEX · RGB · HSL
画像カラーピッカー
画像のピクセルをクリックするとその色を読み取れます。#0060fdのピクセルは、rgb(0, 96, 253)、hsl(217, 100%, 50%)と表示されます。画像を追加すると、自分の画像から色を選べます。
- rgb(0, 96, 253) = #0060fd
- rgb(255, 128, 0) = #ff8000
- #0060fd 75% + #ffffff 25%
クリック、タップ、矢印キーで選べます。画像はこのタブ内で描画されるだけで、アップロードされることはありません。
Scanned by 
NortonTM Safe Web
概要
- 価格
- 料金なし
- アカウント
- 不要
- アップロード
- なし — 画像はブラウザーのタブ内で描画され、何も送信されません
- 形式
- PNG、JPEG、WebP、GIF、AVIF、BMP、SVG（ブラウザーがデコードできる範囲）
- 画像サイズ
- 長辺最大1600ピクセルで描画。ファイルは200 MB、120メガピクセル（1億2000万ピクセル）まで
- パレット
- 約20,000ピクセルのサンプルに対するメディアンカットによる主要6色
選んだ色とパレットの仕組み
これらの行はツールと同じコードで生成されています。パレットの表は、青いピクセル12個と白いピクセル4個からなる4 × 4ピクセルの画像を使っています。
| ピクセルの色 | HEX | RGB | HSL |
|---|---|---|---|
| #0060fd | #0060fd | rgb(0, 96, 253) | hsl(217, 100%, 50%) |
| #ff8000 | #ff8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) |
| #00a86b | #00a86b | rgb(0, 168, 107) | hsl(158, 100%, 33%) |
| #767676 | #767676 | rgb(118, 118, 118) | hsl(0, 0%, 46%) |
| #fdd835 | #fdd835 | rgb(253, 216, 53) | hsl(49, 98%, 60%) |
| パレットの色 | ピクセルの割合 |
|---|---|
| #0060fd | 75% |
| #ffffff | 25% |
画像から色を選ぶ手順
画像を追加
PNG、JPEG、WebP、GIF、AVIF、BMP、SVGのファイルをボックスにドロップするか、「参照」で選ぶか、クリップボードの画像を貼り付けます。自分の画像を追加するまではサンプル画像が表示されます。
クリック、タップ、または矢印キー
点をクリックまたはタップするか、画像の上をドラッグします。画像にフォーカスがある状態では、矢印キーで十字線が1ピクセルずつ、Shiftと矢印キーで10ピクセルずつ動きます。タイルには色がHEX、RGB、HSLで表示されます。
色またはパレットの項目をコピー
タイルのコピーを押すか、パレットの色見本を押してそのHEXコードをコピーします。パレットには画像全体の主要な6色が、それぞれが占める割合とともに並びます。
色を読み取る仕組み
ブラウザーがファイルをデコードし、ページがこのタブ内のcanvas要素にそれを描画します。長辺が1600ピクセルを超える画像は収まるように縮小されるため、非常に大きな画像から読み取った色は、隣り合うピクセルが平均化された縮小コピーのものになります。その後、ページは十字線の下の1ピクセルの赤、緑、青、アルファの値をcanvasに問い合わせ、HEX、RGB、HSLで表示します。透明度のあるピクセルはアルファ値とともに表示されます。canvasは色をアルファで乗算して保存するため、半透明のピクセルのチャンネルは1ずれて読み取られることがあります。不透明度50%では、200が199と読み取られます。
パレットにはメディアンカットを使います。ページはn番目ごとのピクセルを最大約20,000個調べ、半分より透明なピクセルは除外します。これらの色を1つのボックスに入れ、6つのボックスになるか、2つの異なる色を含むボックスがなくなるまで、いずれかのチャンネルの広がりが最も大きいボックスをそのチャンネルの中央値で繰り返し分割します。各ボックスは、そのピクセルの平均色と、サンプルしたピクセルに占める割合とともに、大きい順に表示されます。同じ画像なら結果は毎回同じです。異なる色が6色未満の画像ではパレットが短くなり、アニメーション画像は1枚の静止画として読み取られます。
画像カラーピッカーの質問
画像の色のHEXコードを調べるには？
画像を追加し、調べたい場所をクリックします。HEXタイルにそのピクセルのコード（たとえば#0060fd）が表示され、コピーを押すとクリップボードに入ります。場所を選ばずに主要な色を得たい場合は、代わりにパレットの色見本を押してください。
どの画像形式に対応していますか？
PNG、JPEG、WebP、GIF、AVIF、BMP、SVGで、ブラウザーがデコードできるものに限ります。AVIFはブラウザーのバージョンによります。PDFやTIFFなどの他のファイルは、メッセージとともに受け付けられません。200 MBを超えるファイルや120メガピクセル（1億2000万ピクセル）を超えるファイルも受け付けられません。
6色のパレットはどのように選ばれますか？
約20,000ピクセルのサンプルに対するメディアンカットで選びます。色を最も広がりの大きいチャンネルの中央値でボックスに分割して6つにし、各ボックスをそのピクセルの平均色にします。各色見本の下のパーセンテージは、そのボックスがサンプルしたピクセルに占める割合です。ほとんど透明なピクセルは除外されます。
近くのピクセルで色がわずかに違うのはなぜですか？
写真やJPEGのような圧縮画像はピクセルごとに少しばらつくため、同じに見える2点でもチャンネルごとに数単位違うことがあります。代表的な色が必要なときは、複数の点をクリックするか、多数のピクセルを平均するパレットを使ってください。
画像はどこかにアップロードされますか？
いいえ。ファイルはこのタブ内でブラウザーがデコードして描画し、色はその描画から読み取られ、サーバーには何も送信されません。ページを閉じるか再読み込みすると、画像は破棄されます。
画面から選ぶボタンは何をしますか？
EyeDropper機能を備えたブラウザーでは、このボタンで他のウィンドウを含む画面上の任意の点をクリックして、その色を表示できます。この機能のないブラウザーにはボタンが表示されません。画像からの選択はどこでも使えます。