Color Converter (HEX, RGB, HSL)
Convert colours between HEX, RGB and HSL in real time, with a live swatch, WCAG contrast ratings against white and black, and one-click copy for CSS values.
Color Converter
Convert between HEX, RGB and HSL — and check contrast against white and black.
Accepts #4F46E5, #abc, rgb(79, 70, 229) or hsl(243, 75%, 59%).
#4F46E5rgb(79, 70, 229)hsl(243, 75%, 59%)On white: 6.29:1 — AA (normal text)
On black: 3.34:1 — AA (large text only)
Most readable text on this color: #FFFFFF
How to use
The whole flow runs in your browser — nothing is uploaded.
- Choose a colourUse the native colour picker, or type a HEX/RGB/HSL value into any field.
- Read every formatHEX, RGB and HSL stay in sync, with a live swatch and CSS string.
- Check contrastWCAG contrast ratios against white and black show if text will be readable.
- CopyOne click copies a CSS-ready value.
- Every step runs locally in your browser.
Key Features
Convert colours between HEX, RGB and HSL with a live preview. Everything runs client-side on your own device.
- Live synchronisationEdit any field and the others update immediately.
- CSS-ready outputCopy #rrggbb, rgb(...) or hsl(...) straight into your stylesheet.
- Most readable text colourEach colour reports whether white or black text reads better on it.
- Contrast checkWCAG ratios against white and black for accessible text colours.
Frequently asked questions
HEX (3, 4, 6 and 8 digits), RGB, RGBA, HSL and HSLA. Alpha is shown when a value carries transparency.
Relative luminance is computed to WCAG 2.1 and the ratio against white and black is shown, with the 4.5:1 normal-text threshold flagged.
Yes — paste into any of the HEX, RGB or HSL fields, including CSS syntax like rgb(37 99 235).