無料ツール
画像カラーピッカー — 写真からHEXとRGBを取得
任意のピクセルの色を正確に取得し、画像からパレットを抽出。
任意の場所をクリックして色を取得
このツールでできること
画像から色を拾えるカラーピッカーをお探しですか?写真をアップロードして任意のピクセルをクリックすると、その色のHEXコードとRGB値を即座に取得。無料で、処理はすべてブラウザー内——アップロードは一切不要。画像の「見たままの色」を最速で正確に拾えます。
単一ピクセルではなく、画像全体のカラー傾向を知りたい場合も対応。写真から支配的な色を自動抽出してパレット化し、主要色をひと目で把握できます。Webをロゴに合わせたい、好きな写真からパレットを組みたい、ブランドキットやプレゼン、ムードボードに使いたい——そんな場面に最適です。
色コードはワンクリックでクリップボードへ。画像上をクリックしてサンプリング、またはパレットのスウォッチをクリックすれば、HEXまたはRGBをコピーして、そのままデザインアプリやCSS、ドキュメント、チャットに貼り付けられます。長い色コードを手入力する必要はなく、転記ミスの心配もありません。
すべてが100%ブラウザー内で動くため、画像はデバイスから出ず、サーバーにアップロードされることもありません。非公開の写真、クライアントワーク、未公開デザインからでも安心して色を取得可能。ファイルは終始お客さまのコンピューター内に留まります。デザイナー、開発者、マーケター、あるいは写真の中の特定の色合いが好きな方にも、摩擦なく正確な値を提供します。
カラーピッカーの有用性は、得た値をどう使うかで決まります。よくある作業には別々の要件があります。ブランドカラーの厳密一致では、グラデーションやJPGの圧縮ノイズではなく、フラットな面から平均なしのピクセル値そのものが必要です。パレット作成は逆で、画像全体の支配色が欲しいため、抽出パレットは類似トーンをまとめ、ファイル内の全ユニーク値を羅列しません。
写真から色を読む際の実務的な注意点をひとつ。画面で見える色は、カメラのホワイトバランス、ファイルのカラープロファイル、ディスプレイのキャリブレーションを経た結果です。デザイン用途では通常問題ありませんが、印刷・塗料・布地など物理再現が必須の場合は、HEX値を仕様の確定値ではなく「近い出発点」と見なし、必ず実物サンプルで確認してください。
使い方
画像から色を取得する方法
- 01
画像をアップロード
写真を選択またはドラッグして読み込みます。サーバーには一切アップロードされず、ブラウザー内で開きます。
- 02
ピクセルをクリックして色をサンプリング
画像上の任意の場所をクリックすると、そのピクセルのHEXコードとRGB値を取得できます。
- 03
支配色パレットを確認
自動抽出されたパレットで、写真内の主要な色を俯瞰します。
- 04
色コードをコピー
HEXまたはRGBの値をクリックして、クリップボードにコピーします。
- 05
プロジェクトで使う
取得した色をデザインツール、CSS、ドキュメントに貼り付けます。
AIフォトクリエイター向け
色は画像全体のムードを決めます。リファレンス写真から理想の色を拾うのも良い方法ですが、その色の世界観に沿って新しい画像を一から作る手もあります。
LaFotoは、短い説明からビジュアルアイデアを形にするAI写真ジェネレーターです。オリジナル写真の生成は、ローンチ時に無料で始められます。
よくある質問
- この画像カラーピッカーは無料ですか?
- はい。色のサンプリングとパレット抽出は完全無料で、ブラウザー内で動作します。
- HEXとRGBの値は取得できますか?
- はい。ピクセルをクリックすると、その正確な色についてHEXコードとRGB値の両方が表示され、どちらもワンクリックでコピーできます。
- 支配色パレットとは何ですか?
- 写真から自動で主要色を抽出したセットです。各ピクセルを個別にクリックしなくても、画像の配色傾向を素早く把握できます。
- 色コードはすぐコピーできますか?
- はい。すべての色コードは1クリックでクリップボードにコピーでき、すぐに貼り付けられます。
- 画像はどこかにアップロードされますか?
- いいえ。カラーピッカーは100%ブラウザー内で動作するため、写真はデバイスから外に出ず、アップロードされません。
- どの画像形式に対応していますか?
- PNGやJPGなど一般的な写真形式を読み込み、画像内の任意のピクセルから色を取得できます。
無料ツールをもっと見る
カラーピッカーの概要
- 動作環境
- お使いのブラウザ内 — 何もアップロードされません
- アカウント
- 不要
- 料金
- 無料、透かしなし
- オフライン対応
- ページ読み込み後に動作
- 対応形式
- JPEG, PNG, WebP
- ファイル上限
- 端末のメモリが上限(クォータなし)
写真から色を読む
写真から取ったHEX値が意味するもの
サンプルした値は、カメラのホワイトバランス、ファイルのカラープロファイル、そしてお使いのディスプレイのキャリブレーションと、いくつもの変換を経ています。画面に表示されている色を正確に読みますが、実物そのものとはわずかに異なります。
画面向けの制作では、その違いが問題になることは稀です — 同じファイルは訪問者にも同じように見えます。印刷・塗料・布地など実体に再現する場合は、取得値を“近い出発点”と捉え、実物サンプルで必ず確認してください。

