画像から色とカラーコードを取得

画像を開き、拡大表示される十字線で必要なピクセルを正確に選びます。HEX、RGB、HSLの値をコピーし、画像内の必要な色を保存できます。

または画像を1枚ここにドロップ

JPG、PNG、WebP · 最大50 MB

画像はブラウザ内でローカル解析されます

画像から正確な色を取得

ピクセル単位で色を抽出

画像全体から色を推測するのではなく、拡大表示される十字線で特定の1ピクセルを正確に選べます。

HEX、RGB、HSLとカラーパレット

選択した色を一般的なWeb・デザイン形式でコピーし、複数の色を保存して、画像の代表色も確認できます。

端末内で色を解析

ピクセルの取得とパレットの抽出は端末上で行われ、画像をImageNowのサーバーへアップロードする必要はありません。

仕組み

  1. 対応画像を1枚選択するか、ドロップします。
  2. 画像上を移動し、拡大表示される十字線で正確なピクセルを選びます。
  3. HEX、RGB、HSLの値をコピーし、残しておきたい色を保存します。
  4. 取得した色を抽出済みのカラーパレットと比べるか、別の画像を開きます。

画像からカラーコードを取得する方法

画像を選び、必要な部分へポインターを移動し、拡大表示で隣り合うピクセルを見分けます。ピクセルを選択すると現在の色が更新されるので、デザインツール、スタイルシート、文書、プレゼンテーションで必要な形式をコピーしてください。

HEX、RGB、HSLは同じ色を異なる形式で表現

HEXはCSSやデザインの受け渡しでよく使われる簡潔な16進数表記です。RGBは赤、緑、青の各チャンネル値を示します。HSLは色相、彩度、明度で表し、規則的な調整がしやすい場合があります。形式を変換しても、選択した色自体は変わりません。

隣り合うピクセルの値が異なる理由

写真には質感、光、影、圧縮ノイズ、アンチエイリアス処理された輪郭があるため、同じ領域に見えても近くのピクセル同士で値が異なる場合があります。周囲の数か所を選び、必要な値を保存してください。代表的なパレットは画像全体の主要な色を把握する助けになりますが、正確なピクセル選択の代わりにはなりません。

取得した色は適切なコントラストで使用

写真の中では映える色でも、文字にすると読みにくいことがあります。Webサイトや文書で使う場合は、必要な文字サイズで前景色と背景色の組み合わせを検証し、プロジェクトに該当するアクセシビリティ基準に従ってください。

よくある質問

画像から色を選ぶには？

画像を選び、必要な部分へ移動して、拡大表示される十字線で1ピクセルを特定し、選択します。その色のHEX、RGB、HSLの値をコピーできます。

写真からHEXコードを取得できますか？

はい。不透明なピクセルは6桁のHEXで表示され、透明度のあるピクセルはアルファ値を含む8桁のHEXで表示されます。RGBとHSLでもアルファ値が保持されます。必要な値の横にあるコピーボタンを使用してください。

HEX、RGB、HSLの違いは何ですか？

同じ色を表す異なる方法です。HEXとRGBは赤、緑、青のチャンネルを値で表し、HSLは色相、彩度、明度で表します。

取得した色を複数保存できますか？

はい。画像を確認しながら必要な色を保存すると、同じピクセルを何度も探さずに比較したりコピーしたりできます。保存した色はCSSまたはTXTファイルとしてダウンロードできます。

画像からカラーパレットを抽出できますか？

はい。画像から計算した8色の代表色が表示されます。色を選んで値を確認することも、正確な位置の色が必要なときにピクセル単位で取得することもできます。

取得した色が予想と少し違うのはなぜですか？

光、グラデーション、画像圧縮、ディスプレイのカラーマネジメント、アンチエイリアス処理された輪郭によって、近くのピクセルでも値が変わることがあります。拡大鏡を使い、周囲の色をいくつか比較してください。

2色のコントラストがアクセシビリティ基準を満たすか確認できますか？

いいえ。このページは画像の色を取得して形式を変換するツールです。実際に使う前景色と背景色の組み合わせを、アクセシビリティ対応のコントラストチェッカーで検証してください。

画像はアップロードされますか？

いいえ。画像のデコード、ピクセルの取得、解析はブラウザ内で行われ、ImageNowのサーバーにはアップロードされません。