What is a color format converter?

It's a tool that takes a color in one notation — HEX, RGB, HSL, HSV or CMYK — and instantly shows the same color in every other notation, ready to copy. You don't need to tell it the input format; it detects it automatically.

How do I convert HEX to RGB?

Paste the hex code (for example #FF5733) into the field. Each pair of hex digits is one channel in base 16, so FF=255, 57=87 and 33=51, giving rgb(255, 87, 51). The converter does this for you and shows the RGB value to copy.

Is converting between HEX, RGB and HSL lossless?

Yes — HEX, RGB and HSL all describe colors in the same sRGB space, so converting between them is exact apart from rounding HSL's decimals to whole numbers. RGB to HEX and back is perfectly lossless.

Why does the CMYK value look different from my print?

Screens mix light (additive RGB) while print mixes ink (subtractive CMYK), and the two gamuts don't fully overlap. The CMYK here is a generic conversion for reference — for accurate print, convert using your printer's ICC profile.

Can I convert many colors at once?

Yes. Switch to Batch mode, paste one color per line, and the tool converts the whole list into a table of HEX, RGB and HSL values you can scan and copy.

Is it free? Do I need to sign up?

It's completely free with no signup, no limits and no ads-in-the-way. Everything runs in your browser.

Color Format Converter

Convert any color between HEX, RGB, HSL, HSV, CMYK and OKLCH instantly — and copy ready-to-paste CSS, SCSS or Tailwind.

Color space

8-bit sRGB

Brightness

Light

Saturation

Vivid

Accessibility

Good

Color selection

Paste a HEX, RGB or HSL value — every format updates live.

HEX

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217.2, 91.2%, 59.8%)

Presets

Preview

Opacity steps and text-contrast readouts.

100%

75%

50%

25%

White text3.68:1Fail

Black text5.71:1Pass

All formats

HEX

#3B82F6

Hexadecimal color code

RGB

rgb(59, 130, 246)

Red, Green, Blue

RGBA

rgba(59, 130, 246, 1)

RGB + Alpha (opacity)

HSL

hsl(217.2, 91.2%, 59.8%)

Hue, Saturation, Lightness

HSLA

hsla(217.2, 91.2%, 59.8%, 1)

HSL + Alpha

HSV

hsv(217.2, 76%, 96.5%)

Hue, Saturation, Value

CMYK

cmyk(76%, 47.2%, 0%, 3.5%)

Cyan, Magenta, Yellow, Key

OKLCH

oklch(0.6231 0.188 259.81)

Perceptual L, Chroma, Hue

CSS Variable

--color-primary: #3b82f6;

CSS custom property

SCSS Variable

$color-primary: #3b82f6;

Sass variable

Tailwind Class

