Free Color Converter

Five Different Ways of Naming the Same Pixel

A converter that handles HEX, RGB, HSL, HSV and CMYK is touching five quite different ways of describing the same perceptual phenomenon. They were invented by different people, in different decades, for different machines, and with different priorities. Sliding a value from one notation to another looks like trivial arithmetic (and on the surface it usually is) but the histories explain why each notation exists at all, and the math explains why round-tripping between them is not always lossless.

HEX, Base-16 Shorthand for sRGB Triples

Hexadecimal color notation predates CSS by some years on workstations and in graphics file formats, but its universal web meaning was nailed down by the CSS1 Recommendation that the W3C published on 17 December 1996. CSS1 was the work of Håkon Wium Lie and Bert Bos: Lie had proposed Cascading Style Sheets while at CERN in October 1994, and Bos joined the project at INRIA in July 1995. Before CSS, HTML 1.0 had no notion of color at all, its initial set of 18 tags was strictly structural. A hex color is a three-byte (or four-byte, with alpha) integer that the browser splits into red, green and blue channels. The 6-digit form #RRGGBB gives each channel an 8-bit value, 0-255, encoded in two hex digits. The 3-digit shorthand #RGB is exactly equivalent to the 6-digit form with each digit doubled, so #F0A and #FF00AA are the same color. CSS Color Module Level 4 formally added 4-digit (#RGBA) and 8-digit (#RRGGBBAA) forms with an alpha channel, where 00 is fully transparent and FF is fully opaque. Browser support landed in Chrome 62, Firefox 49, Safari 10 and Edge 79, so as of 2026 it is essentially universal. Hex is popular because it is short, copy-pasteable, and unambiguous, background: #1e90ff survives copy/paste between Figma, VS Code, Slack and email without anyone needing to think about whitespace or commas.

RGB: Maxwell's Three-Color Principle, Made Digital

The "RGB" idea) that any color the eye sees can be matched by mixing controlled amounts of three primary lights, predates color photography. James Clerk Maxwell first proposed it in his 1855 paper "Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness," delivered to the Royal Society of Edinburgh. Six years later, on 17 May 1861, Maxwell demonstrated the principle in public: he had the photographer Thomas Sutton make three black-and-white plates of a tartan ribbon, each shot through a red, green or blue filter, and then projected the three plates back through the same filters onto a screen. The superimposed projections produced a recognizably colored image, the world's first colour photograph by additive synthesis. Maxwell's additive RGB became the foundation of every electronic display ever since. Modern web RGB specifically means sRGB, the "standard RGB" color space proposed by Hewlett-Packard and Microsoft in 1996 (authors Michael Stokes and Ricardo Motta of HP, Matthew Anderson and Srinivasan Chandrasekar of Microsoft) and standardized as IEC 61966-2-1:1999. The motivation was prosaic: the early web needed a color space simple enough to assume by default, robust enough to look acceptable on cheap CRTs, and small enough not to bloat image files. Twenty-five years later it is still the default working space of every browser, every JPEG and every PNG that does not carry an embedded ICC profile. In CSS, RGB is written rgb(255, 0, 153) (legacy comma syntax) or rgb(255 0 153) (modern space-separated, per CSS Color Level 4).

HSL and HSV, Alvy Ray Smith's Perceptual Axes

RGB is excellent for hardware (a display literally has red, green and blue sub-pixels) and useless for human intuition. Nobody tweaks a web design by reasoning that they want "twelve more units of green and seven fewer of red." Designers think in terms of hue (which color), saturation (how vivid), and lightness (how bright). The conversion was formalized by Alvy Ray Smith in his SIGGRAPH 1978 paper "Color Gamut Transform Pairs," published in the August 1978 issue of Computer Graphics, pages 12-19. Smith was at the New York Institute of Technology Computer Graphics Lab, having previously worked at Xerox PARC. The paper noted that the RGB-to-HSV transform had already been "used successfully for about four years" in frame-buffer painting programs by the time it was published, Smith was documenting working practice, not inventing it from scratch. He was co-awarded the SIGGRAPH Computer Graphics Achievement Award in 1990 for, among other things, "the HSV (aka HSB) color space model." HSL and HSV share a hue axis (an angle, 0°-360°, around a color wheel: 0° red, 120° green, 240° blue) and a saturation axis (0% gray to 100% pure), but they differ in their third axis. HSV (Hue, Saturation, Value) treats V as the maximum of the RGB channels, pure white requires V=100% AND S=0%, pure red is V=100%, S=100%; both white and red live at the top of the cylinder. HSL (Hue, Saturation, Lightness) treats L as the midpoint of the lightest and darkest channels, pure white is L=100% regardless of S, pure red is L=50%, S=100%; white lives at the top of the cylinder, the most vivid colors live at the equator. HSL was specifically chosen for CSS because its symmetry around L=50% matches how designers think about tints and shades.

