Color Converter: HEX, RGB, HSL, OKLCH & More

Convert any color format in one step

Most color converters do one pair at a time — HEX to RGB here, RGB to HSL there. This one reads whatever you paste and shows all formats side by side, each with a Copy button. It understands everything your browser understands as a CSS color, plus the shortcuts people actually paste:

• HEX with or without #: #2563eb, 2563eb, short #fff, and 8-digit #2563eb80 with alpha.
• rgb() and hsl() in both syntaxes: rgb(37, 99, 235), rgba(37, 99, 235, 0.5), rgb(37 99 235 / 50%), hsl(221 83% 53%).
• Modern CSS colors: oklch(), oklab(), lab(), lch(), hwb() and color(display-p3 …).
• Named colors like tomato or rebeccapurple, a bare list like 37, 99, 235, or a hex number like 0x2563EB.

Choose Classic or Modern syntax for rgb() and hsl(): classic with commas works everywhere, including old tools and email clients; modern space-separated syntax is what current CSS specs use. Both are valid in every current browser. Copy link creates a URL that opens this page with your color.

HEX to RGB: how the conversion works

A HEX color is just the three RGB channels written in base 16. Split #2563eb into pairs — 25, 63, eb — and convert each pair from hexadecimal to decimal: 0x25 = 37, 0x63 = 99, 0xEB = 235. So #2563eb is rgb(37, 99, 235). Going back, write each channel as two hex digits. A 3-digit HEX doubles every digit (#fa0 = #ffaa00); in 8-digit HEX the last pair is alpha (80 = 128/255 ≈ 50% opacity).

The formats in the table

HEX, RGB and RGB 0–1

All three describe the same red, green and blue channels of sRGB, the standard color space of the web. HEX is the most compact for CSS; rgb() is easiest to read and tweak; the 0–1 float version is what shaders, game engines (Unity, Godot), SwiftUI and Android’s Color classes expect. Integer gives the same color as a single number — as hex (0x2563EB) and decimal, which some APIs such as Discord embeds require.

HSL, HWB and HSV/HSB

These rearrange RGB into a hue angle (0–360°) plus two values that are easier to adjust by hand. HSL uses saturation and lightness, HWB mixes in whiteness and blackness, and HSV/HSB (hue, saturation, value/brightness) is what Photoshop, Figma and most color pickers show. HSV is not a CSS format — don’t paste it into a stylesheet. Note that HSL lightness is not perceived lightness: hsl(60 100% 50%) (yellow) looks far brighter than hsl(240 100% 50%) (blue) at the same 50%.

OKLCH and OKLab

OKLCH is the color format modern design systems are moving to — Tailwind CSS v4 defines its whole palette in it. Its lightness L matches what the eye sees, so two colors with the same L really look equally light, and changing the hue H doesn’t suddenly make a color brighter or duller the way HSL does. C is chroma (colorfulness), from 0 (gray) to about 0.37. OKLab is the same space in rectangular coordinates (a = green–red, b = blue–yellow).

Lab and LCH

CIE Lab and its polar form LCH are older perceptual color spaces used in print, photography and color science. CSS lab() and lch() use the D50 white point, and so does this tool, so the values can be pasted straight into CSS.

CMYK

CMYK (cyan, magenta, yellow, key/black) is the ink model for printing. The values here come from the simple standard formula without an ICC printer profile. They are a useful starting point, but a print shop’s profile will give different numbers — for print-critical work, convert in your layout software with the profile your printer provides.

Wide-gamut colors and out-of-gamut warnings

oklch(), lab() and color(display-p3 …) can describe colors more saturated than sRGB can show — modern phones and Macs display them, older screens can’t. HEX, RGB and HSL are limited to sRGB, so such a color has no exact HEX equivalent. When you enter an oklch() or oklab() color outside sRGB, the tool says so and maps it into sRGB by lowering its chroma while keeping lightness and hue — the color stays recognizably the same, just a bit less vivid. A common example is Tailwind v4’s green-500, oklch(72.3% 0.219 149.579). For lab(), lch() and display-p3 input, your browser converts the color and clips what lies outside sRGB.

Readable text with your color

Below the table you see how well the color works as text on white and on black, as a WCAG contrast ratio. Body text needs at least 4.5:1 for WCAG AA. The link opens the Color Contrast Checker with your color filled in, where you get passing alternatives if it falls short. For shades, tints and matching colors, use the Color Palette Generator; for CSS gradients, the Gradient Generator.

Frequently Asked Questions

How do I convert HEX to RGB?

Paste the HEX code (with or without #) into the field above — the RGB value appears instantly. By hand: split the six digits into three pairs and convert each from base 16 to base 10, e.g. #ff6347 → ff = 255, 63 = 99, 47 = 71 → rgb(255, 99, 71).

How do I convert OKLCH to HEX?

Paste the oklch() value, for example oklch(62.3% 0.214 259.815), and copy the HEX row. If the color lies outside sRGB, the note above the table tells you and the HEX value is the closest sRGB color with the same lightness and hue. Lightness can be written as a percentage (62.3%) or a number (0.623).

Which color format should I use in CSS?

HEX and rgb() are still the most common and work everywhere. For design systems and themes, oklch() is the better choice: equal L values look equally light, so palettes and dark-mode variants stay consistent, and it can address wide-gamut colors. All current browsers support oklch().

How do I write a transparent color?

Add an alpha channel: rgb(37 99 235 / 50%), rgba(37, 99, 235, 0.5), hsl(221 83% 53% / 0.5) or 8-digit HEX #2563eb80. Paste any of them above and every format in the table keeps the alpha value.

What is the difference between HSL and HSV/HSB?

Both start from the same hue. In HSL, 100% lightness is always white and 50% is the pure color; in HSV, 100% value is the pure color at full brightness. Pickers in Photoshop and Figma use HSV/HSB, CSS uses HSL — so the numbers differ even for the same color. The table shows both.

Are HEX colors case-sensitive?

No. #2563EB and #2563eb are the same color. Lowercase is the usual convention in CSS.

Why does my color look different on different screens?

Screens differ in color gamut, calibration and brightness. A wide-gamut phone shows saturated colors more vividly than an older office monitor, and an uncalibrated screen can shift every color. For web work, check important colors on more than one device.