3つの色仕事
何のためにサンプリングしますか?
1つの値を正確に取る
できるだけ広いフラット面からサンプルしてください。エッジにはアンチエイリアスがかかり2色が混ざりますし、JPEGは色を低解像度で保持するため、どちらも“近いが違う”値になります。
出典がウェブサイト上のロゴなら、正解はスクリーンショットではなく、そのサイトのCSSやブランドガイドです。
- エッジではなくフラットな内部から採る。
- JPEGのクロマサブサンプリングは境界付近の色をずらす。
- サンプル値より、公開されているブランド値を優先。

画像から配色を導く
良いと感じた写真には、すでに一貫したパレットがあります。同じ光で写っているからです。支配色の抽出は、配色理論を当てずに“うまくいく”スキームを素早く得る方法です。
役割は5色均等より“3役”が有用です。面積を覆うドミナント、構造のためのセカンダリ、そしてごく少量使うアクセント。
- 役割を割り当てる — ドミナント、セカンダリ、アクセント。
- アクセントは“希少”だから効きます。明るいからではありません。
- 文字に使う前にペアのコントラストを検証。

文字の可読性を確保する
文字色と背景の両方をサンプリングすれば、コントラスト比の2値が得られます。WCAGは本文で少なくとも4.5:1、大きな文字で3:1を求めます。
明るい部屋のキャリブレーション済みモニターでは十分でも、屋外のスマホでは破綻することがあります。実際に読まれる環境を前提に。
- 本文は4.5:1、大きな文字は3:1。
- “意図した背景”ではなく“実際の背景”をサンプル。
- 平均ではなく、最悪ケースで確認。

色に関する質問
このカラーピッカーが対処できること
実務でのケースと、サンプル色の限界。
デザインツールで色が違って見える
ほぼ間違いなくカラープロファイルの違いです。同じRGB数値でも、sRGBとDisplay P3では表示が変わり、スクリーンショットはしばしばプロファイル自体を失います。
ウェブサイトのスクショからサンプル
可能ですが、スクリーンショットが再圧縮されている場合があります。ブランドカラーなら、サイトのCSSから値を取得してください。
印刷用の色を取りたい
画面は加法混色、印刷は減法混色。画面上の一部の色はそもそも印刷できません。取得値は印刷所へのブリーフであって、最終仕様ではありません。
暗い写真からパレットを抽出
ローキー写真では“技術的に支配的だが使えない”ほぼ黒のスウォッチが複数返りがちです。意図的に明部から採取してください。
2枚の写真で色を一致させたい
異なる光で撮影されていれば、単一の値で両方を合わせられません。まずホワイトバランスを整えます。これはAI 写真補正で行えます。

色から画像へ
パレットを活かす
promptで色名を指定するのが最も確実なコントロールです。
今日から作り始める
最高のAI画像ジェネレーターで最初の一枚を。
一文から数秒でフォトリアルな画像を生成し、細部まで洗練。セットアップ不要、Discord不要、GPU不要。
4,200+名のクリエイターがLaFotoを利用中