Can I extract colours from an image without uploading it?
Yes. A browser can decode a selected raster image, draw a bounded copy to an in-memory canvas and analyse those pixels locally. Dhrub Free Tools samples a version no larger than 512 pixels on its longest side, uses Color Thief to find a dominant colour and palette, and reports HEX, RGB, HSL and OKLCH values plus contrast ratios against black and white. The source image is not sent to an application server.
How to use the tool
Choose a raster image
Select a standard JPEG, PNG, WebP or GIF within the published file and decoded-pixel limits.
Choose the palette size
Extract six to ten colours from a bounded local sample and inspect the dominant swatch first.
Copy or export the result
Copy CSS custom properties or download JSON with colour values and black/white contrast ratios.
At a glance
- Analysis location
- Current browser tab
- Sampling boundary
- Longest side reduced to at most 512 pixels
- Input boundary
- Header checked before decode; 12 MB, 25 megapixels and 12,000 pixels per side
- Palette size
- Six to ten colours
- Values shown
- HEX, RGB, HSL, OKLCH and contrast ratios
- SVG input
- Rejected
A representative palette is a useful summary, not every colour
Palette extraction groups sampled pixels into representative colours. The result depends on image content, crop, transparency, gradients, compression, colour management and the requested number of swatches. Reducing the sample to 512 pixels keeps device work bounded while preserving the broad visual distribution, but very small accents can disappear.
The first result is the dominant sampled colour, followed by a deduplicated palette. HEX and RGB describe sRGB-oriented values, HSL offers a familiar cylindrical representation, and OKLCH expresses lightness, chroma and hue using the model defined for modern CSS colour work.
- Use extracted colours as a starting point for a design system, not an automatic brand approval.
- Inspect small logos, text and accent regions separately when they matter.
- Check colours on the actual target displays and print process.
- Keep the original image outside the tool; palette extraction does not modify it.
Contrast numbers need design context
The lab calculates WCAG relative luminance and the contrast ratio for each swatch against black and white, then suggests whichever of those two gives the higher ratio. WCAG 2.2 uses 4.5:1 for ordinary text and 3:1 for large text at Level AA, with defined exceptions.
A suggested foreground is not an accessibility certificate. Text size and weight, states, adjacent colours, gradients, opacity, images behind text, non-text controls and the full page experience still need evaluation. Colour also must not be the only way important information is conveyed.
Important limitations
- Palette extraction can miss small accents and cannot reproduce every pixel or colour relationship.
- Colour profiles, wide-gamut sources, transparency and browser decoding can affect sampled RGB values.
- Animated GIFs are analysed as a decoded raster state rather than as a complete timeline.
- SVG is refused because it can contain active or externally referenced content; convert a trusted SVG to a raster image first if appropriate.
- Black-or-white contrast suggestions do not establish WCAG compliance for a complete interface or document.
Questions people ask
Why is a small logo colour missing?
The image is downsampled and quantised into a limited palette. A colour occupying very few pixels may not form one of the representative clusters.
Does the suggested black or white text always pass WCAG?
No. The tool shows both ratios and chooses the higher one, but pass criteria depend on text size, context and the applicable WCAG success criterion.
Why is SVG not accepted?
SVG is an XML-based document format that can contain scripts or external references. This local analyser accepts decoded raster formats only.
What is OKLCH?
OKLCH represents perceptual lightness, chroma and hue and is defined for web use in CSS Color 4. Browser and output-gamut support still affect what can be displayed.
Primary and project sources
- Color Thief project — Color Thief maintainersPrimary project documentation for dominant-colour and palette extraction.
- Canvas 2D — WHATWGPrimary browser standard for decoding and drawing raster sources into a canvas bitmap.
- Web Content Accessibility Guidelines 2.2 — W3C Web Accessibility InitiativeNormative contrast criteria and accessibility requirements.
- CSS Color Module Level 4 — W3CPrimary specification for modern CSS colour values including Oklab and OKLCH.