bg-[#3b82f6]

Arbitrary value class

Channel values

Red59 / 255

Green130 / 255

Blue246 / 255

Hue217.2° / 360°

Saturation91.2% / 100%

Lightness59.8% / 100%

CMYK values

Cyan76% / 100%

Magenta47.2% / 100%

Yellow0% / 100%

Key (black)3.5% / 100%

Color information

Relative luminance: 0.235
Temperature: Cool
Intensity: High
Accessibility: Good

Guide

Why designers and developers convert color formats

The same color shows up in many notations depending on where you are working. A brand color might live as a HEX code in a style guide, as RGB in a JavaScript canvas, as HSL when you are nudging lightness in CSS, and as CMYK when it goes to print. Converting by hand is slow and error-prone, so a converter that shows every format at once — and lets you copy the exact string you need — saves a real amount of time.

How to use this converter

Type or paste a value in any format (#FF5733, rgb(255, 87, 51) or hsl(11, 100%, 60%)), or click the swatch to pick visually. The format is detected automatically.
Read the equivalents in HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK and OKLCH, plus ready-made CSS variable, SCSS and Tailwind snippets.
Click any value to copy it to your clipboard.
Switch to Batch mode to paste a whole list of colors and convert them all into a table at once.

The color formats explained

Format	What it is	Best for
HEX	Base-16 `#RRGGBB` (optionally `#RRGGBBAA`)	CSS, design tools, the most common shorthand
RGB / RGBA	Red, green, blue channels 0–255, plus alpha	Canvas, image data, programmatic color
HSL / HSLA	Hue, saturation, lightness	Intuitive tweaks — lighten, darken, desaturate
HSV / HSB	Hue, saturation, value (brightness)	Color pickers and design software
CMYK	Cyan, magenta, yellow, key (black)	Print — a screen approximation only
OKLCH	Perceptual lightness, chroma, hue (CSS Color 4)	Even, perceptually-uniform lightness ramps

Conversion math at a glance

HEX and RGB are two ways of writing the same thing: each pair of hex digits is one channel in base 16, so #FF5733 is FF=255, 57=87, 33=51 → rgb(255, 87, 51). That conversion is exact in both directions. HSL and HSV are computed from the same RGB values with a bit of trigonometry, and CMYK is derived from RGB by subtracting each channel from the maximum. Because HEX/RGB and HSL describe colors in the same sRGB space, round-tripping between them is lossless apart from rounding to whole numbers.

Gotchas to watch for

Rounding. HSL and CMYK use decimals; rounding to whole numbers can shift a value by ±1, so prefer copying HEX or RGB when you need an exact match.
CMYK is an approximation.Screens are RGB (additive) and print is CMYK (subtractive). The CMYK shown here is a generic conversion — for production, use your printer's ICC profile.
Alpha. Plain HEX/RGB/HSL drop transparency. Use the RGBA, HSLA or 8-digit HEX outputs when you need opacity.
Gamut. OKLCH can describe colors outside sRGB; values here are clamped back into the sRGB gamut so they render correctly on standard displays.

Learn more

For the formal definitions of every CSS color notation, see the MDN <color> reference and the W3C CSS Color Module Level 4 specification.

Frequently asked questions

What is a color format converter?: It's a tool that takes a color in one notation — HEX, RGB, HSL, HSV or CMYK — and instantly shows the same color in every other notation, ready to copy. You don't need to tell it the input format; it detects it automatically.
How do I convert HEX to RGB?: Paste the hex code (for example #FF5733) into the field. Each pair of hex digits is one channel in base 16, so FF=255, 57=87 and 33=51, giving rgb(255, 87, 51). The converter does this for you and shows the RGB value to copy.
Is converting between HEX, RGB and HSL lossless?: Yes — HEX, RGB and HSL all describe colors in the same sRGB space, so converting between them is exact apart from rounding HSL's decimals to whole numbers. RGB to HEX and back is perfectly lossless.
Why does the CMYK value look different from my print?: Screens mix light (additive RGB) while print mixes ink (subtractive CMYK), and the two gamuts don't fully overlap. The CMYK here is a generic conversion for reference — for accurate print, convert using your printer's ICC profile.
Can I convert many colors at once?: Yes. Switch to Batch mode, paste one color per line, and the tool converts the whole list into a table of HEX, RGB and HSL values you can scan and copy.
Is it free? Do I need to sign up?: It's completely free with no signup, no limits and no ads-in-the-way. Everything runs in your browser.

Related tools

Color Picker

Pick any color visually and copy accurate HEX, RGB, HSL and CMYK codes — no signup.

Palette Generator

Generate harmonious color palettes from any base color — complementary, analogous, triadic and more, with instant CSS export.

Contrast Checker

Test color contrast against WCAG 2.1 AA/AAA — live pass/fail, font-size rules, and a real component preview.

Shade & Tint Generator

Generate 10–12 step tints and shades from any color — perfect 50–950 UI ramps with CSS and Tailwind export.

Brand Color Kit

Build a complete brand color system with semantic roles and 50–950 ramps — export CSS variables, Tailwind theme and design tokens.

Image Color Extractor

Upload any image and extract its dominant colors as HEX, RGB and HSL — palettes from photos and artwork in seconds.