Color Picker & Contrast Checker
Pick foreground and background colours and check the contrast between them before you ship. The preview shows the pair as real text, so you can judge readability directly instead of guessing from hex codes.
Live Text Contrast Preview
Sample paragraph text demonstrating visual contrast between selected text and background colors.
13.98 : 1
How it works
- 1
Choose a foreground (text) colour.
- 2
Choose the background colour it will sit on.
- 3
Read the preview as actual text at real sizes rather than as two swatches.
- 4
Copy the values into your stylesheet, design token file or theme configuration.
What people use it for
- Checking a brand colour pairing before it lands in a design system.
- Fixing low-contrast text flagged in a Lighthouse or accessibility report.
- Choosing readable link and body colours for a light and a dark theme.
- Documenting a colour pair in a style guide with the exact hex values.
Supported formats & options
| Colour input | Hex values via the native colour picker or direct entry |
|---|---|
| Preview | Live foreground-on-background text sample |
Key advantages & benefits
Judged in context
Colours are shown as text on a background, which is the only way to see whether a pairing is genuinely readable.
Accessibility-oriented
Contrast problems become obvious before they reach users or an accessibility audit.
Copy-ready values
Take the hex values straight into CSS, a design token file or a component library theme.
Instant iteration
Adjust either colour and see the effect immediately, with no build or reload.
Limits & things to know
- Contrast requirements depend on text size and weight — large text has a lower threshold than body copy, so judge the pairing at the size you will actually use.
- The tool checks a single foreground and background pair. Text over an image or gradient has a range of contrasts, and must be checked against the worst part.
- Colour choices also affect users with colour vision deficiencies; never rely on hue alone to carry meaning.
Troubleshooting
The colour looks different in the app than here
Opacity, blend modes and a parent background can all shift the rendered colour. Compare the computed colour in browser devtools rather than the declared one.
The picker will not open
The native colour input needs a browser that supports input type=color. Type the hex value directly if the swatch does not open.
Privacy & data handling
Colour selection and preview happen entirely in the page. No values are sent to a server or stored beyond the current tab.
Online Color Picker — HEX, RGB & HSL Converter
Pick a colour and get its HEX, RGB, HSL and CSS values instantly, or pull an exact colour out of an uploaded image. A free online color picker and converter for web design, brand palettes and CSS work.
- HEX, RGB and HSL together — every format is shown at once and stays in sync, so you can copy whichever one your stylesheet, design tool or brand guide expects.
- Color picker from image — upload a screenshot, logo or photograph and sample the exact pixel value — the reliable way to match an existing brand colour.
- CSS-ready output — values copy in valid CSS syntax, ready to paste into a custom property, a Tailwind config or a component style.
- Build consistent palettes — adjust hue, saturation and lightness numerically to derive tints and shades that actually belong to the same colour family.
- Images stay on your device — sampling happens on a canvas in your browser, so unreleased mockups and client artwork are never uploaded.
Free with no sign-up. Turn a chosen colour into a frosted CSS panel with the Glassmorphism Generator.
Frequently asked questions
What is a good WCAG contrast ratio?
A contrast ratio of 4.5:1 is required for normal text under WCAG AA standards.
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for body text and 3:1 for large text (roughly 24px, or 19px bold). Judge the pairing at the size you will actually ship, since the threshold changes with it.
Why does the colour look different in my app?
Opacity, blend modes and a parent background all shift the rendered result. Check the computed colour in browser devtools rather than the value you declared.
Is contrast enough for accessibility?
It is necessary, not sufficient. Also avoid using colour alone to convey meaning — add an icon, label or pattern so the information survives for users who cannot distinguish the hues.
Related tools
CSS Glassmorphism Generator
Generate modern glass UI effects & CSS code
QR Code Generator
Turn any link or text into a scannable QR code
Meta Tag & OpenGraph Generator
Generate SEO meta tags for Google, Facebook & Twitter
SHA256 & MD5 Hash Generator
Generate SHA-256, SHA-512, and MD5 cryptographic hashes