Color Converter: HEX, RGB, HSL & OKLCH

Paste a HEX, RGB, HSL, or OKLCH color and instantly get every other format, ready to copy.

Runs 100% in your browser

Shortcuts

Copy the output: Alt + Shift + C

Your input is saved in this browser only. Reset clears it.

Accepts HEX, RGB, RGBA, HSL, or HSLA

HEX

Web / design tools

#3B82F6

RGB

CSS

rgb(59, 130, 246)

RGBA

CSS with alpha channel

rgba(59, 130, 246, 1)

HSL

Intuitive CSS

hsl(217, 91%, 60%)

HSLA

CSS with alpha channel

hsla(217, 91%, 60%, 1)

OKLCH

Modern CSS (wide-gamut P3)

oklch(62.3% 0.188 259.8)

How to use the Color Format Converter

Paste a color in any supported format, or use the color picker.
See it converted to HEX, RGB, HSL, and OKLCH.
Copy the format you need.

Example: One color in every format

Input

#3366cc

Output

#3366CC
rgb(51, 102, 204)
rgba(51, 102, 204, 1)
hsl(220, 60%, 50%)
hsla(220, 60%, 50%, 1)
oklch(53.2% 0.1679 262.3)

HSL makes tweaks obvious: keep the hue at 220 and change lightness to get a lighter or darker version of the same blue.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

They describe the same sRGB colors in different notations. HEX and RGB give red, green, and blue channel values. HSL uses hue, saturation, and lightness, which makes it far easier to create a lighter or more muted version of a color by changing one number.

What is OKLCH and should I use it?

OKLCH is a perceptual color space: lightness, chroma, and hue. Equal changes in its lightness look equally different to the eye, so scales and hover states stay consistent across hues. It's supported in current browsers and can express colors outside sRGB; provide a HEX fallback if you support older ones.

How do I convert HEX to RGB by hand?

Split the six digits into three pairs and read each as a hexadecimal number: #3366CC is 0x33 = 51, 0x66 = 102, 0xCC = 204, so rgb(51 102 204). A three-digit shorthand doubles each digit, so #36C is #3366CC.

What does the alpha value mean?

Alpha is opacity, from 0 (transparent) to 1 (opaque). In HEX it's an optional fourth pair of digits (#3366CC80 is about 50%), and in the functional notations it follows a slash, as in rgb(51 102 204 / 50%). Remember that a semi-transparent color's real contrast depends on what's behind it.

About the Color Format Converter

Color formats are a constant friction point. Figma gives you hex, your CSS uses hsl(), your design tokens are in oklch(). Every time you cross a tool boundary you're converting manually, or Googling a converter that may or may not handle edge cases correctly.

How to Create a Website Color Palette in 5 Steps shows where HSL values come in when you build a palette from one brand color.

Paste any color here in any format and all the others show up instantly with copy buttons. No dropdown to switch, no button to click first.

Supported formats

HEX

The one everything understands. Figma, Sketch, browsers, CSS. The safe default when you just need something that works everywhere.

#3b82f6

RGB / RGBA

How screens actually mix colors. The alpha channel in RGBA is useful when you need transparency directly in CSS.

rgb(59, 130, 246)

HSL / HSLA

The most readable format for making quick adjustments. Tweak hue, saturation, or lightness independently without touching the others.

hsl(217, 91%, 60%)

OKLCH

Worth switching to if you're building design tokens. Its lightness axis is perceptually uniform — two colors at equal L values actually look equally bright. HSL doesn't do that.

oklch(65.7% 0.178 249.8)

On OKLCH

If you're building a design token system, OKLCH is worth a look as your source format. Two colors at the same HSL lightness often look noticeably different in brightness. Two OKLCH colors at the same L value actually look the same. That makes building accessible, visually consistent scales a lot more predictable.