Color Converter
One value in, every format out: HEX, RGB, HSL, LAB, LCH, OKLCH and CMYK.
mid soft red
Nearest CSS name indianred · ΔE₀₀ 6.51
rgb(192, 87, 70) · hsl(8.4, 49.2%, 51.4%)
Every format
Click a value to copy it| Space | Value | Notes |
|---|---|---|
| HEX | The default for design tools and CSS. | |
| HEX + alpha | Eight digits, last pair is opacity. | |
| RGB | Channels from 0 to 255. What the screen receives. | |
| RGB (CSS 4) | Modern space separated syntax with slash alpha. | |
| HSL | Hue, saturation, lightness. Easy to reason about. | |
| HWB | Hue plus whiteness and blackness. | |
| CMYK | Subtractive, for print. Uncalibrated. | |
| CIELAB | Device independent, perceptually organized. | |
| LCH | CIELAB in polar form. | |
| OKLab | A better behaved perceptual space. | |
| OKLCH | The best choice for design tokens today. | |
| XYZ (D65) | The CIE reference space. |
Tonal scale
Generated in OKLCH · the ring marks your color's stepA ready replacement for a design system's color ramp, like a Tailwind shade scale. Lightness follows a fixed ladder and chroma tapers towards both ends, which is what stops the 50 and 950 steps looking artificial.
Channel breakdown
Every channel, in every space
RGB
HSL
HSV
CMYK
LAB
LCH
OKLCH
Tints, shades and tones
Five steps each way
Tints: mixed towards white
Shades: mixed towards black
Tones: mixed towards gray
Variations and color vision
Complement, muted, grayscale and CVD
Related colors
Simulated color vision deficiency
The nearest CSS keyword is indianred (#CD5C5C), a perceptual distance of ΔE₀₀ 6.51 away. Close, but a trained eye would tell them apart.
Paste a color in whatever form you have it: a hex code from a design file, an rgba() value from a stylesheet, a CSS keyword or an oklch() value from a modern token set. You get every other representation, ready to copy. The tonal scale underneath turns a single brand color into the full 50 to 950 ramp a design system needs.
How to convert HEX to RGB
A six digit hex code is three pairs of base 16 numbers, one each for red, green and blue. Convert each pair to decimal and you have the RGB value: in #2F6F68, 2F is 47, 6F is 111 and 68 is 104, so the color is rgb(47 111 104). Going the other way, RGB to HEX, turns each channel from 0 to 255 back into two hex digits. The converter does both instantly and also reads three, four and eight digit hex codes.
Which color format should you use?
HEX and RGB describe what the screen emits and are understood everywhere. HSL is easier to adjust by hand but its lightness does not match what the eye sees. OKLCH fixes that, which makes it the best choice for design tokens, color ramps and gradients in modern CSS. CMYK is for print, and LAB and LCH are the classic perceptual spaces used in color science and image editing.
A Tailwind color shades generator for any color
The tonal scale builds a 50 to 950 ramp from the color you paste, the same shape Tailwind CSS and most design systems use. The steps are generated in OKLCH, so each one is a perceptually even step lighter or darker, and chroma tapers towards both ends so the lightest and darkest shades never look chalky or neon.
How to use the color converter
- Paste any colorHEX with three, four, six or eight digits, rgb(), hsl(), hsv(), cmyk(), lab(), lch(), oklab(), oklch(), or one of the 148 CSS color keywords.
- Copy what you needEvery output row copies to the clipboard on click.
- Take the whole rampThe tonal scale is generated in OKLCH from your color, so the steps are perceptually even rather than mathematically even.
Common questions
How do I convert a hex code to RGB?
Split the six digit hex code into three pairs and convert each pair from base 16 to decimal. #FF8000 becomes 255, 128 and 0, which is rgb(255 128 0). Paste the hex code above and the converter shows the RGB value along with every other format.
What is the difference between HSL and HSB/HSV?
Both start from hue. HSL's lightness runs from black through the pure hue at 50% to white at 100%. HSV's value runs from black at 0% to the pure hue at 100%, and you reach white by dropping saturation instead. Photoshop and Figma pickers use HSV; CSS uses HSL.
Should I use OKLCH in production CSS?
Yes, in most projects. OKLCH is supported in every current major browser. It is the best available space for generating consistent ramps and for gradients that do not turn gray in the middle. Keep a hex fallback if you support older browsers.
Why does my CMYK conversion not match my printer?
The conversion here is the simple arithmetic one, with no color profile. Real print work depends on the specific press, paper and ink set, described by an ICC profile such as FOGRA39 or SWOP. Use this to get in the right neighborhood, then let your printer's profile do the final conversion.
What does an eight digit hex code mean?
The last two digits are alpha. #FF000080 is red at 50% opacity. Four digit hex is the same idea in shorthand, so #F008 expands to #FF000088.
The rest of the toolkit
Every tool reads the same color formats, so you can carry a value straight from one to the next.