ヒューパッドはこんなツールです
ヒューパッドは、動画のコマと画像から色を取るカラーピッカー(スポイト)です。動画を開いて狙ったコマでぴたりと止め、ルーペでピクセルを選ぶと、HEX・RGB・HSL・OKLCH・CMYK の値が出て、デザインファイルやスタイルシート、色調整のメモにそのままコピーできます。保存した色はファイル名とコマの時間を覚えているので、あとからどこの色か分かります。
すべてこの端末の中で行います。動画や画像はこのブラウザの中だけで読み取り、何もアップロードしません。インストールもアカウントも不要で無料、ツールの中に広告はありません。韓国語・英語・日本語・ドイツ語に対応し、カメラは使いません。
動画を開く
「動画・画像を選ぶ」をタップするか、ページのどこかにファイルをドロップするか、コピーしたファイルやスクリーンショットを貼り付けます。次のファイルは「別のファイルを開く」で開きます。
- 動画: MP4(H.264)、WebM、MOV、そのほかこのブラウザで再生できる形式。画像: PNG、JPG、WebP、GIF(アニメーション GIF は最初のコマ)。
- 動画が再生されないときは、このブラウザがその形式かコーデックに対応していません。HEVC(H.265)や一部の MOV はブラウザによって開けません。MP4(H.264)に変換するか、Safari や Chrome など別のブラウザで開いてください。
- iPhone では、最初のコマが出る前に一度タップが必要なことがあります。そのときは「タップして最初のコマを表示」をタップしてください。
シークとコマ送り
- 「再生」「一時停止」、好きな位置へ飛べるシークバー、ちょうど1コマずつ動く「前のコマ」「次のコマ」のボタンがあります。
- フレームレートは再生中に動画から読み取ります。まだ分からないあいだは1/30秒ずつ送ります。
- 時間は mm:ss.mmm(分:秒.ミリ秒)で、コマ番号といっしょに表示されるので、同じコマをまた探せます。
ルーペでピクセルを選ぶ
- パソコンではピクセルをクリックします。ポインターを画像の上に乗せると、先にルーペが表示されます。
- スマホでは指で触れてなぞります。ルーペが指の上に浮かんでピクセルを隠さず、指を離すとその色を選びます。2本指で拡大・移動します。
- 拡大・縮小のボタンで大きく見て、「全体」でコマ全体に戻します。
- キーボード: 矢印キーで1ピクセル、Shift と矢印で10ピクセル動き、Enter で色を保存します。
色の値とコピー
「選んだ色」に HEX・RGB・HSL・OKLCH・CMYK の5つの値が出ます。行をタップするとその値をコピーします。おおよその色名も出ますが、規格の名前ではなく目安です。
保存した色の一覧
- 「色を保存」で、選んだ色が「この端末に保存した色」に入ります。色のチップごとにファイル名と、動画ならコマの時間が残ります。
- 「HEX をすべてコピー」で、保存した HEX の値をまとめてコピーします。
- 1色はチップの × で、全部は「すべて消去」で消します。どちらもしばらく「元に戻す」が出ます。
- 一覧には2,000色まで保存できます。
コマのパレット
「このコマの色」は、いまのコマの代表色をメディアンカットで探します。「色の数」で5〜15色から選び(最初は8色)、色ごとにコマの中で占める割合が出ます。色をタップすると値が出て、「すべてマイカラーに保存」でパレットをまるごと保存します。
書き出し: CSS、Tailwind、JSON、PNG
「書き出し…」で、保存した色を4つの形式のどれかにします:「CSS 変数」「Tailwind 設定」「JSON」「PNG カラーストリップ」。「コピー」でテキストをクリップボードに入れ、「ダウンロード」でファイルとして保存します。
画像ファイル
スクリーンショット、写真、デザインの書き出し画像も同じように開けます: 同じ「動画・画像を選ぶ」、ドロップ、貼り付け。画像にはコマ送りのボタンがないだけで、ルーペ・値・パレット・書き出しは同じです。アニメーション GIF は最初のコマを表示します。
コントラスト(WCAG)
「コントラスト(WCAG)」は、選んだ色と白地・黒地とのコントラスト比と、届いている等級を表示します。通常の文字は AA に 4.5、AAA に 7 が必要で、「AA 大きな文字」(3 以上)は 24px(太字 19px)以上の文字にだけ十分です。
値が違うことがある理由: 色空間と HDR
- 値はこのブラウザが sRGB でデコードした結果です。HDR・広色域(P3)・10ビット・ログ撮影の映像はブラウザがトーンマッピングするため、編集ソフトや元ファイルの値と異なることがあります。
- 非可逆圧縮の動画(ほとんどの MP4 や WebM)は輪郭の近くで色が少しずれます。輪郭から数ピクセル離れた平らな部分で選んでください。
- 色は画面に縮小して表示したプレビューではなく、元の解像度のコマから読み取ります。
- 4096 × 4096 ピクセル(約1,680万ピクセル)を超えるとても大きな画像は、このブラウザが安全に扱える大きさに縮小したコピーから読み取り、画面でそう知らせます。
バックアップファイルと復元
- 保存した色はこの端末のこのブラウザにしかありません。「バックアップファイルを保存」でファイルに保存し、この端末か別の端末で「ファイルから復元…」で戻します。復元ではマイカラーに追加する(同じ色は1回だけ)か、ファイルの内容に置き換えるかを選びます。
- 壊れたファイルやパレットの書き出しファイルでは何も変わりません。変更が10回たまるか、バックアップしていない変更があるまま7日たつと、バックアップを勧める案内が出ます。
プライバシー: 動画は端末の外に出ません
動画や画像はこの端末のファイルとして開き、このブラウザの中だけで読み取ります。アップロードも、ほかの場所へのコピーも、保存もせず、タブを閉じれば消えます。
この端末のこのブラウザに残るのは保存した色だけです: HEX の値、保存した日時、自分で選んだ色かパレットの色か、ファイル名、コマの時間と番号、そしてパレットの色の数、言語、バックアップの案内の日付。アカウントはなく、ページはカメラ・マイク・位置情報をオフにしています。
フレームパッドとの違い
フレームパッドは、ライブのカメラで写真の構図をコーチするツールで、カメラの映像を見ながら水平・構図・光を伝えます。ヒューパッドはカメラを使いません。撮り終えた動画ファイルや画像から、1コマずつ色を読み取ります。
編集ソフトと色の値が違うのはなぜ?
値はこのブラウザが sRGB でデコードした結果なので、HDR・P3・10ビット・ログの映像はトーンマッピングされ、編集ソフトと違うことがあります。非可逆圧縮の動画は輪郭の近くで色がゆれるので、平らな部分で選んでください。
動画はアップロードされますか?
いいえ。動画と画像はこのブラウザの中だけで読み取り、アップロードも保存もしません。残るのは保存した色と、そのファイル名・コマの時間だけです。
別の端末に色を移すには?
「バックアップファイルを保存」でファイルを保存して別の端末に移し(メール、クラウドドライブ、ケーブル)、ヒューパッドで「ファイルから復元…」を使ってください。ブラウザのデータを消すと保存した色も消えるので、ときどきバックアップしてください。