Color Converter
Type or pick a color to get every notation at once, with a live swatch and contrast ratios.
Stays in your browserCSS Color 4WCAG 2.2As of 2026.10.03
Input
How to use Color Converter
- 1Type a color such as #2F5BEA, rgb(47 91 234), or rebeccapurple, choose one with the color picker, or press Sample.
- 2Check the swatch and the value in each notation. Turn on Contrast to see the WCAG ratios.
- 3Press the Copy button on the row you need.
Color Converter options
- Input
- The notation is detected automatically: HEX with 3, 4, 6, or 8 digits, rgb(), hsl(), hwb(), oklch(), oklab(), and CSS color names. HEX is also read without the leading #.
- Contrast
- Shows the contrast ratio against white, black, and a color you enter, with WCAG AA and AAA results for normal and large text. On by default.
- Color picker
- The browser's color picker writes the color you choose into the input as HEX.
CSS Color 4 notation
The results use the modern syntax of CSS Color Module Level 4: values separated by spaces, and alpha after a slash, as in rgb(47 91 234 / 0.5). The older comma form rgb(47, 91, 234) and rgba() are still accepted as input.
OKLCH describes a color by lightness, chroma, and hue in the Oklab color space. Equal steps in lightness look equal to the eye, which makes it easier to build a palette than with HSL. It can also describe colors that sRGB screens cannot show, which is why some OKLCH inputs are marked Outside sRGB.
Contrast ratio
The ratio follows the WCAG 2.2 contrast formula: the relative luminance of the lighter color plus 0.05, divided by that of the darker color plus 0.05. It ranges from 1:1 for two identical colors to 21:1 for black on white. Pass and fail are decided before rounding, so a color at 4.48:1 does not pass AA even though it is close to 4.5:1.
Color Converter examples
HEX to RGB, HSL, and OKLCH
Input
#2F5BEA
Output
rgb(47 91 234) hsl(226 82% 55%) oklch(53.3% 0.221 265.8)
HEX with alpha
The alpha byte 80 is 128/255 = 0.502. Alpha is shown with two decimals, so it becomes 0.5.
Input
#2F5BEA80
Output
rgb(47 91 234 / 0.5)
A CSS color name
Input
rebeccapurple
Output
#663399
Not a color
G is not a hexadecimal digit.
Input
#GGG
Output
Not a valid color
Examples use the reference cases this tool is tested against.
Color Converter: frequently asked questions
Is my input sent to a server?
No. Your input and the result are processed only in this browser and are not stored. Reloading the page clears them.
How are the values rounded?
RGB channels are integers. HSL and HWB use whole degrees and whole percentages. OKLCH lightness has one decimal, chroma three, and hue one. Alpha has two decimals. Because of this rounding, converting a value back can differ by a step or two from the original.
What happens to an OKLCH color that sRGB cannot show?
It is marked Outside sRGB. The tool keeps the lightness and hue, lowers the chroma until the color fits in sRGB, and shows that nearest color in every notation.
What do AA and AAA mean?
They are the contrast levels of WCAG 2.2. AA needs a ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1. Large text is 24px or more, or 18.66px or more in bold.
Can I use the CMYK values for print?
No. They come from a simple formula with no color profile, so they do not match what a press produces. For print, convert with an ICC profile in your design software.
Related tools
How it works · Standards
- Processed in: this browser (your device). Nothing is sent or stored.
- Standards: CSS Color 4 · WCAG 2.2
- Engine: culori 4.0.2 (MIT) · ZEKILO Dev notation and contrast code (in-house code)
- HEX is written in lowercase.
- rgb(), hsl(), and hwb() values outside their range are clamped, as browsers do.
- The contrast of a semi-transparent color is measured as it appears on each background.
- As of 2026.10.03
- Changelog: 2026.10.03 First release