How do I pick a color from an image?

Upload an image using the button above, drag and drop a file, or paste a screenshot with Ctrl+V. Once loaded, move your cursor over the image and click on any pixel to lock its color. The magnifier loupe shows a zoomed-in view so you can pick colors with precision.

Can I pick a color from a screenshot?

Yes. Take a screenshot and press Ctrl+V (or Cmd+V on macOS) anywhere on the page. The image color picker automatically pastes it onto the canvas so you can immediately start sampling colors from it.

Does the image get uploaded to a server?

No. All image processing happens entirely in your browser using the HTML5 Canvas API. Your images and color data never leave your device, and nothing is stored on any server.

What color formats does the tool provide?

The tool provides HEX, RGB, HSL, HSV, OKLCH, and CMYK color values for every sampled pixel. You can copy any format with one click or export all values at once.

What is the difference between HEX, RGB and HSL?

HEX is a six-character code used in HTML and CSS to represent colors. RGB defines a color by its red, green, and blue channel values. HSL stands for Hue, Saturation, and Lightness, making it easier to adjust a color's warmth or brightness intuitively.

Can I pick colors from a high-resolution image?

Yes. The image color picker supports images of any resolution. You can zoom in up to 3200% to see individual pixels clearly, making it easy to pick exact colors even from very large or detailed images.

Why can neighboring pixels have different colors?

Digital images often have slight color variations between neighboring pixels due to JPEG compression, anti-aliasing at edges, or camera sensor noise. This is normal. The tool offers 3x3, 5x5, and 11x11 area sampling to average out these variations when needed.

What is color sampling?

Color sampling is the process of reading the color value of one or more pixels from an image. Point sampling reads a single pixel, while area sampling averages a grid of pixels (such as 3x3 or 5x5) to give a more representative color, which is useful for photographs and textured surfaces.

Can I extract a color palette from an image?

Yes. The palette extractor analyzes your image and returns its dominant colors in modes like Dominant, Vibrant, Muted, and Balanced. You can export the palette as CSS variables, JSON, SVG, or a downloadable PNG card.

Can I use the tool on mobile?

Yes. The image color picker works on modern mobile browsers. You can upload photos from your gallery or paste screenshots directly on your phone or tablet.

Does the tool work with PNG, JPG and WebP images?

Yes. The tool supports PNG, JPG, JPEG, WebP, GIF, and SVG image formats. You can also load images directly from a public URL.

How accurate is the color picker?

The color picker reads the exact sRGB pixel values stored in the image file, so the colors are as accurate as the source data. Any perceived difference between screens is usually caused by display calibration, color profile settings, or brightness differences between devices.

画像カラーピッカー – あらゆる画像から色を選ぶ

Image Color Picker – Upload & Pick Colors

画像をアップロードし、任意のピクセルにズームすると、HEX、RGB、HSLなどが即座に取得できます。すべてがブラウザ内でローカルに処理されます。

drag & drop•Ctrl + V 貼り付ける•

またはサンプル画像で即座にテスト：

🔒 すべてがブラウザ内でローカルに処理されます。サーバーへの保存はゼロ。

#171717

最も近いCSSカラー: Black

HEX#171717

RGBrgb(23, 23, 23)

HSLhsl(0, 0%, 9%)

カラープロパティ:Hue: 0° (Red)Saturation: 0%Lightness: 9%Neutral

WCAGコントラストチェッカーWCAG 2.1

選択した背景色に対する白と黒のアクセシビリティコントラスト比を計算します。

Best: White (18.2 : 1)

