The Complete Guide to HEX, RGB, HSL & HSV Color Conversion

Every color on a digital screen is, at the bottom, three numbers — how bright the red, green, and blue subpixels are. So technically you only need RGB. But four formats — HEX, RGB, HSL, HSV — coexist in design systems, CSS, photo editing apps, and brand guidelines, and converting between them is the single most common color-tooling task that designers and engineers do. This guide explains what each format actually represents, when to reach for which, how the underlying math works, and the batch-conversion workflow that turns "convert one color" from a one-minute interruption into a paste-and-copy. The HEX Converter on ScreenTools implements all of this; this article is the why and the how.

Why four formats exist

A color you see on screen is fundamentally three subpixel intensities. So why do we need more than one way to write the same color? Because each format is the natural notation for a different question.

HEX is the most compact form — six hex digits encoding three byte-sized channels. It's the canonical CSS value, the brand-guide format, and the form designers memorize the way phone numbers used to be memorized. #3b82f6 is shorter than any other representation of that blue, fits in a brand sticker, and is exactly two bytes per channel which makes copy-paste trivial.

RGB is the same information as decimal numbers — rgb(59, 130, 246). The decimal form wins when you want to programmatically nudge one channel ("make it 10% less red") or when the audience isn't fluent in hex. RGB with an alpha — rgba(59, 130, 246, 0.8) — is the standard CSS way to express transparency.

HSL (Hue / Saturation / Lightness) reorganizes the same color around perceptual axes. hsl(217, 91%, 60%) says "a blue (hue 217°), 91% saturated, 60% lightness." The reorganization is what makes HSL the form to use when you want to keep the color but change its mood — make it darker (lower L), more pastel (lower S), or shift it 30° around the color wheel. HSL is also the most natural form for generating accessible color systems — once you know the HSL of your primary, the accessible variants are mostly lightness adjustments away.

HSV (Hue / Saturation / Value) is similar to HSL but defines Value as "the brightness of the brightest channel" instead of "the midpoint between brightest and darkest." Photoshop, Sketch, and most image-editing apps use HSV because it matches how a hardware color picker (with a hue wheel + saturation/value square) works visually. When you pick a color from Photoshop's wheel, you're scrubbing through HSV space.

Most production workflows touch all four. A brand guide hands you a HEX; you reach for HSL to nudge it into an accent variant; you copy out the RGB for a SwiftUI gradient; you check the HSV when comparing against a reference photo. A converter that always shows all four lets you skip the constant mental jumps.

When to use which format

A practical decision tree for picking the format you should output:

• Embedding in CSS, SVG, or a design file → HEX. It's the canonical form everything understands. The few cases where it loses (transparency, gradients) drop to RGBA naturally.
• Programmatically nudging one channel → RGB. "Set red to 200" is one number replacement; the same operation in HEX requires parsing and re-formatting.
• Generating accessible palettes → HSL. Lightness directly affects WCAG contrast, so generating a 4.5:1-against-white version of a brand color is a few HSL lightness clicks.
• Picking from a wheel UI / image editor / Photoshop → HSV. Matches the affordance.
• Cross-platform handoff (SwiftUI / Android / Flutter) → RGB. Native platform color initializers all take three integer channels; HEX needs string parsing first.
• Brand guideline document → HEX as primary, with RGB and HSL listed for engineers.

A good converter shows you all four at once so you don't have to switch tools while picking the right one for the task.

How the math actually works

All four formats are pure mathematical transformations of each other — no lookup tables, no perceptual models, no color profiles. The implementation in lib/color-conversion.ts is 130 lines of TypeScript with zero dependencies, and the formulas are the same ones in the W3C CSS Color Module Level 4 and the Wikipedia HSL / HSV reference.

HEX ↔ RGB is trivial. Every two hex digits is one channel in base 16. #3b82f6 → R = 0x3b = 59, G = 0x82 = 130, B = 0xf6 = 246. Going back, each integer channel becomes two hex digits with zero-padding. The only subtle thing is supporting the 3-digit short form (#abc → #aabbcc).

RGB → HSL is more interesting. Normalize each channel to 0–1 by dividing by 255. Find the max and min of the three normalized values. Their difference is the chroma. Lightness is (max + min) / 2. Saturation is chroma divided by either (1 - |2L - 1|) — this is the term that makes saturation correctly 0 for both pure white and pure black, which are by definition achromatic. Hue is computed from which channel is the maximum and where the other two sit, walking through six 60-degree wedges of the color wheel.

RGB → HSV uses the same max/min approach but defines Value = max channel directly and Saturation = chroma / Value. This makes HSV easy to picture as a cylinder — H rotates around it, S is distance from the central axis, V is height.

Going back (HSL → RGB or HSV → RGB) inverts the formulas. Modern color libraries — chroma-js, colord, and the ScreenTools implementation — all use IEEE-754 double precision throughout, so a round-trip HEX → HSL → HEX returns the original HEX (within ±1 per channel from integer rounding; this is the documented tolerance every popular color library shares).

No magic, no proprietary algorithms. Any two color libraries that follow the W3C spec will give you the same numbers.

Batch mode — the unsung killer feature

The 80% workflow most converters optimize for is "I have one color, I need it in a different format." Real production work is more often "I have 30 colors from a design file, I need them all in CSS-ready format."

