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.
Web accessibility thresholds from the W3C. AA requires a contrast ratio of at least 4.5:1 for normal body text (3:1 for large text ≥18pt); AAA, the stricter tier, demands 7:1. This checker scores your foreground/background pair live and tells you which levels pass, so buttons and text stay readable for low-vision users — and legally safe under accessibility rules like the European Accessibility Act.
You do not have to — pick a color once and the tool displays all formats simultaneously: HEX for design files, RGB for rgba() transparency work, and HSL for building palettes (its hue/saturation/lightness axes map to how humans actually adjust color). The values are mathematically equivalent representations of the same sRGB color.
The last two digits are alpha (opacity): #3B82F6 is fully opaque, #3B82F680 is the same blue at 50% transparency. 8-digit hex works in all modern browsers and CSS, and is often clearer than rgba() because the base color stays visually recognizable in the code.
HEX for shared design tokens (compact, universally understood), rgba() when you need to compute transparency from a base color, and HSL when palettes are derived programmatically (rotate hue, adjust lightness). Consistency inside a project matters more than the format itself — mixing three formats for the same variable is how contrast bugs slip in.
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.
Why did the fish get bad grades?
No signups, no data sold. The core of every tool is free forever — the optional Pro plan adds batch processing, unlimited downloads, white-label exports and an ad-free experience.
☕Support me on Ko-fi— keep tools free100% of proceeds go towards hosting & building more free tools.