1. 元画像を読み込む
画像を選択、ドロップ、または貼り付けます。大きなファイルはブラウザ内で作業しやすい寸法へ調整されますが、色を読むためのピクセル対応関係は維持されます。
ブラウザ内で完結するプライベート色抽出
画像カラーピッカー：HEX・RGB・HSBを取得
画像をドロップ、選択、または貼り付けて、調べたい場所をクリックしてください。選択したピクセルをHEX・RGB・HSBへ変換し、コピー可能な値と小さな作業用パレットにまとめます。
2026年7月21日更新
画像カラーピッカー
この画像カラーピッカーで何ができますか？
この画像カラーピッカーは、ブラウザのキャンバス上で選択した正確な1ピクセルの赤・緑・青・アルファ情報を読み取ります。同じ見た目のピクセルを6桁HEX、RGB、HSBで表示し、元画像上の座標も確認できます。異なる色を最大5件まで保存し、ラベル付きパレットとしてダウンロードできます。読み込んだ画像や貼り付けた画像は現在のタブ内に残り、Toon Toneのサーバーへ送信されません。
画像から正確な色を取得
画像から正確な色を取得
サンプル画像をそのまま試すか、JPG、PNG、WebP、GIFなどブラウザで読める画像に置き換えてください。キャンバス上をクリックまたはドラッグすると、連続してピクセルを確認できます。
ローカル処理・画像はアップロードされません
ここに画像をドロップまたは端末からファイルを選択
クリップボードの画像を貼り付けることもできます。 · ブラウザで読める画像・最大12MB5色のマイパレット
5色のマイパレット
異なる色を保存し、全データをコピーするか、ラベル付きPNGとして書き出せます。
色を選択してここへ追加してください。最大5色まで保存できます。
画像を読み込みました。任意の場所をクリックして色を取得できます。
ローカル処理・画像はアップロードされません
画像は現在のブラウザタブ内だけに保持されます
ファイルはブラウザの画像APIでデコードされ、ローカルキャンバスからピクセルが読み取られます。この処理には画像アップロード用API、アカウント、クラウドライブラリ、バックグラウンド保存がありません。タブを閉じるか再読み込みすると、作業中の画像とパレットは消去されます。
- サーバーへの画像送信なし
- アカウント登録不要
- パレット画像も端末上で生成
画像から色を選ぶ3つの手順
信頼できる色見本は、対象領域を明確にしてから始め、再利用できるコードを記録して完了します。画像、ピクセル、出力を同じ流れで確認します。
2. 対象の面をクリック
ぼかされた輪郭、ハイライト、影、圧縮ノイズを避け、平らで広い内側を選びます。拡大グリッドで中央のピクセルと周囲を確認してください。
3. 値をコピーまたは保存
1色ならHEX・RGB・HSBを直接コピーできます。複数の意味ある色は5色パレットへ追加し、ラベル付き参照画像としてダウンロードできます。
次の作業に合うカラーフォーマットを選ぶ
3つの形式は同じ画面ピクセルを表しますが、読み取りやすい情報と編集しやすい場面が異なります。
| 形式 | 向いている用途 | 表示される内容 |
|---|---|---|
| HEX | CSSトークン、デザインメモ、共有 | 6桁のWebカラーコード |
| RGB | 各チャンネル確認、ブラウザ描画 | 赤・緑・青を0〜255で表示 |
| HSB | 直感的な色調整、Toon Tone練習 | 色相0〜360°、彩度・明度0〜100% |
画像カラーピッカーが役立つ場面
元画像、抽出対象、最終用途を明確にすると、取得した色を判断しやすくなります。
アニメやイラストの色研究
衣装、毛、道具、背景などの平らな部分を取り、関連する色を並べて色相・彩度・明度の違いを確認します。スクリーンショットの値は学習用の参照であり、作品やブランドの公式指定色ではありません。
UIとデザインの引き継ぎ
モックアップや画面キャプチャからピクセルを読み、HEXをコピーして元ファイルと一緒に記録します。ブランドや制作物で厳密な再現が必要な場合は、承認済みのデザイントークンを優先してください。
色記憶のトレーニング
1色を選んだ後に画像と数値を隠し、HSBピッカーやToon Toneで記憶した印象を再現します。回答を決めてから保存した見本と比較すると、思い込みによる修正を減らせます。
正確な1ピクセルが代表色とは限りません
画像はピクセルの格子なので、ツールは1つの座標に保存された赤・緑・青を正確に報告できます。しかし、その精度だけでは物体を最もよく表す場所を決められません。キャラクターの服には、基本色、明るいハイライト、暗い影、輪郭線、ぼかされた端の色が同時に含まれます。どれも実在するピクセルですが、調べたい質問に合うのは一部だけです。最初に対象の部位を言葉で決め、広く安定した内側から色を取ってください。
表面に質感、光、グラデーション、圧縮がある場合は、1回だけで決めず、数か所を比較します。無作為に大量の点を集めるより、基本色、光、影、アクセント、背景という目的を持った少数の見本が役立ちます。5色パレットはこの短い比較に向いています。最頻色や平均色が必要な場合は別の計算です。その結果は正確なピクセルではなく、抽出パレットや平均パレットとして区別してください。
取得した色を次の作業へつなげる
画像カラーピッカーのよくある質問
Toon Toneへ画像がアップロードされますか？
いいえ。選択または貼り付けた画像は現在のブラウザタブ内でデコードされます。このページには画像アップロードAPI、アカウントライブラリ、クラウド保存処理がありません。
どの画像形式を使えますか？
現在のブラウザがデコードできる形式を利用できます。一般的にはJPG、PNG、WebP、GIFなどです。ローカル処理を安定させるため、1ファイルの上限は12MBです。
近い場所を選ぶと色が変わるのはなぜですか？
隣接ピクセルには輪郭のぼかし、影、ハイライト、質感、透明度、圧縮ノイズが含まれる場合があります。基本色を取るときは拡大鏡で安定した内側を選んでください。
HEXとRGBは正確ですか？
選択したデコード済みキャンバスピクセルに対しては正確です。ただしスクリーンショットと元デザイン、別プロファイル、校正済み画面、印刷物、製品の一致を証明する値ではありません。
1枚の画像からパレットを作れますか？
はい。異なる色を最大5件保存し、HEX・RGB・HSBをまとめてコピーするか、ラベル付きPNGパレットとしてダウンロードできます。
HSBとHSLは同じですか？
同じではありません。HSBは一般にHSVと同じモデルですが、HSLの明度軸は別の計算です。ツール間で移す際はHEXまたはRGBも一緒に記録してください。