Pick colors, convert between HEX/RGB/HSL, and check WCAG contrast ratios.
All color conversion and contrast calculations run locally in your browser — no data is uploaded. The WCAG contrast ratios follow the official W3C standard (≥4.5:1 for normal text, ≥3:1 for large text).
HEX, RGB and HSL describe the same pixel in different languages. HEX is a compact 24-bit integer; RGB is three light intensities (each 0–255); HSL is perceptual — hue (the color), saturation (intensity), lightness (dark↔light). Contrast, meanwhile, is a ratio of relative luminance, not a "brightness difference" you eyeball.
#E76F51 == rgb(231, 111, 81). Raise lightness or drop saturation and you get a different tint/paste — even though hue, the 'color name', barely moves. That is why HSL is friendlier for design tweaks.
You want a button background that keeps its 'coral' identity but passes AA on white.
To pick a color: use the color wheel or enter a HEX/RGB/HSL value — the tool shows conversions between all formats and checks WCAG accessibility contrast ratios.
FreeToolHub Color Picker is a free browser-based tool that picks colors and converts between HEX, RGB, and HSL with WCAG contrast checking, no signup.
Pick colors, convert HEX/RGB/HSL and check WCAG contrast ratios. Free, in-browser.
This tool unifies the two jobs every interface color decision involves: choosing the color and proving it is readable. Pick any color through the visual picker or by typing HEX, and the tool converts to RGB and HSL instantly, with sliders to fine-tune hue, saturation, and lightness. Pair it against a second color — text on background — and the WCAG engine computes the contrast ratio, grading it against AA and AAA thresholds for normal and large text. That turns accessibility from a post-launch audit into a decision you make while the palette is still fluid.
UI designers building accessible palettes check button text and label contrast before handing off, not after legal review. Frontend developers converting brand HEX values into HSL for opacity variants and theme systems do the arithmetic in one place. Content teams verify overlay text readability on hero images. Small-business owners auditing their own site against WCAG 2.1 AA — increasingly a procurement and legal requirement under the ADA in the US and EN 301 549 in Europe — get pass/fail answers without buying an audit tool.
(1) Pick your foreground and background colors via picker, HEX entry, or the RGB/HSL sliders. (2) The contrast ratio computes live as a single number from 1:1 (identical) to 21:1 (black on white). (3) The verdict panel grades both colors against four thresholds — AA normal text 4.5:1, AA large text 3:1, AAA normal 7:1, AAA large 4.5:1 — with green or red per row. (4) Copy formats for CSS: hex, rgb(), hsl() strings ready to paste. Switching either slot to black or white suggests the better text option automatically.
WCAG 2.1 defines two conformance levels with numeric thresholds. Level AA, the standard legal and procurement benchmark, requires 4.5:1 for normal text and 3:1 for large text — 18.66px bold or 24px regular and above — plus 3:1 for meaningful UI components like input borders and icon buttons. Level AAA raises normal text to 7:1 and drops large text to 4.5:1. Common failures are predictable: gray placeholder text around 3:1, brand-colored buttons with white labels, and low-opacity text over images. Practical fixes that keep designs intact: darken the text rather than the background, reserve lighter grays for disabled states, and test overlays against the lightest and darkest image regions. The math is luminance-based, so the same pair can flip verdicts when either color's lightness shifts even slightly — which is why live checking during design beats batch fixing after.
Yes. Pick any two colors and it instantly calculates the WCAG 2.1 contrast ratio (range 1:1 to 21:1). AA compliance requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). AAA requires 7:1. The tool flags pass/fail for each level with specific remediation suggestions.
It converts between HEX (#3B82F6), RGB (59, 130, 246), HSL (217°, 91%, 60%), and displays the closest Tailwind CSS utility class. Copy any format with one click. The visual picker supports hue, saturation, lightness, and alpha channels for precise color selection without needing design software.
What do you call a crab that plays baseball?
No paywalls, no signups, no data sold. Built by a solo developer who believes useful tools should be accessible to everyone.
☕Support me on Ko-fi— keep tools free100% of proceeds go towards hosting & building more free tools.