How to use
- Paste a color as a hex code,
rgb()/rgba(), orhsl()/hsla(), or pick one with the swatch next to the box. The format is auto-detected. - The preview shows the color with black and with white sample text on it; each carries its contrast ratio, labelled AA, AAA or a fail, and the better of the two is marked best.
- Read the HEX, RGB and HSL values under the preview, all computed from the same parsed color, and the Darker and lighter strip: the same hue in 10-point lightness steps.
- Click any value or any swatch in the strip to copy it; Load sample inserts a worked example.
One color, every format design tools expect
Design tools, CSS, and image editors each tend to default to a different color notation: a design file exports hex, a CSS-in-JS library wants an rgba() string, a design system's tokens are defined in HSL because it is easier for a human to reason about ("a bit darker" is just a lower lightness number). Converting by hand between them means re-deriving the math each time; this tool parses whichever one you paste and shows all three at once, plus whether it is safe to put text on top of.
Example
The color #3366ff is, in every format:
#3366ff
rgb(51, 102, 255)
hsl(225, 100%, 60%)and has a contrast ratio of 4.49 against black text and 4.68 against white text.
Options explained
- HEX / RGB / HSL are computed together from one parsed color; there is no separate "convert to" step, so pasting any one of the three immediately shows the other two.
- The preview's contrast badges (on the "Black text" and "White text" samples) apply the WCAG 2 formula to the color as a background, assuming plain black or white text on top. See the FAQ for what the AA/AAA labels and the best mark mean.
- Load sample inserts
#3366ff; Clear empties the box.
Edge cases and common errors
- Invalid hex digits.
#zzzstops with "Could not parse that as a color. Try a hex code (#3366ff), rgb(51, 102, 255), or hsl(225, 100%, 60%)": every character after the optional#must be 0-9 or a-f. - Wrong number of values.
rgb(1,2)stops with "Could not parse that as a color. Try a hex code (#3366ff), rgb(51, 102, 255), or hsl(225, 100%, 60%)":rgb()needs exactly three values (red, green, blue) and an optional fourth (alpha);hsl()needs hue, saturation and lightness the same way. - A bare hex-looking word is accepted as a color. Because the leading
#is optional, a 3, 4, 6 or 8-letter word made only of the letters a-f and digits (likecafe,deadorbeef) parses as a color rather than being rejected as text. This is intentional (it lets you paste a hex value straight from a tool that omits the#), but it means this box is not a safe way to detect "is this string definitely a color". - HSL round-trip rounding: see the FAQ.
- Percentage and slash syntax both work in
rgb():rgb(100%, 0%, 0%)andrgb(255 0 0 / 50%)(the modern space-and-slash form, alongside the older comma form) both parse. - Alpha only shows where it matters. A fully opaque color's hex is 6 digits and its RGB/HSL have no fourth value; add any alpha below 1 (via
rgba(),hsla(), or an 8-digit hex) and all three outputs grow an alpha component to match. - Contrast of a translucent color is shown as if it were solid, and the badges say "(as solid)". A contrast ratio needs one opaque color, and a translucent color only becomes one once it is laid over something:
rgba(255, 0, 0, 0.3)over white is a pale pink, over black a dark maroon. Check the final blended color instead if the background is known. The color picker also has no alpha, so picking a color always gives an opaque one.
Do the same thing in code
// CSS itself understands all of these natively: no conversion needed at all
// if the value only needs to reach a browser:
.button { background: #3366ff; }
.button { background: rgb(51, 102, 255); }
.button { background: hsl(225, 100%, 60%); }Conversion only matters once something other than CSS needs the value in a specific format: a design token file, an image-processing library, or a contrast check like the one this page runs.