CMYK, The Printer's Subtractive Model

While monitors emit light (additive: more is brighter, all three at full = white), ink absorbs light (subtractive: more is darker, all three at full = black, in theory). Four-color process printing (cyan, magenta, yellow, plus a black "key" plate) was first used commercially in the 1890s for color newspaper illustrations. The Eagle Printing Ink Company is generally credited with the first true four-color wet-ink process in 1906. The "K" comes from "key" (the plate that registers all the others, traditionally the black detail plate), not from "black", which is why the model is CMYK and not CMYB. The key plate exists for four practical reasons: combining 100% C, M and Y in real ink yields a muddy dark brown, not a true black, because real pigments are not perfectly pure; three-color blacks waste ink and slow drying; wet three-color blacks make paper buckle and tear; and type and fine outlines need a single high-contrast plate for crispness.

The Conversion Math, Briefly

HEX ↔ RGB is trivial, split the hex string into three two-character substrings and parse each as a base-16 integer with parseInt(hex, 16); reverse with n.toString(16).padStart(2, '0'). RGB → HSL is max/min math: chroma = max(R,G,B) − min(R,G,B); lightness = (max + min) / 2; saturation = chroma / (1 − |2L − 1|); hue is computed via a piecewise formula that picks the dominant channel and translates its position into an angle in one of six 60° sectors of the hue circle. (Some implementations use atan2, but Smith's 1978 paper deliberately avoided trigonometry for performance reasons (atan2 was an expensive instruction on a 1970s frame buffer) and the piecewise formula has stuck around because it gives the same answer faster.) HSL → RGB reverses the process via a piecewise linear mapping with chroma and an offset that translates the chroma triplet onto the right point of the lightness axis. RGB ↔ HSV uses the same skeleton but with a different vertical axis: V = M instead of L = (M+m)/2, and S = Δ/M instead of the lightness-aware divisor. RGB ↔ CMYK uses the simple formula K = 1 − max(R,G,B), then C, M, Y as (1 − channel − K) / (1 − K). This is mathematically self-consistent but does not describe how any real printing press will reproduce the color, see the print caveat below.

The Round-Trip Problem

Convert #7A3D5C (HEX) → HSL → HEX. You will not necessarily get #7A3D5C back. The reasons are entirely pedestrian. Integer truncation: HEX channels are integers 0-255; HSL conversions produce floats; rounding (1, 121.987, 47.512) to integers loses sub-pixel information that the round-trip cannot recover. Float64 imprecision: JavaScript's only numeric type is the IEEE 754 double-precision binary float, with a 52-bit mantissa giving roughly 15-17 significant decimal digits, plenty for a single conversion but accumulates if you chain many operations. Asymmetric maps: multiple distinct (R,G,B) triplets can map to the same (H,S,L) triplet when the chroma is zero (any gray has hue undefined; conventions choose H = 0 or preserve the previous H). For a pragmatic browser tool, this is fine, the user typed #7A3D5C, sees (322°, 32%, 36%) in HSL, and gets #7A3D5C (or #7A3E5D, off by one) back. As long as the displayed swatch matches what the eye expects, the trip is good. But it is worth being honest: lossless round-trip is not guaranteed.

Modern CSS Color Spaces Beyond sRGB

For decades, "web color" meant sRGB and only sRGB. That assumption broke in 2015, when Apple shipped the late-2015 iMac as "the first consumer computer with a built-in wide-gamut display" supporting Apple's Display P3 color space. P3 originated as DCI-P3, defined in 2005 by the Digital Cinema Initiative for theatrical projection. Apple's Display P3 variant kept DCI's primaries but switched the white point to D65 (matching sRGB's) and adopted sRGB's tone-reproduction curve to make it suitable for desktop/mobile viewing rather than darkened theaters. Display P3's gamut is roughly 25% larger by surface area than sRGB and lets phones and laptops show measurably more vivid reds and greens. To let CSS describe colors outside sRGB, the W3C's CSS Color Module Level 4 introduced the color() function with an explicit color-space parameter: color(srgb 1 0.5 0.2), color(display-p3 1 0.5 0.2), color(rec2020 1 0.5 0.2). Predefined color spaces include srgb, srgb-linear, display-p3, a98-rgb (Adobe RGB), prophoto-rgb, rec2020, xyz, xyz-d50 and xyz-d65. On a normal sRGB display, an out-of-gamut P3 color gets gamut-mapped down to the closest sRGB equivalent the display can show.

