このツールが提供するもの：HEXカラーコードの抽出
このページは、画像から任意のピクセルの色をHEXカラーコード（6桁の16進数表記）として抽出することに特化している。HEXはCSSでcolorやbackground-colorに直接記述できる形式であり、設計図やブランドガイドラインで多用される。通常のRGB関数表記やHSL表記を扱う姉妹ページと異なり、このページはHEXを第一の出力とする。透明度（アルファチャンネル）はHEXでは表現できないため、別途「Alpha ‹n›% – このピクセルは部分的に透明です」という形で報告される。これにより、CSSのrgba()やhsla()を使用する必要があるかどうかを判断できる。
画像を読み込むと、中央ピクセルの座標と色情報が即座に表示される。その後、マウスを画像上で動かすとピクセル単位でサンプリングが行われ、拡大ビューが正確なピクセル選択を助ける。クリックで色を保存し、履歴に最大12件まで保持できる。保存された色は、同じRGB値でも透明度が異なれば別エントリとして記録される。
サンプリングの仕組み：ピクセルの読み取りと表示
画像はPNG、JPG、WebP、GIF、AVIF、HEIC形式に対応する。対応MIMEタイプはimage/jpeg、image/png、image/webp、image/gif、image/avif、image/heic、image/heifである。長辺が4096ピクセルを超える画像は、ブラウザ側で縮小される。これは、Canvas APIの最大サイズ制限とメモリ使用量を考慮した実装上の制約である。
サンプリングは**Canvas APIのgetImageData()**を用いて行われる。このメソッドはピクセル単位のRGBA値を返し、それをHEX、RGB、HSLに変換する。拡大ビューはCanvas上の矩形領域を拡大表示するもので、隣接ピクセルの色の確認に有効である。キーボード操作も可能で、矢印キーで十字線を1ピクセル単位で移動させ、Shiftキーを押しながらで10ピクセル単位にできる。EnterキーまたはSpaceキーで現在サンプリング中の色を保存する。
初期状態では、画像の中心ピクセルがサンプリングされる。これは、画像全体の平均的な色をすぐに確認したい場面を想定している。ただし、JPEGやスクリーンショットの場合は、圧縮やアンチエイリアシングにより、本来のピクセル値が変化している可能性があることに留意する必要がある。
HEX、RGB、HSL：色表現の違いと使い分け
このツールは3つの主要な色モデルを同時に表示する。それぞれが同じ色を異なる観点で表現する。
| モデル | 表記例 | 用途 |
|---|---|---|
| HEX | #1E90FF |
CSS、デザインツール（Figma、Photoshop） |
| RGB | rgb(30, 144, 255) |
CSS、画像処理ライブラリ |
| HSL | hsl(210, 100%, 56%) |
色相ベースの調整、アクセシビリティチェック |
HEXがウェブで標準とされる理由は、そのコンパクトさと直接性にある。CSSプロパティに余分な括弧やセミコロンなしで記述できる。6桁のHEXは各チャンネル（R、G、B）を2桁の16進数（00〜FF）で表し、#RRGGBB形式となる。例えば#1E90FFはR=0x1E（30）、G=0x90（144）、B=0xFF（255）である。
RGBとHSLは人間が直感的に調整しやすい反面、CSSではrgb(30, 144, 255)のように関数形式を必要とする。このツールでは、表示された任意の色値（HEX、RGB、HSL）をクリックするとクリップボードにコピーされる。ブラウザがClipboard APIをブロックした場合は「ブラウザがクリップボードへのアクセスをブロックしました」と表示される。
透明度（アルファチャンネル）の扱い
6桁のHEXにはアルファ値が含まれない。PNGやWebPでよく見られる半透明ピクセルをサンプリングした場合、ツールはピクセル本来のRGBA値を読み取り、透明度を別途「Alpha 30% – このピクセルは部分的に透明です」のように表示する。この透明度はピクセル単体の値であり、背景との合成は考慮されない。したがって、半透明領域からトゥルーカラーを得たい場合は、より不透明な部分をサンプリングするか、画像編集ソフトで背景を統合する必要がある。
CSSで透明度を含めたい場合はrgba()またはhsla()を使用する。例えば、アルファ50%の場合はrgba(30, 144, 255, 0.5)となる。このツールはHEXを主出力とするため、透明度は補助情報として提示される。
エッジケースと制限事項
ファクトシートに基づき、以下のエッジケースに注意する。
- 非対応ファイル：対応外の形式をドロップすると「そのファイル形式はサポートされていません。PNG、JPG、WebP、GIF、AVIF、HEIC画像をお試しください。」と表示される。
- 破損画像：画像が開けない場合は「その画像は開けませんでした。破損しているか、サポートされていない形式の可能性があります。」と表示される。
- サイズ制限：長辺4096ピクセルを超える画像は縮小される。これにより、ピクセル値が平均化される可能性がある（特に縮小時の補間方式に依存）。
- 履歴の上限：保存できる色は12件まで。それを超えると最も古いエントリが削除される。同じRGB値でも透明度が異なれば別エントリとして扱われる。
- JPEGの圧縮アーティファクト：JPEGは非可逆圧縮のため、一見フラットに見える領域でもピクセル値が揺らぐ。サンプリングポイントは慎重に選ぶべき。
- 半透明ピクセルの独立性：半透明ピクセルは背景の影響を受けずにそのまま読み取られる。これは「ピクセルが持つその値」であり、視覚上の見た目とは異なる場合がある。
デザインワークフローへの統合
このツールで得たHEXコードは、CSSのcolor: #1E90FFやbackground-color: #1E90FFとして直接使用できる。また、Figmaでは塗りつぶしのカラーピッカーにHEXを入力すれば即座に適用される。デザインファイル内でブランドカラーを確認する際、画像やスクリーンショットから正確なHEXを抽出できるため、カラーパレットの一致を保証できる。
特にグラデーションやシャドウのサンプリングでは、拡大ビューを使って隣接ピクセルとの差異を確認することが推奨される。また、キーボードによる1ピクセル単位の移動は、マウスでは捉えにくい細かい領域での高精度サンプリングに有効である。Shiftキーによる10ピクセル移動は、大まかな位置調整に役立つ。
「Start over（最初からやり直す）」ボタンは画像をクリアし、履歴をすべて消去して初期状態に戻す。これにより、新しい画像から一から始められる。
よくある質問（FAQ）
Q: HEXコードが6桁ではなく3桁（例：#FFF）で表示されることはありますか？ A: このツールは常に6桁のHEXを出力します。3桁の省略形は短縮された色にしか使えず、正確性に欠けるためです。
Q: 透明度があるピクセルのHEXコードは得られないのですか？
A: 得られません。6桁のHEXは透明度を含みません。透明度は別途パーセンテージで表示されます。透明度を含む色が必要な場合は、そのパーセンテージを元にrgba()やhsla()を使用してください。
Q: 保存できる色の数に制限はありますか？ A: 最大12件です。13件目を保存すると最も古いエントリが削除されます。同じRGB値でも透明度が異なれば別のエントリとして保存されます。
Q: キーボードで色をサンプリングするにはどうすればいいですか？ A: 矢印キーで十字線を1ピクセルずつ移動できます。Shiftキーを押しながら矢印キーを押すと10ピクセルずつ移動します。EnterキーまたはSpaceキーで現在の色を保存します。
Q: どの画像形式が使えますか？ A: PNG、JPG、WebP、GIF、AVIF、HEICに対応しています。それ以外の形式（BMP、TIFFなど）はサポートされていません。
Q: 画像のピクセル値が圧縮で変わっていることはありますか？ A: あります。特にJPEGやスクリーンショットでは、圧縮やアンチエイリアシングにより本来のピクセル値が変化している可能性があります。このツールは画像に記録されたピクセル値をそのまま読み取ります。