Hex, RGB, and HSL: A Practical Guide to Color Formats on the Web

Colors on the web can be defined in at least half a dozen different formats, and they all describe the same thing: a specific color. The three you will encounter most often are Hex, RGB, and HSL. They are different ways of writing down the same information, like saying "twelve," "12," and "XII" are all the same number.

So why do we need three formats? Because each one was designed for a different context and makes different tasks easier. Hex is compact and became the web standard early on. RGB maps directly to how screens display color. HSL maps to how humans think about color. Understanding when to reach for each format saves you time and makes your color choices more intentional.

The Color Converter lets you paste any color value and instantly see it in all formats. That alone solves most day-to-day color conversion needs.

Hex Colors: The Web Default

Hex colors use a six-character code preceded by a hash sign: #FF5733. The six characters represent three pairs: the first two for red, the middle two for green, and the last two for blue. Each pair is a hexadecimal number from 00 (none of that color) to FF (maximum intensity).

So #FF5733 means full red (FF), moderate green (57), and low blue (33), which produces a warm orange-red.

Hex is the most common format in web development because it is compact and has been supported in CSS since the beginning. When a designer hands you a color, it is almost always in hex. When you inspect an element in your browser, the computed color is usually shown in hex.

Shorthand hex condenses colors where each pair has identical digits. #FF3366 can be written as #F36. This only works when both digits in each pair match.

8-digit hex adds transparency. #FF573380 is the same orange-red at 50% opacity. The last two digits control the alpha channel, from 00 (fully transparent) to FF (fully opaque).

The main downside of hex: it is hard to read and modify mentally. Looking at #3B82F6, you cannot easily tell what color it is or how to make it lighter without a tool. That is where HSL comes in.

RGB: How Screens See Color

RGB describes colors as a mix of red, green, and blue light, with each channel ranging from 0 to 255. In CSS, it looks like rgb(255, 87, 51), which is the same orange-red as #FF5733.

RGB maps directly to how your screen works. Every pixel on an LCD or OLED display is made of tiny red, green, and blue sub-pixels. When you write rgb(255, 0, 0), you are telling the screen to blast the red sub-pixel at full intensity and turn off the other two.

This format is intuitive for additive color mixing: - Red + Green = Yellow: rgb(255, 255, 0) - Red + Blue = Magenta: rgb(255, 0, 255) - Green + Blue = Cyan: rgb(0, 255, 255) - All at max = White: rgb(255, 255, 255) - All at zero = Black: rgb(0, 0, 0)

RGBA adds an alpha channel for transparency: rgba(255, 87, 51, 0.5) is the same color at 50% opacity. The alpha value ranges from 0 (invisible) to 1 (fully opaque).

RGB is good for programmatic color manipulation. If you need to lighten a color in JavaScript, you can add a fixed amount to each channel. If you need to mix two colors, you can average their channels. The math is straightforward.

The downside: creating color variations (darker, lighter, more saturated) requires adjusting all three channels simultaneously, which is not intuitive.

HSL: How Humans Think About Color

HSL stands for Hue, Saturation, and Lightness. In CSS: hsl(14, 100%, 60%). This is the same orange-red color, but described in terms that match how people naturally talk about color.

Hue is the color itself, expressed as a degree on the color wheel (0-360). Red is 0, green is 120, blue is 240, and it wraps back to red at 360. This means you can shift a color's hue by changing one number.

Saturation is the intensity or purity of the color, from 0% (completely gray) to 100% (fully vivid). Reducing saturation creates muted, pastel, or grayish versions of the same hue.

Lightness is how bright or dark the color is, from 0% (black) to 100% (white). 50% is the pure color. Going lower adds black, going higher adds white.

This makes HSL incredibly useful for building color palettes. Want a darker version of your brand color? Lower the lightness by 15%. Want a pastel version for backgrounds? Reduce saturation to 30% and raise lightness to 90%. Want a complementary color? Add 180 to the hue. All of these operations require changing just one value.

The Color Picker shows HSL values alongside hex and RGB. If you are choosing colors from scratch, starting with HSL and converting to hex for your CSS is usually the most efficient workflow.

HSLA adds transparency: hsla(14, 100%, 60%, 0.5) for 50% opacity.

When to Use Each Format

Use Hex when: - Writing CSS and you want compact color values - Copying colors from design tools (Figma, Sketch, Adobe XD all default to hex) - Sharing colors with other developers (hex is the universal web language) - You do not need transparency (hex without alpha is the shortest format)

Use RGB when: - Doing programmatic color manipulation in JavaScript - Working with canvas or WebGL where color channels are separate values - Mixing colors mathematically (averaging channels) - Interfacing with APIs or systems that expect RGB arrays

Use HSL when: - Building color palettes and design systems - Creating color variations (lighter, darker, more muted) - Choosing colors from scratch - Making accessible color choices (lightness directly controls contrast) - Theming (changing the hue parameter creates an entirely new color scheme)

In modern CSS, all three formats are supported everywhere. There is no performance difference. The choice is purely about readability and convenience for the task at hand.

The Gradient Generator accepts colors in any format and produces CSS gradients. Mixing formats in a single project is fine as long as your team agrees on a convention for consistency.

Color Spaces You Might Encounter Next

The web is moving beyond sRGB. Newer CSS color functions like oklch(), oklab(), color(), and lch() are gaining browser support and offer significant advantages.

OKLCH is the standout. It works like HSL but with perceptually uniform lightness, meaning that changing the lightness value by the same amount always looks like the same visual change. In HSL, yellow at 50% lightness looks much brighter than blue at 50% lightness because HSL lightness is not perceptually uniform.

OKLCH syntax: oklch(70% 0.15 30) where 70% is lightness, 0.15 is chroma (similar to saturation), and 30 is hue in degrees.

For now, Hex, RGB, and HSL cover 99% of practical web development needs. But if you are building a design system or making careful accessibility choices, OKLCH is worth learning. It makes creating consistent, accessible color palettes significantly easier because the math actually matches what your eyes see.

The Color Converter supports all major formats, so you can experiment with different color spaces without manual calculations.

FAQ

Is there any performance difference between Hex, RGB, and HSL in CSS?

No. Browsers internally convert all color formats to the same representation. Using #FF5733, rgb(255, 87, 51), or hsl(14, 100%, 60%) produces identical rendering performance. Choose whichever format is most readable for your use case.

Can I mix color formats in the same CSS file?

Yes, and this is common in practice. You might use hex for brand colors defined in CSS custom properties, HSL for creating hover state variations, and rgba for transparent overlays. Consistency within a component is nice but not required.

Why do some hex colors look wrong when I paste them from Photoshop?

Photoshop and some design tools can work in color spaces other than sRGB, like Adobe RGB or Display P3. If a color was picked in a wider color space, the hex value may not render the same in a browser that defaults to sRGB. Make sure your design tool is set to sRGB when picking colors for web use.

How do I find the right contrast ratio for accessibility?

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. HSL makes it easier to adjust contrast because you can directly modify the lightness value. Increase the lightness difference between text and background until you meet the required ratio.