About this tool
A color arrives as HEX from a design tool, appears as RGB in existing CSS and is defined in HSL or OKLCH in a design system. This tool works out which notation you pasted and shows every other one at the same time — there is no format picker to set first.
Alpha is handled throughout. Paste `#rrggbbaa` or an `rgba()` value and the transparency is carried into every other notation; move the alpha slider and all of them update together.
Below the conversions you get the contrast ratio against white and black text, with the WCAG AA and AAA verdicts, so you can judge legibility while you are still choosing the color.
How to use it
- Paste a color into the input: `#3f51b5`, `rgb(63 81 181)`, `hsl(231 48% 48%)` and `rebeccapurple` all work.
- The format is detected automatically and every other notation is listed.
- Press copy on any row to put that notation on your clipboard.
- Drag the alpha slider to work with transparency.
Features
Automatic detection
Recognizes HEX (3, 4, 6 and 8 digits), rgb(), rgba(), hsl(), hsla(), hwb(), oklch() and CSS color names.
One input, every output
Enter a color once and every supported notation appears at the same time. There is no format to pick first.
Alpha support
Transparency is preserved across conversions and can be adjusted with a slider.
Contrast ratios
See the ratio against white and black along with the WCAG AA and AAA results.
Frequently asked questions
What is OKLCH?
A newer CSS color notation designed around human perception. Changing lightness keeps the perceived hue stable, which makes it well suited to building color scales. It is supported in all major browsers.
Which CSS color names are supported?
All 148 named CSS colors, plus `transparent`.
Are the conversions exact?
HSL and OKLCH values carry decimals and are rounded for display, so converting back can shift a value by less than a single unit. The difference is not visible on screen.
How is the contrast ratio calculated?
Using the WCAG 2.1 definition. For normal-size text, 4.5:1 meets AA and 7:1 meets AAA.