One color, many notations
CSS can describe the same color in several ways. HEX (#4f46e5) and RGB (rgb(79 70 229)) give the red, green and blue channel values directly. HSL and HWB describe the same sRGB colors by hue plus saturation/lightness or whiteness/blackness, which is easier to adjust by hand. OKLCH (oklch(51.06% 0.2301 276.97)) is a newer, perceptually uniform space: equal steps in lightness actually look equal, and changing the hue does not secretly change how bright a color appears.
This converter reads whatever you paste — 3, 4, 6 or 8-digit HEX, legacy rgba(…, 0.5) or modern rgb(… / 50%) syntax, hsl(), hwb(), oklch(), oklab() and all 148 CSS named colors — and outputs every common format at once, each with its own copy button. Alpha is preserved throughout, and the preview shows translucent colors over a checkerboard.
Because a color is only useful if text on it is readable, the tool also calculates the WCAG 2 contrast ratio of the color against white and black and shows which conformance levels pass.
How to use the Color Converter
- Paste or type a color in any CSS format, use the native color picker, or click one of the examples.
- Adjust opacity with the alpha slider if you need a translucent version — HEX8, RGBA, HSLA and the other formats update together.
- Copy the format you need from the list. Toggle uppercase HEX to match your code style and rename the custom property line for your design tokens.
- Check the contrast cards to see whether the color works as text on white or black backgrounds.
Example
Indigo #4f46e5 written in every supported notation:
#4f46e5
rgb(79, 70, 229)
rgb(79 70 229 / 0.8)
hsl(243.4, 75.4%, 58.6%)
hwb(243.4 27.5% 10.2%)
oklch(51.06% 0.2301 276.97)
--brand-color: #4f46e5;Which format should I use?
- HEX — compact and universal; ideal for design tokens, WordPress theme settings and anywhere that does not need math.
- RGB / RGBA — handy when you need transparency in older code or want to read channel values. For focused conversions see HEX to RGB and RGB to HEX.
- HSL — best for hand-tuning: keep hue and saturation, change lightness for hover states and tints. Try RGB to HSL for a lightness scale.
- OKLCH — the modern choice for palettes and generated themes, because lightness is perceptually consistent across hues and it can express wide-gamut P3 colors. Supported in all evergreen browsers since 2023.
How the OKLCH value is calculated
Each sRGB channel is first linearised (the gamma curve is removed), then multiplied by Björn Ottosson’s matrices to get LMS cone responses, cube-rooted, and mixed into OKLab’s L, a and b. OKLCH is the polar form of OKLab: chroma is √(a² + b²) and hue is atan2(b, a) in degrees. Neutral greys have zero chroma, so their hue is shown as 0.
Frequently Asked Questions
Why does my HSL value not convert back to exactly the same HEX?
HEX and RGB store whole numbers from 0 to 255, while HSL uses percentages. Rounding HSL to whole numbers can move a channel by one step. This tool keeps one decimal place in HSL and HWB so values round-trip accurately.
What is HEX8?
An 8-digit HEX color adds an alpha channel as the last two digits: #4f46e580 is indigo at about 50% opacity (0x80 = 128 ÷ 255 ≈ 0.502). The 4-digit form #rgba is its shorthand. All modern browsers support both.
How is contrast calculated for transparent colors?
A translucent color looks different on every background, so the tool first blends it with white or black and then measures the WCAG relative-luminance contrast of the result. That matches what the reader actually sees.
What contrast ratio do I need?
WCAG 2 level AA requires 4.5:1 for normal text and 3:1 for large text (24px, or about 18.7px bold). Level AAA requires 7:1 and 4.5:1. Non-text UI parts such as input borders need at least 3:1.
Can I use OKLCH colors in production today?
Yes for current browsers — Chrome, Edge, Firefox and Safari all support oklch(). If you must support older browsers, declare a HEX or RGB fallback first and the OKLCH value on the next line; browsers that do not understand it keep the fallback.