Pick colors, convert formats, check WCAG contrast.
#16214drgb(22, 33, 77)hsl(228, 56%, 19%)hsv(228, 71%, 30%)cmyk(71%, 57%, 0%, 70%)#ffffffrgb(255, 255, 255)hsl(0, 0%, 100%)hsv(0, 0%, 100%)cmyk(0%, 0%, 0%, 0%)The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
This free color picker combines two jobs designers and developers do constantly: converting a color between formats and checking whether two colors meet WCAG contrast requirements. Choose a foreground and a background color with the visual picker or by typing a HEX value, and the tool instantly shows each color as HEX, RGB, HSL, HSV, and CMYK with a copy button next to every format.
The contrast checker calculates the WCAG contrast ratio between your two colors and grades it against all four common thresholds: AA for normal text (4.5:1), AA for large text (3:1), AAA for normal text (7:1), and AAA for large text (4.5:1). A live sample renders real sentences in both regular and large bold text on your chosen background, so you can judge readability with your own eyes rather than trusting a number alone. That makes it a quick way to validate button labels, body copy, and brand palettes before they ship.
Everything runs in your browser with no signup. It is handy mid-task — grabbing the HSL version of a brand HEX code for a CSS variable, getting CMYK values for a print handoff, or proving to a stakeholder that light gray text on white fails accessibility. Teams using ReSlug often run their brand colors through the checker before applying them to custom QR codes and landing pages.
Click the color swatch in the Foreground card to open the visual picker, or type a 3 or 6 digit HEX code into the HEX field.
Do the same in the Background card. Both colors update the contrast results as you change them.
The Contrast card shows the exact ratio plus pass or fail badges for AA and AAA at normal and large text sizes.
The Sample text card renders sentences in your color pair at body and large sizes so you can confirm legibility visually.
Each card lists the color as HEX, RGB, HSL, HSV, and CMYK with a Copy button beside every value.
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text is defined as at least 18 point (about 24 px), or 14 point (about 18.7 px) if bold.
AAA is the stricter conformance level: it requires 7:1 for normal text and 4.5:1 for large text. Most organizations target AA as the legal and practical baseline and treat AAA as an enhanced goal.
The ratio compares the relative luminance of the lighter color to the darker one using the WCAG formula. It ranges from 1:1, identical colors, to 21:1, pure black on pure white.
Both describe a color by hue, but HSL uses saturation and lightness while HSV uses saturation and value. In HSL full lightness is always white; in HSV full value is the pure hue at its brightest, which many design tools use for their pickers.
CMYK is the subtractive color model used by printers, describing a color as percentages of cyan, magenta, yellow, and black ink. If your design will be printed, handing off CMYK values avoids surprises when an RGB screen color is converted at the print shop.
No, contrast is only one WCAG criterion. You should also avoid relying on color alone to convey meaning, and test focus states, text sizing, and screen reader behavior separately.
ReSlug lets you create custom-colored QR codes on Pro plans. Match your brand on every share.