Working With Colour on the Web: Formats, Palettes & Contrast That Passes
Pull an exact colour out of a logo, a photo or a screenshot, read it in every format a designer or developer needs, build a palette around it, and check before you ship whether text on that colour is actually readable. Everything here runs on your device, so client artwork never leaves your machine.
Quick Navigation
Introduction
Most colour problems are small and expensive. A brand red gets eyeballed from a JPEG and ends up two shades off across a website. A palette looks elegant in a design file and fails accessibility review because the body text sits at 3.1:1 on a tinted background. A logo colour gets typed as HEX into a print job with no idea what it becomes in CMYK.
This tool covers all three. Sample a pixel directly from an image or type any CSS colour value, and you get HEX, RGB, HSL, HSV and CMYK together, a harmony palette and a tint and shade scale derived from that colour, and a live WCAG contrast reading against whatever background you plan to use.
Your image is read by the browser and drawn to a canvas on your own device. No upload happens, which matters when the artwork is a client's unreleased brand asset.
Example:
A developer drops in a client logo, clicks the darkest part of the mark to get #14284B, generates an analogous palette for supporting accents, and confirms white text on the brand navy clears 4.5:1 before writing a single line of CSS.
Quick Definition:
A colour picker reads the exact value of a colour and expresses it in the formats different tools need, so the same colour stays identical across a website, a design file and a print job.
AI Summary:
This Color Picker samples colours from uploaded images or typed CSS values, converts between HEX, RGB, HSL, HSV and CMYK, extracts dominant image colours, generates complementary, analogous, triadic, tetradic, split-complementary and monochromatic palettes plus tint and shade scales, and reports WCAG 2.1 contrast ratios, all in the browser with no upload.
What Does This Colour Picker Do?
It answers the question "what colour is that, exactly, and what can I do with it". Everything derives from one active colour, which you set by swatch, by typed value, or by clicking a pixel in an image.
- Samples any pixel from an uploaded image, with no upload to a server
- Extracts the dominant colours from a photo or logo as a starting palette
- Accepts HEX, RGB, HSL and CSS colour names as typed input
- Shows HEX, RGB, HSL, HSV, CMYK and a ready-made CSS custom property
- Builds six kinds of harmony palette plus a nine-step tint and shade scale
- Reports the WCAG contrast ratio against any background, with AA and AAA results
- Exports the palette as CSS variables, JSON, or a PNG swatch sheet
How to Use This Colour Picker
Set the Colour
Use the swatch, type a value, or upload an image.
Click to Sample
Click any pixel, or extract dominant colours.
Build the Palette
Pick a harmony rule and browse tints and shades.
Check and Export
Confirm contrast, then copy CSS, JSON or a PNG.
Colour Formats Explained
The same colour has several names. Which one you use depends on where it is going, not on which is more accurate.
| Format |
What It Describes |
Where It Belongs |
| HEX |
Red, green and blue as three pairs of hexadecimal digits |
CSS, design tools, brand guidelines, anywhere a short code is convenient |
| RGB |
The same three channels as numbers from 0 to 255 |
CSS with transparency, canvas and image code, programmatic colour maths |
| HSL |
Hue angle, saturation and lightness |
Building tint and shade scales, theming, hand-editing a colour by feel |
| HSV |
Hue, saturation and value (brightness) |
Graphics applications and colour-wheel interfaces |
| CMYK |
Cyan, magenta, yellow and key (black) ink percentages |
Print work, as an approximate starting point before profiling |
HEX and RGB are the same information written differently, so converting between them is lossless. HSL is a different way of describing that same point, which is why adjusting lightness in HSL is so much easier than nudging three RGB channels and hoping the hue survives.
Palette Rules Explained
A harmony rule rotates the hue of your colour around the wheel by a fixed amount. The rules are shortcuts to combinations that tend to look deliberate, not laws.
| Rule |
How It Is Derived |
Typical Use |
| Complementary |
The opposite hue, 180 degrees away |
High-contrast accents, call-to-action buttons |
| Analogous |
Neighbouring hues, roughly 30 degrees either side |
Calm, cohesive interfaces and backgrounds |
| Triadic |
Three hues evenly spaced 120 degrees apart |
Playful branding, illustration, data categories |
| Tetradic |
Two complementary pairs, 90 degrees apart |
Rich palettes where one colour stays dominant |
| Split complementary |
The two hues either side of the complement |
Contrast without the harshness of a direct complement |
| Monochromatic |
One hue at different lightness and saturation levels |
Minimal designs, UI state variations, hover and disabled styles |
A practical caution: hue rotation ignores perceived brightness. Two colours 120 degrees apart can have very different luminance, so always check the contrast reading rather than assuming a harmony palette is accessible.
Contrast and Accessibility
Contrast ratio compares the relative luminance of two colours and returns a number between 1:1 (identical) and 21:1 (pure black on pure white). WCAG 2.1 sets these thresholds:
| Content |
Level AA |
Level AAA |
| Normal body text |
4.5:1 |
7:1 |
| Large text (18.66px bold or 24px regular and above) |
3:1 |
4.5:1 |
| Interface components, icons, focus indicators |
3:1 |
– |
Two things worth knowing. First, luminance is not the same as how light a colour looks: a saturated yellow and a saturated blue can read as similar in a design and be several ratio points apart. Second, passing the ratio is a floor, not a guarantee. Thin fonts, small sizes, low-quality screens and bright rooms all eat into real-world readability, so a comfortable margin above the threshold is better than sitting on 4.51:1.
Note: a passing ratio covers only text and non-text contrast. It does not check whether colour alone is being used to carry meaning, which is a separate WCAG requirement, and it cannot be measured by any colour tool.
How Dominant Colour Extraction Works
Averaging every pixel in an image is the obvious approach and it is almost always wrong. Averaging a bright red logo on a white background gives pink, and averaging a landscape gives mud, because the mean of many different hues tends toward grey.
This tool instead scales the image down, drops each pixel into a coarse colour bucket, counts how many pixels land in each bucket, and returns the most populated ones with their members averaged. Fully or mostly transparent pixels are ignored, so a PNG logo does not come back black. Buckets that sit very close together are merged, so a photo of a blue sky returns one blue and then moves on to the other colours in the frame.
Example:
A product photo of an orange trainer on a grey backdrop returns the grey first (it covers more pixels), then the orange, then the sole's off-white. Clicking directly on the shoe gets you the orange without the backdrop competing.
Common Colour Mistakes to Avoid
- Eyedropping a brand colour from a compressed JPEG instead of asking for the brand guideline value
- Sampling a single pixel in a gradient or a photo with heavy noise, then treating it as the colour
- Assuming a harmony palette is accessible because the colours look balanced
- Treating the CMYK conversion as production-ready without an ICC profile
- Picking a colour from a screenshot that has a translucent overlay or a dark-mode filter over it
- Building tints by mixing in white in RGB, which desaturates unevenly, instead of adjusting lightness in HSL
- Relying on colour alone to signal state, such as a red border with no icon or message
- Testing contrast only against white, when the real background is a tinted card
Who Uses a Colour Picker?
- Front-End Developers: Turning a design handoff into CSS custom properties
- Designers: Pulling palettes out of reference imagery and mood boards
- Accessibility Reviewers: Checking text and component contrast before sign-off
- Marketers: Matching campaign assets to existing brand colours
- Print Buyers: Getting an approximate CMYK starting point for a quote
- Content Creators: Matching thumbnails, overlays and channel branding
When Should You Use This Tool?
-
Identifying an Unknown Colour:
Recover a value from a logo, screenshot or photo you were sent without a spec.
-
Starting a Palette:
Derive supporting colours from one brand colour rather than guessing.
-
Before an Accessibility Review:
Confirm every text and background pairing clears the threshold.
-
Converting Between Teams:
Hand the same colour to a developer in HEX and a printer in CMYK.
-
Building UI States:
Use the tint and shade scale for hover, active and disabled variants.
Advantages and Limitations of This Tool
Advantages
- Pixel-accurate sampling from images, with click-anywhere picking
- Five colour formats plus a copy-ready CSS custom property
- Bucket-based dominant colour extraction rather than a misleading average
- Live WCAG ratio with AA and AAA results against any background
- Runs entirely in the browser, so artwork is never uploaded
Limitations
- CMYK is a plain mathematical conversion with no colour profile or ink model applied
- Spot colour systems such as Pantone are proprietary and cannot be matched here
- Colour accuracy depends on your own screen, which may not be calibrated
- Contrast checking covers colour pairs only, not font weight, size or layout
- Colour history is stored in this browser on this device and is not synced anywhere
Common Misunderstandings About Colour Tools
The first is that a HEX value is a colour. It is a set of instructions for a display, and the result depends on the screen's gamut and calibration. Two monitors showing #1E88E5 are showing two slightly different blues. This matters for judging a design, not for specifying one.
The second is that CMYK conversion is a solved calculation. The arithmetic is trivial; the accurate part is the colour profile, which depends on press, ink and paper. Bright RGB blues and greens in particular have no faithful CMYK equivalent and will shift noticeably in print.
The third is that a colour picker can identify a Pantone number. Pantone is a licensed spot colour system with physical ink formulations, not something derivable from a screen pixel. Any tool claiming an exact match from an image is offering a nearest guess.
Popular Colour Search Topics
- HEX to RGB converter
- Image colour picker online
- Colour palette generator from photo
- WCAG contrast ratio checker
- HSL tint and shade generator
- Complementary colour finder
- HEX to CMYK conversion
- CSS custom properties for colour themes
Quick Summary:
This Color Picker samples colours from images or typed values, shows HEX, RGB, HSL, HSV and CMYK together, extracts dominant image colours, builds harmony and tint palettes, and checks WCAG contrast, all in your browser with nothing uploaded.
About the Editorial Team
The content published on www.propdftool.com is created and reviewed by the Prop PDF Tools editorial team for accuracy, clarity, and practical relevance for design, development, and accessibility work. Contrast thresholds referenced on this page follow the published WCAG 2.1 success criteria for contrast (minimum and enhanced).
The calculators and educational resources available on www.propdftool.com are reviewed regularly for usability, accuracy, clarity, and long-term value for global audiences.
Last Updated: October 28, 2026
Disclaimer: This Color Picker processes images and colour values locally in your browser; nothing you upload is sent to our server. CMYK values are unprofiled mathematical conversions and should not be used for production printing without confirmation from your print supplier. Contrast results follow WCAG 2.1 contrast ratio formulas and cover colour pairs only; they are not a complete accessibility audit. Your last ten colours are stored in this browser's local storage and remain on the device until cleared.
Below are some commonly asked questions about colour formats, image sampling, and contrast.
Frequently Asked Questions (FAQs)
A pixel sampled from a photo is one exact value, while the colour you perceive is an average of the surrounding area, affected by lighting and by neighbouring colours. Photographs also contain compression artefacts that shift individual pixels. Sampling a few nearby points, or using the extracted dominant colours, usually gives a truer result than a single click.
No. The image is read by your browser and drawn to a canvas on your device. Pixel sampling, palette extraction and every conversion happen locally, and the file is never uploaded.
It compares the relative luminance of two colours on a scale from 1:1 to 21:1. WCAG 2.1 asks for at least 4.5:1 for normal body text and 3:1 for large text at AA level, rising to 7:1 and 4.5:1 at AAA. User interface components and graphical objects need at least 3:1.
HEX and RGB are interchangeable and both are universally supported. HSL is easier to work with by hand because lightening a colour means changing one number rather than three, which is why tint and shade scales are usually built in HSL.
The CMYK shown here is a direct mathematical conversion with no colour profile applied. Real print conversion depends on the press, ink, paper stock and ICC profile, so treat these numbers as a starting point and confirm with your printer before a production run.
The image is scaled down, each pixel is grouped into a coarse colour bucket, and the most populated buckets are averaged and returned. Transparent pixels are ignored, and buckets too close to one another are merged so the palette shows distinct colours instead of five versions of the same blue.
The last ten colours you generate are saved in your browser's local storage on this device only, so you can reuse them later. Nothing is uploaded, but the list stays on the device until you clear it.