Color Converter

HEX vs RGB vs HSL, What's the Difference?

HEX represents a color as a 6-digit code (like #2A2E5A), where each pair of digits encodes red, green, and blue in base-16. It's compact and is the most common format in CSS and design tools.

RGB expresses the same color as three numbers from 0-255, one each for red, green, and blue light intensity. It's more readable than hex if you're thinking in terms of how much of each color channel is mixed in.

HSL stands for Hue, Saturation, Lightness, a more intuitive way to think about color for design work. Hue is the color itself (0-360° around a color wheel), saturation is how vivid or muted it is, and lightness is how close it is to black or white. HSL makes it easy to create variations of a color, like a lighter or more muted version, just by adjusting one number.

Edit any field, the HEX text box, any of the three RGB numbers, or any of the three HSL numbers, and every other format updates instantly to match, along with the live color swatch above.

A Worked Example: Converting the Same Color Three Ways

Take this tool's default color, #2A2E5A. Splitting the hex code into its three pairs, 2A, 2E, and 5A, and converting each from base-16 to base-10 gives red = 42, green = 46, and blue = 90, so #2A2E5A and rgb(42, 46, 90) describe exactly the same color, just written differently. Converting those RGB values to HSL involves a few more steps: finding the maximum and minimum channel values, using them to calculate lightness and saturation, and using the relative position of each channel to calculate hue, which works out to approximately hsl(235, 36%, 26%). All three formats, the hex code, the RGB triplet, and the HSL triplet, point to the exact same dark indigo-blue color; none is more "correct" than another, they're just different ways of describing identical light.

Understanding the HEX Format: How the Six Digits Work

A 6-digit hex color code splits into three 2-digit pairs, each representing one color channel in hexadecimal (base-16) notation, where digits run 0 through 9 and then A through F, giving 16 possible values per digit and 256 (16 × 16) possible values per channel, matching RGB's 0-255 range exactly. The first pair controls red, the second controls green, and the third controls blue. Shorthand 3-digit hex codes, like #FFF, work by duplicating each digit, so #FFF expands to #FFFFFF (pure white) and #F00 expands to #FF0000 (pure red), a shortcut that only works when both digits in each pair would be identical.

Understanding RGB: Additive Color Mixing

RGB is called an additive color model because it starts from black (all channels at 0) and adds red, green, and blue light to build up brighter colors, the same principle behind how screens and displays actually produce color, by combining tiny red, green, and blue sub-pixels of varying brightness. All three channels at maximum (255, 255, 255) produce white, while all three at zero (0, 0, 0) produce black. This is the opposite of how mixing paint works, which is a subtractive process where combining colors generally produces a darker result, one reason RGB values can feel counterintuitive to anyone used to thinking about color through physical pigments rather than emitted light.

Understanding HSL: Building Color Variations by Adjusting One Number

HSL's real advantage over HEX and RGB is how directly each of its three values maps to an intuitive visual property. To make a color lighter or darker while keeping its exact same hue, adjust only the lightness value, no need to recalculate three separate RGB channels by hand. To make a color more vivid or more muted and grayish, adjust only saturation. To shift to a completely different color while preserving how light, dark, vivid, or muted it is, adjust only hue. This is why HSL is often the preferred format when building a design system's color palette, generating a full range of tints and shades from one base color is far more predictable in HSL than in HEX or RGB.

Color Formats Beyond HEX, RGB, and HSL

Beyond the three formats this tool converts between, a few other color models come up in specific contexts. CMYK (Cyan, Magenta, Yellow, Key/black) is used for print production, where color is created by absorbing, rather than emitting, light through layered inks, an entirely different, subtractive process from screen-based RGB. HSB or HSV (Hue, Saturation, Brightness/Value) is closely related to HSL but calculates its third value differently, common in image editing software like Photoshop. LAB and LCH color spaces are designed to more closely match human visual perception, increasingly used in modern CSS color functions for more predictable color interpolation and gradients than RGB or HSL provide.

Where Color Values Actually Come From

Before converting a color, it usually needs to be captured from somewhere. Design files from tools like Figma or Photoshop typically export colors as HEX by default. A screen color picker or eyedropper tool samples the exact pixel color displayed on screen and reports it, usually as HEX or RGB. Brand style guides most often specify an official HEX value alongside CMYK values for print. Whichever source a color comes from, converting it into whichever format a particular context requires, HSL for building a palette, RGB for an image-editing tool, HEX for a quick CSS paste, is exactly the gap this converter is meant to fill.

Choosing Color Formats in CSS Custom Properties

Modern CSS commonly stores brand colors as custom properties (CSS variables) at the top of a stylesheet, and the format chosen there affects how easily those colors can be adjusted later. Storing a color as HSL, rather than HEX or RGB, makes it trivial to derive lighter and darker variants elsewhere in a stylesheet using CSS's hsl() function with an adjusted lightness value, without needing a separate color converter every time a new shade is needed. This is one of the more practical, everyday reasons HSL has become popular in modern CSS architecture beyond just being conceptually easier to reason about.

Practical Workflow: From Brand Color to Full Palette

A typical real-world use of this converter starts with a single brand color, often supplied as a HEX code from a logo file or brand guideline document. Converting that HEX value to HSL is usually the first step toward building out a complete palette: keeping the hue and saturation fixed while varying only lightness produces a consistent set of tints (lighter versions, used for backgrounds and hover states) and shades (darker versions, used for text and borders) that all clearly belong to the same color family. Once those HSL variations are chosen, converting each back to HEX or RGB, whichever a given codebase or design tool expects, completes the workflow from a single reference color to a full working palette.

Common Mistakes When Working With Color Values

Mixing up HSL lightness with RGB brightness. A color at 50% HSL lightness isn't necessarily perceived as "medium brightness," different hues reach their most saturated, vivid point at different lightness values, so 50% lightness can look quite different across the color wheel.

Forgetting the # prefix on hex codes in CSS. A hex value without its leading # symbol isn't valid CSS and will be silently ignored or cause a rendering error, always double-check the # is present when copying a hex code into a stylesheet.

Assuming HEX, RGB, and HSL round-trip perfectly at extreme precision. Because HSL's hue, saturation, and lightness are typically rounded to whole numbers for readability, converting from RGB to HSL and back to RGB can occasionally shift a color by a single unit in one channel, a difference invisible to the eye but worth knowing about in color-critical work.

When to Use Which Format

• Use HEX when copying colors between design tools or into CSS, it's the most universally supported format.
• Use RGB when you need to blend or compare exact channel values, like in image editing.
• Use HSL when building a color system or theme, it's much easier to generate consistent shades, tints, and tones by adjusting lightness and saturation.

Frequently Asked Questions

Does this support 3-digit HEX codes like #FFF?

Yes, shorthand 3-digit hex codes are automatically expanded to their full 6-digit equivalent.

Will this convert transparency (alpha) too?

Not currently, this tool works with fully opaque colors only (no alpha channel).

Why do HEX and RGB always describe the exact same color?

HEX and RGB are just two different notations for identical underlying values, HEX is base-16 and RGB is base-10, both encoding the same red, green, and blue channel intensities. Converting between them never changes the actual color, only how it's written.

What is CMYK and why isn't it included here?

CMYK (Cyan, Magenta, Yellow, Key/black) is a subtractive color model used for print production, unlike HEX, RGB, and HSL, which describe light emitted from a screen. This tool focuses on screen-based color formats since that covers the vast majority of web and app design work.

Why does the same HSL lightness look different for different hues?

Human eyes perceive some hues, like yellow, as brighter than others, like blue, even at identical HSL lightness values. HSL treats lightness mathematically rather than perceptually, so two colors with the same lightness number can still look noticeably different in perceived brightness.

How do I check if two colors have enough contrast for accessibility?

Converting a color between formats doesn't tell you its contrast ratio against another color. Use our Contrast Checker tool to test a foreground and background color pair against WCAG accessibility guidelines.