Color Picker
Pick and convert colors online for free. HEX, RGB, HSL color codes.
Advertisement
#3B82F6
Click to open color picker
Shade palette
Color values
Pick color from image
Advertisement
How to Use This Tool
Pick a Color
Click the color swatch to open the color picker and select any color, or click any color in the Quick Palette to start from a preset.
Copy Your Color Code
Click the Copy button next to HEX, RGB, HSL, or CMYK to copy that format to your clipboard for use in CSS, design tools, or print specifications.
Explore Shades and Palettes
Click any shade in the Shades row to switch to that variation. Use the Quick Palette for common web colors.
Advertisement
Related Tools
Frequently Asked Questions
What is the difference between HEX, RGB, HSL, and CMYK?
How do I use a color code in CSS?
What is color contrast and why does it matter?
Can I extract colors from an image?
About Color Picker
The designer shipped a Figma mockup with seventeen colors and none of them exported to the style token CSV because they were pasted as screenshots from a competitor's landing page. Or you are trying to match the exact teal from a client brand PDF where the Pantone swatch never made it into the digital brief. This picker lets you drop an image (PNG, JPEG, WebP, or a screenshot pasted from the clipboard), then sample any pixel to read its color in HEX, RGB, HSL, and optionally HSV/CMYK/OKLCH, with a zoom loupe that shows surrounding pixels so you do not grab the wrong one when hovering near an anti-aliased edge. A separate wheel picker lets you design a color from scratch with a hue ring and saturation-value square, and a palette builder extracts the five most dominant colors from an uploaded image using k-means clustering so you can rebuild the reference palette in one operation rather than sampling each area manually.
When to use this tool
Extracting a brand palette from a client's existing site
The marketing lead sent a screenshot of the hero, the newsletter, and the product page and asked you to match the style. Upload each screenshot, pull the k-means dominant colors, and you get 15 candidate brand colors across the three sources that you can diff to find the consistent palette of 3–4 real brand colors.
Matching a color from a photo to a CSS variable
The creative director wants the background of a landing section to match the exact teal of a photo on the mood board. Load the photo, hover over the teal region, read the HEX (say #2C7A7B), paste into your Tailwind config or CSS custom property, and the code matches the reference without a third-party eyedropper extension.
Building a data-visualization color ramp
A dashboard needs five sequential colors from light to dark teal for a heatmap. Pick the base color on the wheel, use the lightness slider to generate steps at 20% increments, and export as an array of HEX strings to paste directly into your Chart.js or D3 color scale.
Sampling a print ad to match on-screen
A printed billboard design needs to be re-created for digital. Photograph the printed piece under neutral light (or use the supplied scan), sample the key colors, and note that print colors almost always look slightly desaturated on screen — you may need to bump saturation 5–10% on the digital version to match the perceived vibrancy.
Generating accessible foreground/background pairs
After picking a brand background color, paste it into your contrast checker to verify 4.5:1 against black and white foregrounds. If neither passes WCAG AA, use the lightness slider to nudge the color lighter or darker until both text options work — this is faster than re-designing from scratch.
How it works
- 1
Pixel sampling via getImageData on a canvas
When you upload an image we draw it onto an offscreen canvas at native resolution, then on each mouse hover we read the exact pixel under the cursor with ctx.getImageData(x, y, 1, 1). The returned Uint8ClampedArray gives RGBA in sRGB space; we convert to HEX via simple bitwise packing and to HSL via the standard RGB-to-HSL algorithm. The zoom loupe reads a 9x9 pixel window around the cursor so you can aim precisely.
- 2
K-means palette extraction in a Web Worker
Palette mode downsamples the image to a 256x256 thumbnail, runs k-means clustering with k=5 and 20 iterations on the RGB pixel values, and reports the cluster centers as the dominant colors. This runs in a Web Worker so the main thread stays responsive; a 4000x3000 photo takes around 200ms to process. Results are sorted by cluster size (largest color area first) so the first swatch is the dominant tone of the image.
- 3
Color space conversions follow the CSS Color 4 spec
HEX, RGB, and HSL conversions use the same sRGB math the browser uses internally. For OKLCH we follow the CSS Color Module 4 draft, which uses the Oklab perceptual space for more uniform lightness — a 50% OKLCH lightness looks perceptually like 50% across all hues, whereas HSL's 50% lightness looks noticeably darker in blues than yellows. OKLCH is the future-proof choice; HEX is what still goes in every config file.
Honest limitations
- · Cross-origin images loaded from arbitrary URLs may taint the canvas and block sampling; upload the file directly or paste from clipboard to avoid this.
- · The palette extraction k-means has fixed k=5 in our current UI; for complex images with more distinct color regions, the result may collapse two similar colors into one cluster and miss a minor accent.
- · Reported values are in sRGB regardless of the source image's color space; images authored in Display P3, Adobe RGB, or ProPhoto will read as their sRGB approximation rather than the original wide-gamut values.
Pro tips
Zoom in before sampling, especially near edges
Screenshots and photos have anti-aliased edges where adjacent colors blend across a few pixels. Sampling at the visible transition gives you an in-between color that exists nowhere in the real palette. Use the zoom loupe to aim at the center of a solid region, a few pixels away from any edge. For small UI elements like button text, this matters a lot — sampling at the text rendering edge often returns a semi-transparent color that is not the designer's real choice.
Cross-origin images taint the canvas and block sampling
If you load an image via URL rather than uploading a file, the browser enforces CORS: unless the remote server sends Access-Control-Allow-Origin, the canvas becomes tainted and getImageData throws a SecurityError. Workaround: save the image locally first (right-click save, or use the clipboard paste path), then upload the local copy. This is a browser security feature, not a tool limitation — it prevents sites from reading cross-origin image contents via color-sampling side channels.
sRGB is the web default; Display P3 needs explicit handling
Modern iPhones and recent MacBooks capture photos in Display P3, a wider color gamut than sRGB. When such a photo is loaded without its embedded ICC profile, the browser interprets the pixel values as sRGB and the colors look desaturated versus the phone screen. Our sampling reports values in sRGB by default; if you need the original P3 values for design work targeting wide-gamut displays, open the image in a P3-aware tool like Affinity Photo or Photoshop and sample there instead.
Frequently asked questions
Why does the color I pick look different in my design tool than here?
Almost always a color-space mismatch. Web browsers display everything in sRGB by default (even on wide-gamut monitors, unless the image has an embedded ICC profile saying otherwise). Some design tools — Figma with the P3 mode enabled, Photoshop with Adobe RGB as working space, Affinity Photo in P3 — display and store colors in wider gamuts. A color picked here as #FF3366 is sRGB; pasting it into a Display P3 document may re-interpret it as P3 and look more saturated. To avoid surprises, set your design tool's working color space to sRGB for anything destined for the web.
What is the difference between HEX, RGB, HSL, and OKLCH?
HEX and RGB are the same data in different notations — #FF3366 equals rgb(255, 51, 102). HSL represents the same color as Hue, Saturation, and Lightness, which is easier for humans to reason about (a darker shade of the same color means lowering the L value). OKLCH is a newer perceptual space where lightness is uniform across hues — OKLCH(50% 0.2 200) looks the same brightness as OKLCH(50% 0.2 60), whereas HSL(200, 50%, 50%) looks darker than HSL(60, 50%, 50%) because yellows are perceptually lighter. For generating palettes OKLCH produces more even steps; for compatibility with existing configs, HEX is still universal.
How does the k-means palette extraction pick the five colors?
K-means is a clustering algorithm that finds k groups in a dataset by iteratively assigning points to the nearest cluster center and then recomputing centers as the mean of assigned points. For color extraction we treat each pixel as a point in 3D RGB space, initialize 5 random centers, and iterate 20 times until centers stabilize. The output is the 5 colors that collectively minimize the total distance from every pixel to its nearest center — effectively, the 5 best-fitting representative colors for the image. Cluster size tells you how much of the image that color covers.
Can I pick a color from a live webpage instead of an image?
Not directly in this tool, but Chrome, Edge, Firefox, and Safari 17+ all ship a native EyeDropper API accessible via Developer Tools (the color-swatch icon in the Styles panel). For cross-page sampling, browser extensions like ColorZilla have worked for years. Our tool is designed for the common case of sampling from static images, screenshots, or brand PDFs where a page-level eyedropper does not help. For a live screenshot of another site, capture the screenshot first (Cmd/Ctrl+Shift+4 on macOS, Win+Shift+S on Windows) then paste it here.
Is my image sent to a server when I use the palette extractor?
No. All color sampling and k-means clustering runs inside your browser. The image is drawn onto a Canvas 2D context, pixels are read via getImageData, and the clustering happens in a Web Worker running JavaScript in the same tab. No network request sends any pixel data anywhere. This matters because people often sample colors from sensitive reference material (unreleased brand guidelines, NDA mood boards, competitor screenshots under private review) and the entire point of client-side processing is that the content stays local to your device.
Color picking often feeds a design workflow that continues into other tools. After extracting a palette, meme-generator accepts custom text colors that match your brand. image-converter helps when a reference photo needs to become a shareable flat PNG with brand-accurate colors preserved. For sampling colors off a screenshot that contains confidential information, compress and crop it with image-compressor and image-resizer first so the version you keep on disk is the minimally needed region, not the full sensitive capture.
Advertisement