Loading…
Drag & drop, paste from clipboard, or click to browse. JPG, PNG, WebP, AVIF, GIF, BMP, SVG.
Choose imagesYour images are analysed securely in your browser and are automatically removed after processing — nothing is uploaded.
A magnifier loupe shows a zoomed grid of pixels so you can pick the exact colour you want, down to a single pixel, with live hover preview.
Real perceptual clustering in LAB colour space identifies the dominant, secondary and accent colours of any image, with usage percentages and pixel counts.
Generate complementary, analogous, triadic, tetradic, split-complementary, square, monochromatic and gradient palettes from any picked colour.
Convert any colour to HEX, RGB(A), HSL(A), HSV(A), CMYK, LAB, LCH and XYZ, plus the nearest Tailwind, Bootstrap and Material Design token — all with one-click copy.
Test any two colours for AA and AAA compliance at normal and large text sizes, with a live preview and a suggested most-legible text colour.
Build linear, radial and conic CSS gradients from your palette and copy production-ready CSS, Tailwind and SCSS in a click.
Export to CSS variables, SCSS, LESS, Tailwind config, JSON, design tokens, CSV, TXT, Adobe Swatch Exchange (.ase) and GIMP palette (.gpl).
Every pixel is analysed in your browser with the Canvas API. Your images never leave your device — no upload, no sign-up, no limits.
Drag and drop a photo, paste from the clipboard, or click to browse. JPG, PNG, WebP, AVIF, GIF, BMP and SVG are decoded instantly in your browser — nothing is uploaded.
Click any pixel with the magnifier for precise picking, or let the tool auto-extract a dominant colour palette using K-means clustering. Pick as many colours as you like.
See every format (HEX, RGB, HSL, CMYK, LAB, LCH), the colour name and mood, build harmony palettes, check WCAG contrast and generate gradients.
Copy any value with one click, or export the whole palette as CSS, SCSS, LESS, Tailwind config, JSON, design tokens, Adobe ASE or GIMP GPL — single or in batch as a ZIP.
A color picker from an image is a tool that lets you extract the exact colour values of any pixel in a photo, screenshot, logo or design — and turn them into usable codes like HEX, RGB or HSL. Instead of guessing what shade of blue is in a sunset photo or trying to eyeball the green in a brand logo, you simply click the pixel and the tool tells you precisely what colour it is.
Modern color pickers go far beyond single-pixel sampling. This tool combines a pixel-precise eyedropper with a magnifier loupe, automatic dominant-colour extraction, full colour-space conversion, colour-harmony generation, WCAG accessibility analysis, gradient building and palette export. In effect, it is a complete colour-intelligence workstation that turns any image into a ready-to-use design system.
The most important thing about a good color picker is accuracy. Because this tool reads the raw pixel data from the original, full-resolution image using the browser's Canvas API, the colours it reports are exact — not approximations from a compressed preview. When you click a pixel, you get the true 8-bit-per-channel value of that pixel, and every conversion to other colour spaces is computed with proper colour-science formulae rather than rough lookups.
Designers, developers, marketers, artists and content creators all use color pickers daily: to match a brand colour, to build a cohesive palette from a mood-board image, to extract the dominant tones of a product photo for a landing page, or simply to grab the perfect shade from a piece of inspiration. This tool serves all of those needs in one private, free, browser-based interface.
When you upload an image, the browser decodes it into a grid of pixels, each with a red, green, blue and alpha value between 0 and 255. Picking a single colour is then as simple as reading the four numbers at the pixel you clicked. The magnifier loupe works by drawing a small zoomed region of the source image onto a separate canvas with image smoothing disabled, so you can see individual pixels and target exactly the one you want.
Extracting a whole palette is more interesting. Counting every distinct colour in a photo would produce thousands of nearly identical shades, so the tool uses K-means clustering — a classic machine-learning algorithm — to group similar colours together. It first samples several thousand pixels from a downscaled copy of the image (for speed), converts each to the perceptually-uniform CIELAB colour space, and then iteratively partitions them into K groups, where K is the palette size you choose. The average colour of each group becomes a swatch, and the size of each group tells you what share of the image that colour occupies.
Working in LAB rather than RGB matters because LAB is designed so that the numerical distance between two colours roughly matches how different they look to the human eye. Clustering in LAB therefore produces palettes that feel right — it will keep a subtle sky gradient as one or two blues rather than splitting it arbitrarily, and it will pull out a small but vivid accent colour that an RGB average would have washed out.
Alongside K-means, the tool also computes a "most used colours" list by quantising every sampled pixel into a coarse grid of colour buckets and counting how many pixels fall into each. This gives you the literal most-frequent tones with exact percentages and pixel counts — a complementary view to the smoother K-means palette. All of this runs in milliseconds, entirely in your browser.
A single colour can be written in many ways, and each format suits a different job. HEX (e.g. #3B82F6) is the compact six-digit hexadecimal notation used everywhere in web and app design — it is really just RGB written in base 16. RGB (e.g. rgb(59, 130, 246)) describes a colour as amounts of red, green and blue light from 0 to 255, which is how screens actually produce colour. RGBA adds an alpha channel for transparency.
HSL (hue, saturation, lightness) and HSV/HSB (hue, saturation, value/brightness) are far more intuitive for humans to reason about. Hue is the position on the colour wheel from 0 to 360 degrees, saturation is how vivid the colour is, and lightness or value is how bright it is. Designers love HSL because you can create a tint or shade of a colour simply by changing the lightness while keeping hue and saturation fixed — which is exactly how this tool builds monochromatic palettes.
CMYK (cyan, magenta, yellow, key/black) is the subtractive model used in printing. Because screens emit light and printers absorb it, an RGB colour cannot always be reproduced exactly in CMYK, but the conversion this tool provides gives a faithful starting point for print work. LAB and LCH are device-independent, perceptually-uniform spaces used by colour scientists and high-end design software; LCH in particular is increasingly used in CSS for predictable lightness across hues.
This tool shows all of these formats side by side for any colour you pick, each with a one-click copy button, plus the XYZ tristimulus values and the nearest named colour. It also approximates the closest Tailwind CSS, Bootstrap and Material Design token, so you can drop the colour straight into your framework of choice without hunting through documentation.
Colour theory is the set of principles that explain how colours relate to one another and how to combine them pleasingly. At its core sits the colour wheel, an arrangement of hues around a circle. Primary colours (in the traditional model, red, yellow and blue; in the additive screen model, red, green and blue) combine to create secondary and tertiary colours, and the angular relationships between hues on the wheel define the classic harmonies.
Three properties describe any colour: hue (which colour it is), saturation (how pure or grey it is) and value or lightness (how light or dark it is). Mastering colour means controlling these three independently. A common beginner mistake is to change a colour's saturation when they really wanted to change its lightness, producing muddy results. Because this tool exposes HSL and HSV directly, you can see and adjust each property deliberately.
Warm colours (reds, oranges, yellows) advance and feel energetic and inviting; cool colours (greens, blues, purples) recede and feel calm and professional. Neutrals (greys, beiges, near-blacks and near-whites) provide rest and let accent colours shine. This tool automatically classifies every colour you pick as warm, cool or neutral and labels it as vibrant, pastel, muted, dark or light, giving you an instant read on its character.
Good design rarely uses many fully-saturated colours at once. The popular 60-30-10 rule suggests a dominant colour for about 60% of a composition, a secondary colour for 30% and an accent for the remaining 10%. The dominant-palette extraction in this tool, which reports each colour's percentage share, is a direct, data-driven way to apply that principle to real images.
Colour harmonies are recipes for combining hues that are known to look good together because of their geometric relationship on the colour wheel. Choosing colours this way removes guesswork and gives palettes a sense of intention and balance. This tool can generate every major harmony from any colour you pick.
A complementary scheme uses two hues directly opposite each other (180 degrees apart), such as blue and orange. It produces maximum contrast and vibrancy, which is why it is so common in sports branding and call-to-action buttons. A split-complementary scheme softens this by using the two hues adjacent to the complement, keeping strong contrast while feeling less harsh. Analogous schemes use neighbouring hues (within about 30 degrees) and feel calm, cohesive and natural — think of the greens and yellows of a forest.
Triadic schemes use three hues evenly spaced 120 degrees apart, offering vivid contrast while staying balanced; tetradic and square schemes use four hues in two complementary pairs for rich, complex palettes that need careful balancing. Monochromatic schemes use a single hue at different lightness levels, which is foolproof and elegant. Gradient harmonies smoothly progress hue and tone together for modern, atmospheric looks.
Beyond generating these palettes, the tool suggests matching and opposite colours for any swatch and lets you click straight through to inspect, save or export the result. Whether you are designing a logo, a website theme or a marketing graphic, starting from a harmony gives you a professional foundation in seconds.
Colour is one of the most powerful elements of a brand. Studies consistently show that colour dramatically increases brand recognition, and most of the world's most valuable brands are instantly identifiable by a single signature colour — the Coca-Cola red, the Tiffany blue, the Spotify green. Extracting and codifying brand colours precisely is therefore essential work for any designer or marketer.
With this tool you can drop in a logo, a competitor's website screenshot or a marketing creative and instantly pull out its exact palette. The dominant-colour extraction reveals the primary brand colour and its supporting tones, while the AI mood analysis describes the overall feeling the palette conveys — professional, luxurious, energetic, friendly, minimal — based on its temperature, saturation and lightness profile. This is invaluable for competitor research and for keeping your own brand consistent.
Consistency is where most brands slip. A colour that is even slightly off across a website, an app and printed material erodes the polish of a brand. By exporting your extracted palette as CSS variables, a Tailwind config, design tokens or an Adobe ASE swatch file, you create a single source of truth that designers and developers can both work from, ensuring the exact same hex values are used everywhere.
The tool also ships with curated palettes for well-known brands and trending colour combinations, which are useful both as inspiration and as a quick way to understand how successful palettes are structured. You can save any palette to your private collection, mark favourites and share it with a link.
Colour choices are not only aesthetic — they determine whether people can actually read your content. Roughly one in twelve men and one in two hundred women have some form of colour-vision deficiency, and far more people use screens in bright sunlight or with ageing eyes. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to keep text legible for everyone.
Contrast ratio is a number from 1:1 (no contrast) to 21:1 (black on white) that measures the difference in relative luminance between a foreground and background colour. WCAG requires a ratio of at least 4.5:1 for normal body text to meet level AA, and 3:1 for large text (roughly 18px bold or 24px regular and above). The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. User-interface components and meaningful graphics need at least 3:1.
This tool includes a built-in WCAG contrast checker. Pick any two colours — for example a text colour and a background from your extracted palette — and it instantly shows the exact contrast ratio along with pass/fail badges for AA, AAA, large text and UI components, plus a live preview of real text rendered in those colours. If a combination fails, the tool explains why and suggests the most legible text colour for that background.
Designing with contrast in mind from the start, rather than retrofitting it, produces interfaces that are both more beautiful and more usable. Because the checker uses the same relative-luminance formula defined by the WCAG specification, its results match what automated accessibility auditors and screen-reader users will experience.
A design system is a single, shared library of the colours, type, spacing and components that make up a product's visual language. Colour is usually the first and most important layer. Rather than scattering raw hex codes throughout a codebase, a good design system defines a named, semantic colour palette once and references it everywhere — so that changing a brand colour is a one-line edit, not a search-and-replace nightmare.
This tool is built to feed directly into modern design-system workflows. From any extracted or hand-picked palette you can export CSS custom properties (the :root variables that power theming and dark mode), SCSS and LESS variables for preprocessor pipelines, a ready-to-paste Tailwind CSS colour config, and platform-agnostic design tokens in the JSON format understood by Style Dictionary and Figma token plugins.
For designers working in dedicated tools, the Adobe Swatch Exchange (.ase) export drops your palette straight into Photoshop, Illustrator and InDesign, while the GIMP palette (.gpl) export works with GIMP, Inkscape and Krita. Developers can grab JSON or CSV for scripting. This breadth means the same palette can travel from a photograph, through a designer's canvas, into a developer's codebase without anyone re-typing a single hex value.
When building a system, it helps to derive a full tonal scale (lighter and darker steps) from each base colour — exactly what the monochromatic harmony generator produces. Pair that with the contrast checker to guarantee every text-on-surface combination is accessible, and you have the foundation of a robust, scalable theme, including ready-made light and dark variants.
Colours carry emotional and cultural associations that shape how people feel about a brand before they read a single word. While these associations are not absolute and vary across cultures, broad patterns are well documented and widely used in marketing. Understanding them helps you choose a palette that reinforces the message you want to send.
Blue is the most popular brand colour worldwide because it signals trust, stability, professionalism and calm — which is why so many banks, tech companies and healthcare brands use it. Red is energetic, urgent and appetite-stimulating, ideal for food, entertainment and clearance sales. Green evokes nature, growth, health and money. Yellow and orange feel optimistic, friendly and affordable. Purple suggests luxury, creativity and imagination, while black communicates sophistication and premium quality.
This tool's mood analysis maps the colours you pick to these psychological associations automatically, giving you a quick sanity check on whether your palette matches your intended tone. If you are building a calming wellness brand and the analysis comes back "energetic and bold", that is a useful signal to reconsider. The per-colour mood tags (such as professional, playful, luxurious or fresh) make these associations explicit.
The deeper lesson of colour psychology is context and consistency. The same red can feel either premium or cheap depending on the colours around it and how it is used. By extracting real palettes, testing harmonies and checking contrast all in one place, you can make colour decisions that are emotionally on-brand and technically sound — rather than relying on intuition alone.
Start with a clear intent. Decide what the design should feel like and which single colour will lead — your dominant colour — before adding anything else. Extracting that lead colour from a relevant photograph or piece of inspiration, as this tool lets you do, grounds the palette in something real rather than an arbitrary swatch.
Limit your palette. The most common mistake is using too many colours. A disciplined palette of one dominant colour, one or two supporting colours and a single accent will almost always look more professional than a rainbow. Apply the 60-30-10 distribution and lean on neutrals to give the eye places to rest. Derive tints and shades from your core hues rather than introducing unrelated new colours.
Always check contrast. A palette can be beautiful and still unusable if text disappears into its background. Run every text-and-background pairing through the WCAG checker and aim for at least 4.5:1 for body text. Build accessibility in from the beginning; it is far cheaper than fixing it later, and it widens your audience.
Finally, document and reuse. Once you have a palette you like, save it, name its colours and export it in the formats your team uses — CSS variables, Tailwind config, design tokens, ASE swatches. A documented palette is the difference between a one-off graphic and a consistent brand. Test your colours on real screens and in both light and dark contexts before committing, because colours can look surprisingly different across devices and ambient lighting.
No sign-up, no watermark, nothing uploaded. Drop an image and grab the perfect palette.
Open the colour picker