Runs in your browser
Color Picker
Pick a color visually or type one in, and read it back as HEX, RGB, RGBA, HSL, HSLA, and OKLCH, with the WCAG contrast ratio against a background color you choose — all computed locally in your browser.
RGB
HSL
Formats
HEX: #3d4bb0
RGB: rgb(61, 75, 176)
RGBA: rgba(61, 75, 176, 1)
HSL: hsl(233, 49%, 46%)
HSLA: hsla(233, 49%, 46%, 1)
OKLCH: oklch(0.461 0.1602 272.5)
CSS: color: #3d4bb0;
background-color: #ffffff;
Contrast checker (WCAG 2.x)
Sample text
Contrast ratio: 7.42:1Normal text:AAA passLarge text:AAA pass
ReadyColor ToolsFree · No account required
Related tools
Features
- Pick visually, or type a HEX value directly
- Edit RGB, HSL, or alpha and every other format updates to match
- Read-only OKLCH conversion using the standard published matrices
- WCAG 2.x contrast ratio against a background you choose, with AA/AAA pass indicators
- Copy any format — HEX, RGB, RGBA, HSL, HSLA, OKLCH, or a ready-to-paste CSS snippet
How to use
- Pick a color with the swatch, or type a HEX/RGB/HSL value.
- All formats update together automatically.
- Set a background color below to check contrast for text on that background.
- Copy whichever format you need.
FAQ
- What is OKLCH, and why is it here?
- OKLCH is a newer, perceptually uniform color space supported by modern CSS (Safari, Chrome, and Firefox all support the oklch() function). Unlike HSL, equal changes in its lightness value look equally different to the eye, which makes it useful for building color scales. It's computed with the standard published OKLab conversion matrices.
- How is the contrast ratio calculated?
- Using the WCAG 2.x relative luminance formula on both colors, then the standard (L1 + 0.05) / (L2 + 0.05) ratio. AA requires 4.5:1 for normal text (3:1 for large text); AAA requires 7:1 (4.5:1 for large text).
- Does this send my color values anywhere?
- No — every conversion and the contrast calculation happen locally in your browser with plain math, not a server call.