カメラ映像からカラーコードを抽出（スポイト）
スマホやWebカメラに映した実物の色を、映像をなぞって確認し、クリック（タップ）でHEX・RGB・HSLとして取り出せます。映像はこのページの外には出ません。取得した色の形式変換はカラーコード変換、画像ファイルから色を抜き出すには画像カラーパレット抽出もご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
「カメラを開始」を押すと、ここに映像が表示されます。映像の上をなぞると、その位置の色が表示されます。
いまの位置の色
映像の上にポインターを重ねる（スマホは触れる）と表示されます。
取得した色
映像をクリック（タップ）すると、ここに色が表示されます。
- hex
- rgb
- hsl
履歴
使い方
- 「カメラを開始」を押し、ブラウザのカメラ使用許可で「許可」を選びます。
- 色を知りたいものを映し、映像の上をなぞると「いまの位置の色」にリアルタイムで表示されます。
- 「映像を静止」で映像を止めると、手を動かさずに複数の位置の色を取れます。
- 色をクリック（タップ）すると「取得した色」に確定し、HEX・RGB・HSLをそれぞれコピーできます。
注意点
- カメラ映像の色は、照明の色・明るさ、カメラの自動ホワイトバランスや露出補正の影響を受けます。実物の色と完全には一致しないため、あくまで目安として使ってください。
- 色は映像の1画素、または選んだ範囲の平均です。ノイズの多い暗い場所では、平均する範囲を広げると安定します。
- 映像は録画も保存もされず、停止またはページを閉じると破棄されます。
用語解説
HEX（カラーコード）
赤・緑・青の強さを16進数2桁ずつ並べた色の表記です。#FF0000 は純粋な赤。CSSやデザインツールで広く使われます。
ホワイトバランス
光源の色の違いを補正して、白いものが白く写るようにするカメラの機能です。自動の場合、映す物によって色味が変わることがあります。
よくある質問
取得した色が実物の色と違って見えるのはなぜですか？
カメラは照明の色や明るさに合わせてホワイトバランスや露出を自動調整するため、映像の色は実物と少しずれます。白い紙を同じ光の下で映して色のずれを確認するか、自然光の下で使うと近づきます。
「5×5画素の平均」などは何のためにありますか？
カメラ映像は画素ごとにノイズがあり、1画素だけだと値がばらつきます。周囲の画素を平均すると、とくに暗い場所や布のような細かい模様のあるものでも安定した色が得られます。
カメラの映像は保存・送信されますか？
いいえ。映像はブラウザ内で処理されるだけで、録画も保存も外部への送信もされません。停止するかページを閉じると破棄されます。
このページをシェア