無料画像カラー
画像内の画素の正確な HEX・RGB を取得し、8 色パレットを抽出し、HEX を RGB に変換します。コピーボタン付き。
画像はブラウザー内で分析されます。
またはこのページのどこにでも画像を1つドロップ
カラーピッカーとパレット抽出
知っておきたいこと
カラーツールは 3 つの用途をカバーします。読み込んだ画像の一点をクリックすると、その画素 1 つを読み取り、大文字の HEX コードと rgb(r, g, b) で表示し、それぞれにコピーボタンが付きます。パレット抽出は代表的な色を最大 8 個並べ、HEX から RGB への変換は画像なしで入力したコードだけで動作します。
変換は #6D28D9 から始まり、これは rgb(109, 40, 217) と読めます。# の有無にかかわらず 6 桁のコードを受け付け、3 桁の省略形も各桁を 2 回ずつ重ねて展開します。#6D3 は #66DD33 になります。入力欄の横にはネイティブのカラーピッカーがあり、不正な文字列は推測せずに警告します。
スクリーンショット、写真、ロゴファイルから目分量ではなく実際の値が必要なときは、画像ピッカーを使います。テーマ用に主要な色をさっと揃えたいときはパレットを、デザインファイルから HEX コードを渡され、スタイルシートやグラフツールが RGB を求めているときは変換を使います。
入力は PNG、JPG、WebP、GIF、SVG、AVIF、BMP を一度に 1 枚ずつ使え、解析はブラウザー内で行われます。JPG の圧縮はノイズを加えるため、同じ平坦な領域内の隣り合う 2 つの画素でも数段階の差が出ることがあります。
作業別ツール 13
関連ツール 13
無料画像カラーの使い方
- ピッカーを開き、画像を読み込むかドロップします。
- 色が必要な箇所をクリックして、HEX と rgb の値を読み取ります。
- コピーボタンを押して、値をクリップボードに入れます。
- HEX から RGB への変換に切り替え、6D3 と入力して #66DD33 に展開されるのを確認します。
よくある質問
ピッカーとパレットの違いは何ですか。
ピッカーはクリックした画素そのものを読み取ります。パレットは画像全体を、最大 8 個のまとめた色に要約します。
HEX の変換は 3 桁のコードにも対応していますか。
はい。各桁を 2 回ずつ重ねるので、#6D3 は #66DD33、つまり rgb(102, 221, 51) になります。
アニメーション GIF は全フレームの色を取得できますか。
いいえ。ブラウザーがデコードした画像、つまり 1 フレームだけがサンプリングされます。
同じ壁を 2 回クリックして値が違うのはなぜですか。
特に JPG では、圧縮やセンサーのノイズで隣り合う画素がわずかに異なるためです。数か所をクリックして、代表的な値を選んでください。