DevLab
◉
Colors⭐ Popularbeginner

Color Converter

convert between HEX, RGB, HSL, HSB, and CMYK color formats

By Bikram NathLast updated

Paste any color in HEX, RGB, HSL, HSB/HSV, or CMYK and all remaining formats update instantly. The typical use is bridging Figma and CSS: input HSL(217, 91%, 60%) and immediately read the HEX (#4A90E2) or RGB equivalent. Unlike single-direction tools, this surfaces all five formats at once, so you can pull a CMYK approximation for print without opening a second tool.

Try it now — free, instant, no signup

What is Color Converter?

This tool takes a single color value and computes its equivalent in all four other formats simultaneously. Enter rgb(74, 144, 226) and you immediately see #4A90E2, HSL(211, 74%, 59%), HSB(211, 67%, 89%), and an approximate CMYK breakdown. The conversion runs on the page using standard arithmetic, so there is no network call and no rate limit to hit.

Developers typically reach for this instead of RapidTables or Colorhexa when they need more than two formats in one step, or want to stay in a browser tab during design handoff rather than switching sites. For programmatic conversion inside a build pipeline, a library like chroma-js or tinycolor2 is the right choice; this tool is for the interactive, one-off lookup.

One important caveat about CMYK: the values shown are a mathematical approximation derived from RGB, not a device-specific ICC-profile conversion. Photoshop and InDesign apply color management against a print profile (SWOP, GRACoL, or vendor-specific), so their CMYK numbers will differ from what you see here. If your print vendor requires profile-accurate CMYK, export from Illustrator with the correct profile attached.

When to use Color Converter

✓Translate a Figma HSL token into its HEX equivalent to paste directly into a CSS design-token or Tailwind config file.
→Debug a styling mismatch by entering the on-screen hex code and checking whether the resulting HSL lightness aligns with your expected token.
⚡Verify that a web color has a sensible CMYK breakdown before forwarding brand assets to a print vendor for physical production.

Expert Notes

When converting between color spaces, be aware that RGB→HSL→RGB round-trips can introduce floating-point drift that changes the hex value by 1 step — irrelevant visually but can break exact color equality checks. The `oklch` color space (now in CSS Color Level 4) is perceptually uniform, meaning equal numeric distance produces equal perceived brightness difference, which makes programmatic palette generation more predictable than HSL. Hex shorthand (#FFF) is exactly equivalent to #FFFFFF but some SVG parsers and older email clients don't support the 3-digit form.

DevLab's Take

The go-to tool when you grab a hex color from a design file and need HSL values for a CSS custom property or Tailwind config — once you're generating design tokens programmatically, use a library like `chroma.js` or `culori` instead.

Frequently Asked Questions

Why do different tools return slightly different HSL values for the same HEX input?
Floating-point rounding is the culprit. Converting HEX to RGB gives integer channel values (0 to 255), and dividing those by 255 produces fractions that get rounded to different decimal places depending on the implementation. A computed hue of 211.3 rounds to 211, but 211.7 might round to 212. Both are faithful representations of the same color. For most UI work this is irrelevant. For programmatic round-tripping where precision matters, use chroma-js, which exposes full floating-point channel values before any rounding occurs.
Is HSB the same as HSV, or is there a real difference?
They are the same color model under two names. HSB (Hue, Saturation, Brightness) is the label Adobe uses in its color pickers. HSV (Hue, Saturation, Value) is the academic and more widely cited term. Both use identical math and produce identical numbers. Neither is the same as HSL, which is what CSS functions like hsl() and color-mix() actually accept. The distinction matters in practice: a fully saturated red is HSB/HSV(0, 100%, 100%) but HSL(0, 100%, 50%), because the third channel means something different in each model.
Why does the CMYK output differ from what Photoshop or Illustrator shows for the same color?
Browser-side conversion uses a direct arithmetic formula from RGB channel values with no color profile applied. Photoshop and Illustrator convert using an ICC profile, typically U.S. Web Coated SWOP v2 or a vendor-specific profile, which adjusts CMYK values to account for ink behavior on paper. Pure red rgb(255, 0, 0) gives CMYK(0, 100, 100, 0) mathematically, but with a SWOP profile Photoshop might output something closer to (4, 99, 96, 0). If profile-accurate CMYK is required by a print vendor, export from a profile-aware application rather than relying on browser-computed values.
Does this tool support eight-digit HEX or rgba() values that include an alpha channel?
No. The tool works with the five opaque formats described: six-digit HEX, RGB (three integer channels), HSL, HSB/HSV, and CMYK. Eight-digit HEX (#RRGGBBAA) and CSS alpha variants like rgba() or hsla() are not in scope. A practical workaround: strip the last two characters from an eight-digit HEX to isolate the opaque color, convert that, then manage the alpha byte separately in your CSS using the opacity property or a color-mix() call with a transparency argument.
If I convert HEX to HSL and then convert HSL back to HEX, why do I sometimes get a slightly different HEX?
Each conversion step rounds intermediate values back to integers, and rounding error accumulates across two hops. HEX channels are integers in 0 to 255, hue is typically rounded to whole degrees in 0 to 360, and saturation and lightness are rounded to whole percentages. So #1E3A5F might convert to HSL(213, 52%, 24%) and then back to #1E3A60, off by one in the blue channel. This is expected arithmetic behavior, not a bug. If lossless round-trips are required, keep the color in floating-point RGB throughout your pipeline and round only at the final output step.

Related Tools

Colors
Color Contrast Checker
check WCAG color contrast ratio for accessibility compliance
Colors
Color Palette Generator
generate harmonious color palettes from a base color
Colors
Color Shades Generator
generate tints and shades of any color for design systems
CSS
CSS Gradient Generator
generate CSS linear, radial, and conic gradients visually

Learn more

◉
Color Spaces Explained: RGB, HSL, HEX, and Beyond
Understand how computers represent color. Learn the differences between RGB, HSL, HEX, HSV, and OKLCH — and when to use each one.
◉
Color Contrast for Developers: WCAG Rules and How to Check
Learn the WCAG contrast requirements for text, icons, and interactive elements — and how to test contrast ratios in your projects.
◉
Number Bases Explained: Binary, Octal, Decimal, and Hex
Understand how number systems work — from binary and octal to decimal and hexadecimal — with practical examples for developers.
◉
Bitwise Operations for Web Developers
A practical guide to AND, OR, XOR, NOT, and bit shifting — with real use cases like feature flags, permissions, and colour manipulation.