白テキスト (#FFFFFF)18.20 : 1

見出しの大きなプレビュー (18pt / 24px)

標準の14px本文テキストプレビュー。コントラスト比は、低視力ユーザーの可読性を決定します。

AA Normal

AA Large

AAA Normal

AAA Large

黒テキスト (#000000)1.15 : 1

見出しの大きなプレビュー (18pt / 24px)

標準の14px本文テキストプレビュー。コントラスト比は、低視力ユーザーの可読性を決定します。

AA Normal

AA Large

AAA Normal

AAA Large

カラーハーモニー

アクティブカラーから数学的に導き出されたハーモニックパレット。スウォッチをクリックして選択します。

抽出された画像パレット

クライアントサイドカラーキャンセリングを使用して、アップロードされた画像から本物のカラーパレットを導出します。

カラー:

エクスポートオプション:

最近のカラー履歴0

ブラウザストレージにローカル保存。サーバーに送信されることはありません。

まだカラーが選択されていません。画像のどこかをクリックして、ここにカラーを記録します。

ユーザーガイドとリファレンス

画像カラーピッキングについて知っておくべきすべて

カラースペース、高精度サンプリング、コントラストアクセシビリティ、クライアントサイド処理に関する包括的なガイド。

1あらゆる画像から色を選ぶ方法

1. 画像を読み込むDrag and drop any PNG, JPG, WebP, GIF, or SVG file, paste directly from clipboard (<kbd class="px-1 py-0.5 rounded bg-white dark:bg-[#2a2a2a] border border-[#d1d5db] dark:border-[#2e2e2e]">Ctrl+V</kbd>), or enter a public image URL.

2. ズームしてサンプリングUse mouse wheel or toolbar buttons to zoom in up to 3200%. The magnifier loupe displays a 9×9 real-time pixel grid. Hover over any target pixel and click to lock.

3. コピーしてエクスポートInstantly copy color codes in HEX, RGB, HSL, HSV, OKLCH, or CMYK. Extract authentic palettes and export to CSS, JSON, SVG, or high-res PNG cards.

2画像カラーサンプリングを理解する (1×1 vs 3×3 vs 5×5)

デジタル画像では、単一のピクセルは往往、ロスJPEG圧縮、ベクトルエッジ周囲のアンチエイリアシング、またはカメラセンサーの自然なノイズにより、わずかに変化します。サンプリングモードにより、ピクセルカラーの測定方法を完全に制御できます：

1×1 単一ピクセル (ポイントサンプリング)

カーソル下の単一ピクセルの正確なRGBカラーを読み取ります。フラットUIモック、ベクトルアート、ドット絵、デジタルロゴなど、エッジが鋭く、カラーリージョンが均一な場合に最適です。

3×3 および 5×5 エリア平均

カーソルを中心とした正方マトリクス（9または25ピクセル）をサンプリングし、代表色を計算します。平均はカラーチャネル全体の算術平均を計算し、メディアンは外れ値ノイズやグレーンをフィルタリングします。写真やテクスチャ素材に最適です。

3カラースペースとモデルの比較

フォーマット	例	主な使用例
HEX	#0070F3	ユニバーサルWebデザイン、HTML、CSSスタイルシート、UIトークン。
RGB	rgb(0, 112, 243)	画面ディスプレイハードウェア、Canvas API、CSS rgba()不透明度操作。
HSL	hsl(212, 100%, 48%)	直感的な調整：色相を変更せずに明度や彩度を簡単に調整。
HSV / HSB	hsv(212, 100%, 95%)	Figma、Sketch、Adobe Photoshopのカラーピッカー。
OKLCH	oklch(0.58 0.22 254.2)	明度とクロマにわたる知覚的一様性を持つモダンなCSS Color 4標準。
CMYK	cmyk(100%, 54%, 0%, 5%)	商業オフセットおよびデジタル物理印刷製作。

🔒プライバシーポリシー – 画像カラーピッカー

多くのオンラインカラーピッカーがリモートクラウドサーバーに個人画像をアップロードするのとは異なり、Image Color PickerはネイティブHTML5 Canvas APIとJavaScript TypedArraysを使用して、ブラウザ内で直接データの100%を処理します。

画像はローカルコンピュータやスマートフォンから離れることがありません。
ユーザーアカウント、トラッキングトークン、サーバーサイドデータベースはありません。
ページがブラウザに読み込まれると完全にオフラインで動作します。

あらゆる画像から、あらゆる色を。