CSS Color Level 4 also added lab(), lch(), oklab(), and oklch() first-class functions. lab() and lch() use the CIE 1976 L*a*b* color space, standardized by the Commission Internationale de l'Éclairage in 1976, the first widely deployed perceptually-uniform color space, with a* and b* axes corresponding to red-green and blue-yellow opponent pairs that match how the human visual system actually encodes color. In December 2020, Swedish developer Björn Ottosson published "A perceptual color space for image processing" on his blog and introduced Oklab. Ottosson had spent years in the game industry doing simple color manipulations and concluded that every existing color space failed at it in some way. Oklab is tuned specifically for image-processing operations: gradients between two Oklab colors stay perceptually smooth, and lightness adjustments in Oklab feel like lightness adjustments to the human eye. The cylindrical form, OKLCH, is what most designers actually write. Oklab was added to CSS Color Level 4 a year after the blog post, in December 2021, and is now the default interpolation space for CSS gradients in browsers that implement Color Level 4. The Tailwind CSS v4 color palette is generated from OKLCH coordinates. The color-mix() function (CSS Color Module Level 5) shipped in Safari 16.2 (December 2022), Chrome 111 (March 2023) and Firefox 113 (May 2023), making it baseline-available across browsers since May 2023.

Color Theory Mini-History

Web color converters sit at the end of a 360-year arc of trying to understand color systematically. The notable milestones: Newton (1665-66) used a glass prism to split sunlight into the visible spectrum and identified seven colours in his Opticks. Goethe (1810) published Theory of Colours, an anti-Newtonian treatise more interested in the perceptual and emotional dimensions of colour than its physics, wrong on the science but right that perception matters. Maxwell (1855/1861) as covered above. Itten (1961) published The Art of Color at the Bauhaus, codifying the 12-hue colour wheel and the seven types of colour contrast still taught in design schools today. Pantone (1963) introduced the Pantone Matching System (PMS), turning colour communication between designers and printers into a numbered catalogue, a Pantone number meant exactly the same colour at any printer in the world that subscribed to the system. The web colour stack inherits from all of these traditions: Newton gives us the visible spectrum, Maxwell the additive primaries, Itten the design-school vocabulary of complementary and analogous schemes, Pantone the practical fact that a number can stand for a perceptual experience.

Accessibility: WCAG Contrast on Whatever You Pick

Once you have a colour, you need to know whether you can put text on top of it. WCAG 2.1 Success Criterion 1.4.3 (Contrast, Minimum) requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (defined as 18pt / 24 CSS pixels regular, or 14pt / 19 CSS pixels bold). The contrast ratio is computed from relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour's luminance and L2 the darker, and luminance is a weighted sum of the gamma-decoded R, G, B channels with weights 0.2126, 0.7152 and 0.0722 (matching human eye sensitivity to those wavelengths). WCAG 2.1 SC 1.4.6 (Enhanced) raises the bar to 7:1 normal / 4.5:1 large for AAA conformance. WCAG 2.1 SC 1.4.11 covers non-text contrast (UI components, focus indicators, graphical objects required for understanding) at 3:1. The newer APCA (Advanced Perceptual Contrast Algorithm) is a research-stage replacement that better matches perceived contrast for body text and is being evaluated for WCAG 3, it returns a directional Lc value where ±60 is the rough equivalent of WCAG's 4.5:1. Always check colour pairs against the actual contrast formula, not your eyeball; designers consistently overestimate how readable low-contrast pairings are.

The Honest Print Caveat: Naive CMYK Is Not Real CMYK

