Een Kleurkiezer Gebruiken om Kleuren van Pixels te Vinden
Quick Answer
Om een kleur te kiezen: open de Color Picker, upload een afbeelding (of gebruik de screen eyedropper), klik op de pixel waarvan je de kleur wilt en de HEX-, RGB- en HSL-waarden verschijnen. Alle verwerking gebeurt lokaal.
Introduction
Een kleurkiezer (ook eyedropper genoemd) laat je de exacte kleur van een pixel vinden. Dit is essentieel voor het matchen van merkkleuren, het samplen van kleuren uit afbeeldingen of het bouwen van een kleurenpalet uit een foto. Browser-gebaseerde kleurkiezers kunnen kleuren uit geüploade afbeeldingen lezen via de Canvas API, en de ingebouwde EyeDropper API kan kleuren van overal op het scherm kiezen.
Step by Step
-
Open the Color Picker tool
Go to the Color Picker tool page. The tool supports picking colors from uploaded images and, in supported browsers, from anywhere on screen via the EyeDropper API.
-
Choose your source
To pick from an image: upload or drag-and-drop an image. To pick from the screen (Chrome/Edge only): click the 'Pick from screen' button, then click anywhere on your screen.
-
Click the pixel to sample
For image picking, move your cursor over the image and click the pixel whose color you want. The tool reads the pixel color from the canvas using getImageData(). A magnifier may help you select the exact pixel.
-
Read the color values
The tool displays the picked color in HEX, RGB, and HSL formats, along with a swatch. The values update instantly as you move the cursor.
-
Copy the color
Click Copy next to any format to copy the color value to your clipboard. Use it in your CSS, design tool, or application.
Examples
Pick a brand color from a logo
Input: logo.png, click on the brand color pixel
Output: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Sample a color from a photo
Input: photo.jpg, click on a sky pixel
Output: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Pick from screen (Chrome/Edge)
Input: Click 'Pick from screen', then click any pixel on your display
Output: HEX value of that pixel, e.g., #ff5733
Common Problems
- Anti-aliasing blends colors at edges —pixels on the edge between two colors are a blend. Sample from the center of a solid color area for accuracy.
- EyeDropper API not supported —the screen picker requires Chrome 95+ or Edge 95+. Firefox and Safari do not support it; use the image upload method instead.
- JPEG compression alters colors —JPEG lossy compression changes pixel colors slightly. For exact brand colors, use a PNG or the original vector source.
- Color profile differences —images with embedded color profiles (ICC) may display differently than their raw pixel values suggest.
Tips
- Use the magnifier to select the exact pixel —at high zoom, you can pick a single precise pixel rather than a blended edge.
- Sample multiple pixels from a solid area and average them if compression has introduced noise —this gives a more representative color.
- Use the EyeDropper API (Chrome/Edge) to pick colors from any application, not just images in the browser.
- Use our Color Picker for instant, private color sampling —your images never leave your browser.