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.

Bildfarbwähler – Farben aus Bildern Auswählen

Image Color Picker – Upload & Pick Colors

Laden Sie ein Bild hoch, zoomen Sie auf jedes Pixel und erhalten Sie sofort HEX, RGB, HSL und mehr. Alles wird lokal in Ihrem Browser verarbeitet.

drag & drop•Ctrl + V zum Einfügen•

Oder testen Sie sofort mit Beispielbildern:

🔒 Alles wird lokal in Ihrem Browser verarbeitet. Keine Server-Speicherung.

#171717

Nächste CSS-Farbe: Black

HEX#171717

RGBrgb(23, 23, 23)

HSLhsl(0, 0%, 9%)

Farbeigenschaften:Hue: 0° (Red)Saturation: 0%Lightness: 9%Neutral

WCAG-KontrastprüferWCAG 2.1

Berechnet Barrierefreiheits-Kontrastverhältnisse für die ausgewählte Hintergrundfarbe gegen Weiß und Schwarz.

Best: White (18.2 : 1)

Weißer Text (#FFFFFF)18.20 : 1

Vorschau der großen Überschrift (18pt / 24px)

Standard-14px-Körpertext-Vorschau. Das Kontrastverhältnis bestimmt die Lesbarkeit für Benutzer mit eingeschränktem Sehvermögen.

AA Normal

AA Large

AAA Normal

AAA Large

Schwarzer Text (#000000)1.15 : 1

Vorschau der großen Überschrift (18pt / 24px)

Standard-14px-Körpertext-Vorschau. Das Kontrastverhältnis bestimmt die Lesbarkeit für Benutzer mit eingeschränktem Sehvermögen.

AA Normal

AA Large

AAA Normal

AAA Large

Farbharmonien

Harmonische Paletten mathematisch abgeleitet von der aktiven Farbe. Klicken Sie auf jede Farbprobe, um sie auszuwählen.

Extrahierte Bildpalette

Leitet eine authentische Farbpalette aus Ihrem hochgeladenen Bild mithilfe von clientseitiger Farbquantisierung ab.

Farben:

Exportoptionen:

Letzte Farbverlauf0

Lokal im Browser-Speicher gespeichert. Wird niemals an einen Server gesendet.

Noch keine Farben ausgewählt. Klicken Sie irgendwo auf das Bild, um Farben hier zu erfassen.

Benutzerhandbuch & Referenz

Alles Was Sie Über Bildfarbwählen Wissen Müssen

Ein umfassender Leitfaden zu Farbräumen, präziser Abtastung, Barrierefreiheits-Kontrast und clientseitiger Verarbeitung.

1Wie Man Eine Farbe aus Jedem Bild Wählt

1. Laden Sie Ihr BildDrag 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. Zoomen und AbtastenUse 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. Kopieren und ExportierenInstantly 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.

2Bildfarb-Abtastung Verstehen (1×1 vs 3×3 vs 5×5)

In digitalen Bildern variieren einzelne Pixel oft leicht aufgrund von verlustbehafteter JPEG-Komprimierung, Kantenglättung um Vektorränder oder natürlichem Kamerasensor-Rauschen. Abtastmodi geben Ihnen vollständige Kontrolle darüber, wie Pixel-Farben gemessen werden:

1×1 Einzelpixel (Punkt-Abtastung)

Liest die genaue RGB-Farbe des einzelnen Pixels unter dem Cursor. Ideal für flache UI-Mockups, Vektorgrafiken, Pixel-Art und digitale Logos, wo die Ränder scharf und die Farbbereiche einheitlich sind.

3×3 & 5×5 Bereichsdurchschnitte

Verarbeitet eine quadratische Matrix (9 oder 25 Pixel), die auf Ihrem Cursor zentriert ist, und berechnet die repräsentative Farbe. Durchschnitt berechnet den arithmetischen Mittelwert über die Farbkanäle, während Median Ausreißer-Rauschen und Körnung filtert. Ideal für Fotografien und texturierte Materialien.

3Farbräume und Modelle Verglichen

Format	Beispiel	Hauptanwendungsfall
HEX	#0070F3	Universelles Webdesign, HTML, CSS-Stylesheets, UI-Tokens.
RGB	rgb(0, 112, 243)	Bildschirm-Hardware, Canvas-APIs, CSS rgba() Opazitätsmanipulation.
HSL	hsl(212, 100%, 48%)	Menschlich-intuitive Anpassungen: Leichtes Anpassen von Helligkeit oder Sättigung ohne Farbtonänderung.
HSV / HSB	hsv(212, 100%, 95%)	Figma, Sketch, Adobe Photoshop Farbwähler.
OKLCH	oklch(0.58 0.22 254.2)	Moderner CSS Color 4 Standard mit perceptueller Gleichmäßigkeit über Helligkeit und Chroma.
CMYK	cmyk(100%, 54%, 0%, 5%)	Kommerzielle Offset- und digitale physische Druckproduktion.

🔒Datenschutzrichtlinie – Bildfarbwähler

Im Gegensatz zu vielen Online-Farbwählern, die Ihre persönlichen Bilder auf ferne Cloud-Server hochladen, verarbeitet Image Color Picker 100% Ihrer Daten direkt in Ihrem Browser mit der nativen HTML5 Canvas API und JavaScript TypedArrays.

Ihre Bilder verlassen nie Ihren lokalen Computer oder Ihr Smartphone.
Keine Benutzerkonten, Tracking-Tokens oder serverseitige Datenbanken.
Funktioniert vollständig offline, sobald die Seite in Ihrem Browser geladen ist.

Wählen Sie Jede Farbe aus Jedem Bild.