The simple K = 1 − max(R,G,B) formula every browser converter uses is mathematically self-consistent, round-trip RGB → CMYK → RGB returns the same RGB exactly, modulo floating-point. But it does not describe how any real printing press will reproduce that colour on paper. A real RGB-to-CMYK conversion needs three things this tool cannot ship: a target ICC profile (defining the printer + paper combination, coated paper absorbs ink differently from uncoated, and high-end commercial presses run different profiles from desktop inkjets), a rendering intent (perceptual, relative colorimetric, saturation, absolute colorimetric, they trade off how out-of-gamut colours get squeezed in), and a real colorimetric model (CIE Lab as the device-independent middle layer, with full ICC profile lookup tables on each side). This is what Adobe Photoshop does behind its CMYK conversion menu and what professional prepress software (Esko, Heidelberg Prinect, Caldera) does for production work. The naive formula is fine for understanding the relationship between additive and subtractive colour models, and useful for first-pass colour exploration, but if you are sending files to a commercial printer, do the conversion in Photoshop (or your printer's preferred tool) with the right ICC profile loaded, the visible difference can be substantial.

Named Colors and the Rebeccapurple Story

CSS3 ships 147 named colors (148 if you count the alias aqua = cyan), inherited from a mix of the original 16 HTML 4 named colours and the X11 Window System's longer list. The most recently added named colour has a story. On 7 June 2014, web standards advocate Eric Meyer's daughter Rebecca died of an aggressive form of brain cancer the day after her sixth birthday. Rebecca's favourite colour was purple. Within days, members of the CSS Working Group (led by editor Tab Atkins Jr.) proposed adding rebeccapurple (#663399) to the CSS Color Level 4 spec as a named colour, in her memory. The colour was added in June 2014 and shipped in browsers shortly after. The hex value was specifically chosen as the value Eric Meyer himself had used on his website. rebeccapurple is now in every browser's named-colour table, the only memorial colour in the CSS specification, and a reminder that the dry technical specifications of the web are written by people who notice when one of them is grieving.

Frequently Asked Questions

Which format should I use in CSS?

All three primary formats work in modern CSS. HEX is the most compact and widely used, great for static colours where you've picked a value once and want to copy it everywhere. RGB is helpful when you need to compute values programmatically or work with image data (the canvas API speaks RGB natively). HSL is best when you want to create design-system colour variations, adjust lightness or saturation while keeping the hue locked, which is how Tailwind's colour palette builds its full ramps. For 2026 design systems, OKLCH (in CSS Color Level 4) is increasingly the right answer for new work, it interpolates perceptually-smoothly between any two colours, which matters for gradients and smooth ramp generation.

What's the difference between #FFF and #FFFFFF?

Three-digit hex is shorthand where each digit is doubled: #FFF = #FFFFFF, #09C = #0099CC, #F0A = #FF00AA. Both are valid CSS but the six-digit form supports all 16,777,216 sRGB colors while the three-digit form supports only 4,096 (every channel constrained to 16 distinct values). Three-digit hex is concise but slightly limited; six-digit is the full sRGB palette. CSS Color Module Level 4 also defines four-digit and eight-digit forms (with alpha), where #F008 expands to #FF000088 and #F00 expands to #FF0000.

Can I convert colors with transparency (alpha)?

This tool currently focuses on opaque colors. For alpha, CSS supports rgba(r, g, b, a), hsla(h, s%, l%, a), and 8-digit hex (#RRGGBBAA) as separate notations; CSS Color Level 4 also lets you write rgb(r g b / a%) and hsl(h s% l% / a%) with a slash-separated alpha. The 8-digit hex form has been baseline-available since approximately 2017 (Chrome 62, Firefox 49, Safari 10).

Will my CMYK conversion match what comes off the printer?

Probably not exactly. The simple math this tool uses is colorimetrically self-consistent (RGB → CMYK → RGB returns the same RGB) but does not account for the ICC profile of your specific printer + paper combination, the rendering intent (perceptual, relative colorimetric, etc.), or the dot-gain characteristic of the press. For print-bound work, do the final CMYK conversion in Photoshop or your printer's preferred tool with the right ICC profile loaded, the visible difference between a naive conversion and a profile-aware one can be substantial, especially for saturated reds and blues at the edge of the CMYK gamut.

What about OKLCH and the modern CSS color spaces?

Modern CSS supports oklab(), oklch(), lab(), lch() and color(display-p3 ...) for wider-gamut and perceptually-uniform colour work. Browser support for those is baseline since roughly 2023 (Safari 16.4, Chrome 111, Firefox 113 for oklch(); color() with named spaces shipped slightly earlier in Safari). They're not yet shown in this converter, partly because the math is harder to display in compact form (Lab has signed axes that don't map to a 0-100% slider) and partly because most current production workflows still target sRGB. If you're working in a modern design system that uses OKLCH (Tailwind CSS v4, for example), use that system's tooling for colour generation; this converter is the right answer for legacy sRGB work.

Is my data sent anywhere?

No. Color conversion is pure arithmetic, there's nothing the server could do that your browser can't. Every conversion runs locally in JavaScript. You can verify in DevTools' Network tab while you change the colour: there are no outbound requests. Take the page offline (airplane mode) after it loads and the converter will still work.

Related Tools