Batch mode is the answer: paste a list of colors (one per line, any format), get back a table of all four formats for every entry. This is what the HEX Converter's batch mode does:

Input:
#3b82f6
#10b981
rgb(245, 158, 11)
hsl(258, 90%, 66%)

Output:
| Input              | HEX     | RGB                 | HSL              | HSV              |
| #3b82f6            | #3b82f6 | rgb(59, 130, 246)   | hsl(217, 91, 60) | hsl(217, 76, 96) |
| #10b981            | #10b981 | rgb(16, 185, 129)   | hsl(160, 84, 39) | hsl(160, 91, 73) |
| rgb(245, 158, 11)  | #f59e0b | rgb(245, 158, 11)   | hsl(38, 92, 50)  | hsl(38, 96, 96)  |
| hsl(258, 90%, 66%) | #8b5cf6 | rgb(139, 92, 246)   | hsl(258, 90, 66) | hsl(258, 63, 96) |

The use cases:

• Design system token migration — paste a Tailwind config color section, get RGB for native handoff
• Brand palette in a slide deck — paste the HEX list from a brand guide, copy the RGB column for the deck designer
• Audit a legacy CSS file — paste 50 colors, scan the HSL column for accessibility (any L < 30% on white background needs review)
• Photo edit handoff — convert HSV samples from Photoshop into HEX for CSS variables

For one-off conversion, the single-color mode is faster (no list overhead). For more than 3-4 colors, batch wins. The HEX Converter ships both modes in tab form so you switch without losing context.

Who uses this

Designers moving brand colors between Figma, Sketch, and engineering handoff. Brand guides traditionally list HEX; engineers building native apps want RGB or HSL; the design-system token JSON wants all three. The converter is the canonical "produce all three formats from any one" tool.

Front-end engineers translating design files into CSS. The mockup gives you rgba(59, 130, 246, 0.8); you need the equivalent solid HEX (drop the alpha and re-encode); you need to know if the design's HSL puts it into your existing palette's accessibility band; you need to be able to write the HSL version for a CSS color-mix function. Pasting the source color into the converter answers all three in one screen.

Accessibility auditors scanning a site's color palette. Convert the full color list to HSL, sort by lightness, flag any pair where the lightness delta puts them below the WCAG 4.5:1 threshold. The batch mode is what makes this scanning practical.

Marketers + content keeping brand colors consistent across decks, social posts, and CSS overrides. One paste, four formats, copy what you need.

Students in design or color theory courses — verify the relationships between formats (the same color in HEX and HSL look completely different but represent the same point in color space), build intuition by typing in known colors and observing the math.

Comparison with the Color Picker

The Color Picker and HEX Converter both deal in HEX / RGB / HSL / HSV, but they're optimized for different jobs.

Color Picker is the interactive surface. It has the system eyedropper (sample any pixel on screen via Chrome's EyeDropper API), a color preview swatch with smart contrast text, a saved palette that persists in localStorage, and a shareable URL. Use it when you're sampling colors from the wild or working on a single color iteratively.

HEX Converter is the reference utility. It has the four-format display, the batch table, copy buttons next to every value. Use it when you have colors in hand and need them in a different format, especially when you have a list.

They share the conversion math (both use the same lib/color-conversion.ts) but the surrounding UX is different. Most weeks you'd use both — Picker when you're sampling, Converter when you're translating.

Comparison with desktop tools

Desktop tools like Sip, ColorSlurp, and Photoshop's color panel cover this ground for paid users. The 80% case — convert this HEX to RGB — is faster in any of them because they're always one keyboard shortcut away. The browser-based converter wins on:

• Zero install — no setup, no licence, runs on any OS in any browser
• Batch mode — most desktop tools handle one color at a time
• Shareable URL — send ?v=ff0000 to a teammate, they see the exact same color
• Free — Sip is $10, ColorSlurp Pro is $9.99/year

If you're doing 30 minutes/week of color work, install Sip. If color work is occasional, the browser converter is enough.

FAQ

Which CSS color formats does the converter accept as input? HEX (3- or 6-digit, with or without #), rgb(R, G, B), hsl(H, S%, L%), and hsv(H, S%, V%). The parser tolerates commas or spaces between channels. Comma-or-space-separated rgb(59 130 246) works the same as rgb(59, 130, 246).

Does the converter handle alpha (transparency)? The HEX Converter ships solid-color conversion only (no alpha). The Color Picker also focuses on solid colors. For rgba(R, G, B, A) workflows, drop the alpha to get the solid color, convert it through the four formats, then re-add the alpha at the output.

How accurate is the conversion? All math runs in IEEE-754 double precision and is round-trip safe to ±1 per channel (the standard tolerance for integer-rounded color libraries). This is the same accuracy a desktop tool produces.

Where do my colors go? Nowhere. Everything runs in the browser, no upload, no logging, no tracking. The shareable URL puts the current color into the address bar so you can bookmark or share it; nothing else leaves the page.

What about wide-gamut color spaces (P3, Rec.2020)? Out of scope for this converter. The HEX / RGB / HSL / HSV space is sRGB — the universal web color gamut. If you're working in P3 or Rec.2020, you need a color-management-aware tool (built into Photoshop, ColorSync utility, or programmatic libraries like culori.js).

Is there an API? The math library lib/color-conversion.ts is plain TypeScript with zero dependencies. Fork it for your own project; the format conversion functions are 60 lines of straightforward code following the W3C spec.