About this tool
CSS and design tools represent color in several formats — HEX for compactness, RGB for direct red/green/blue values, HSL for intuitive hue/saturation/lightness adjustments. This tool converts any one of them into the other two instantly, with a live swatch preview and a WCAG contrast checker.
How it works
- Type a color in HEX, RGB, or HSL format, or use the native color picker.
- The tool detects the format, parses it, and computes the other two representations.
- Contrast ratios against white and black are shown with AA/AAA pass-fail labels.
Frequently asked questions
Does it support alpha/transparency values?
The current version parses the color channels (RGB/HSL) but doesn't factor in alpha — paste the rgba()/hsla() form and it'll read the first three values.
Why would I use HSL instead of RGB?
HSL separates hue from lightness and saturation, making it much easier to create consistent color palettes — e.g. keeping hue fixed while adjusting lightness for a shade scale.