Free tool · runs in your browser
Color Converter
Paste a HEX, RGB or HSL color to see every common notation and how it reads against white and black backgrounds.
Same color, different notation
HEX and RGB describe the same additive red, green and blue channels. HSL re-expresses them as hue, saturation and lightness, which is easier to reason about when you want a lighter tint or a more muted shade of the same hue.
Use HEX in CSS and design tools, RGB when you need channel values, and HSL when adjusting a palette. Convert back to HEX before handing a color to a printer or a system that expects a hex string.
Contrast decisions, not decoration
The contrast ratio compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). WCAG guidance uses 4.5:1 for normal text (AA), 3:1 for large text and interface boundaries, and 7:1 for AAA normal text.
Check the direction that matches your design: dark text on a light card needs the ratio against white, light text on a dark card needs the ratio against black. The tool shows both.
HSL is convenient, not perceptual
Equal steps in HSL lightness do not look equally bright across hues; yellow at 50% lightness looks much lighter than blue at 50%. For perceptually even palettes, use a perceptual color space such as OKLCH or CIELAB. HSL remains excellent for quick, predictable tweaks.
Frequently asked questions
Does it support alpha transparency?
The parser reads rgb/rgba and hsl/hsla input but treats the color as opaque. Alpha compositing depends on the background, so it is not calculated here.
Which input formats are accepted?
Three- and six-digit HEX with or without a leading #, rgb()/rgba() with space or comma separators, and hsl()/hsla() with percentage saturation and lightness.
Is the contrast check a compliance guarantee?
No. It computes the standard WCAG contrast ratio, but compliance also depends on font size, weight, text rendering and the final background. Use it as a quick check, then verify in a dedicated audit.
Why do HSL values differ between tools?
Rounding, hue normalization and the handling of grayscale colors can differ slightly. The underlying color is the same when the RGB channels match.
Can I use the output in CSS?
Yes. Copy the HEX, RGB or HSL string directly into a stylesheet. No attribution is required.