Every color format,
one converter.
Paste a HEX code, type RGB values, dial in HSL, or enter CMYK percentages. Hextly converts across all four formats in real time — entirely in your browser.
Open ConverterCSS Color Module Level 4 §5 has been a W3C Candidate Recommendation since 2022. It defines four primary color notations for web authors: hex, rgb()/rgba(), hsl()/hsla(), and the newer lab() and lch() functions. Hextly converts between the first three plus CMYK. CMYK isn't a CSS notation; it's a print-industry subtractive ink model formalized through ISO 12647-2.
Four formats, two color models
HEX, RGB, and HSL describe the same screen colors in different notation. They share one model: additive sRGB, the gamut IEC 61966-2-1 standardized in 1996 as the default for monitors, the web, and Windows. CMYK is subtractive, four-channel, paper-bound, and only meaningful once you nail down paper stock, ink set, and a dot-gain curve through an ICC profile like US Web Coated SWOP v2 or GRACoL 2013.
That distinction is what makes the table below useful.
| Format | Channel ranges | CSS notation | Underlying spec | What conversion loses |
|---|---|---|---|---|
| HEX | 6 digits, 00-FF per channel | #RRGGBB or #RGB shorthand | CSS Color Level 3 §4.2.1 | Nothing vs rgb() integer form; both encode the same 24-bit sRGB triple |
| RGB | 0-255 integers or 0%-100% per channel | rgb(R G B) or rgb(R, G, B) | CSS Color Level 4 §5.1 | Sub-integer precision when round-tripping from HSL; alpha if you drop the a form |
| HSL | hue 0-360, saturation 0%-100%, lightness 0%-100% | hsl(H S% L%) | CSS Color Level 4 §5.2, algorithm §6.3 | RGB precision through floating-point H/S/L and integer rounding back; achromatic hue pinned to 0 |
| CMYK | cyan, magenta, yellow, key each 0%-100% | not a CSS notation; device-cmyk() is a Level 5 draft | ISO 12647-2, Adobe formula for math-only | Gamut: roughly 30-40% of sRGB lands outside US Web Coated SWOP; without an ICC profile, paper and ink behavior is ignored |
What each conversion drops or rounds
HEX to RGB is the cleanest hop. Each two-digit hex pair parses as one base-16 integer from 0 to 255, and the triple round-trips back exactly. The three-digit shorthand expands by digit-doubling, so #F3A becomes #FF33AA, not #F03A0A. Hextly strips the optional leading #.
RGB to HSL is where things get messy. The W3C algorithm in CSS Color Level 4 §6.3 normalizes the three channels to 0-1, takes the maximum and minimum, derives lightness as (max + min) / 2, then derives saturation and hue from the spread. For an achromatic color, where R, G, and B are equal, hue is undefined and the algorithm pins it to 0. Coming back, HSL to RGB multiplies fractional channel results by 255 and rounds to the nearest integer. A color that lives between two integer slots, common after a HSL hue tweak, won't round-trip cleanly. rgb(123, 97, 255) becomes hsl(252.85, 100%, 69.02%), and rounding either side shifts the other by 1 unit.
HEX, RGB, and HSL all live inside the same sRGB gamut, so conversions are precision-limited, not gamut-limited. CMYK is the opposite. The math-only formula Hextly uses, the Adobe naive conversion, computes K = 1 - max(R, G, B) / 255 then C = (1 - R/255 - K) / (1 - K) and so on. The output is device-independent, which sounds reassuring and is exactly the problem: real presses are device-dependent. Without an ICC profile, the conversion ignores total ink limit (300% on coated, 240% on uncoated), dot gain, paper white, and gray component replacement. The number is correct as a desk-side reference; it isn't a separation. For anything heading to a press, run the file through Photoshop or Illustrator with a proper output intent attached.
CSS Color Level 4 also introduces 147 named colors in §6.1.1 plus transparent and currentcolor, lifted from the X11 palette via SVG 1.1. Hextly doesn't parse names; the point of a format converter is the math.
How Hextly parses tolerant input
During the build, the failure mode that came up repeatedly was paste-in noise. Designers copy HEX out of Figma with a stray space, a trailing comma, or wrapped in quotes from a JSON token file. The HEX field accepts #7B61FF, 7B61FF, lower-case variants, the three-digit #7BF, and the same surrounded by whitespace. The RGB field accepts 123, 97, 255, rgb(123, 97, 255), rgb(123 97 255) (the space-separated CSS Color Level 4 syntax), and the rgba() variants. HSL accepts those plus the bare three-number form 255 100% 69% that Tailwind reads from globals.css as --primary: 255 100% 69%.
The history bar holds 16 entries in localStorage rather than the 10 most converters cap at. The number got picked after watching a designer cycle through brand-adjacent swatches and lose the original after the eleventh tweak.
FAQ
How do I convert a HEX color to RGB by hand?
Split the 6-character HEX after the hash into three two-character pairs — one each for red, green, and blue. Interpret each pair as a base-16 number and convert to base-10. For example, #7B61FF: 7B = 7*16 + 11 = 123, 61 = 6*16 + 1 = 97, FF = 15*16 + 15 = 255. That gives rgb(123, 97, 255). Three-digit shorthand like #7B6 expands to #77BB66 by doubling each character. Hextly accepts either form with or without the leading #, normalizes internally, and emits every other format in the same operation so you never have to do the longhand unless you want to.
Why does my CMYK conversion look different in Photoshop than in Hextly?
Photoshop applies ICC color profiles that describe the specific press, paper, and ink set your print shop uses — US Web Coated SWOP, Japan Color 2001, GRACoL, and so on. Each profile produces a different CMYK translation because printing is a physical process with paper-specific gamut limits. Hextly uses the standard device-independent conversion formulas (K from 1 - max(R,G,B)/255, CMY scaled accordingly), which is mathematically correct but ignores profile adjustments. Use Hextly for quick cross-referencing and on-screen approximation; use profile-aware software for anything destined for a press run.
What HEX formats does Hextly accept?
Hextly parses 6-digit HEX with or without a leading # (e.g. #7B61FF or 7B61FF), 3-digit shorthand which expands by doubling each character (#7B6 becomes #77BB66), and 8-digit HEX which includes an alpha channel as the last two characters (#7B61FFCC = 80% opacity purple). Mixed case is fine. Whitespace is trimmed. Invalid characters trigger an inline validation hint instead of silent failure, so you can catch typos immediately.
What is the difference between HSL and HSB/HSV?
HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) share a hue axis but diverge on the second and third axes. In HSL, 100% lightness always means white regardless of hue; saturation describes vividness at a fixed lightness. In HSB, 100% brightness at 100% saturation is the pure vivid color (red at hsb(0,100,100) is pure red, not white). CSS natively uses HSL via the hsl() function; Adobe Photoshop and Illustrator use HSB in their color pickers. Hextly emits HSL because it maps directly to the CSS property; if you need HSB, convert via HSL as an intermediate.
Does Hextly work offline?
Yes. Hextly is a static export with zero runtime server dependencies — once the page has loaded, every conversion runs in your browser through JavaScript number parsing and arithmetic. No color you paste is transmitted anywhere. Color history is saved to localStorage, which stays on your device. Install the page as a PWA from your browser's address bar and it will continue working with no network connection.
Why are there so many ways to write the same color in CSS?
CSS accumulated color formats over three decades. Named keywords like tomato came first (140 of them), HEX arrived with HTML 3.2, rgb() and hsl() shipped with CSS3, and recent additions like oklch(), lab(), and color() bring perceptually uniform and wide-gamut options. Each has tradeoffs: HEX is terse but opaque about relationships between colors; hsl() is intuitive for designers adjusting a hue by degrees; rgb() matches what the graphics pipeline stores. Hextly emits HEX, RGB, HSL, and CMYK so you can grab whichever format your target tool prefers without a second step.
Does Hextly send my colors or clipboard data anywhere?
No. All conversions run in your browser through pure JavaScript math. The last 16 colors you entered are saved to localStorage so they appear in the recent-history bar between visits, and nothing else is persisted or transmitted. There are no accounts, no analytics tied to specific color values, and no server round-trips on any conversion. Close the tab and the only trace is the localStorage entry, which you can clear from your browser's site data settings.