How to Convert Colors Between HEX, RGB and HSL

HEX, RGB and HSL are three ways to describe the same color: HEX uses a hex string for CSS, RGB lists red/green/blue channels, and HSL describes hue, saturation and lightness. Each format suits a different task — HEX for quick CSS, RGB for alpha transparency, HSL for building palettes. The NeatForge Color Converter converts between all three live in your browser.

The Three Color Formats Explained

• HEX — a # followed by six hex digits, two per channel: #2563EB means red 25, green 63, blue EB. Three-digit shorthand like #fff expands to #FFFFFF.
• RGB — three decimal numbers from 0 to 255: rgb(37, 99, 235). The rgba() form adds an alpha channel from 0 to 1 for transparency.
• HSL — hue (0–360° on the color wheel), saturation (0–100%), and lightness (0–100%): hsl(217, 83%, 53%). The hsla() form adds alpha.

All three describe the same sRGB color; they just expose different knobs.

When to Use Each Format

• HEX for CSS — the shortest, most common form for solid colors in stylesheets and design tools.
• RGB (or rgba) for alpha — when you need transparency, rgba(37, 99, 235, 0.5) is clearer than 8-digit HEX.
• HSL for design — building a palette by holding hue constant and varying lightness is far easier in HSL than in RGB.

The Difference Between RGB and HSL

RGB describes a color by its raw red, green and blue components — easy for screens to render, but hard for humans to reason about. Changing “lightness” in RGB means recalculating all three channels.

HSL describes a color by hue (which color it is), saturation (how intense) and lightness (how light or dark). You can darken a color by lowering lightness alone, leaving hue and saturation untouched. That makes HSL the preferred format for generating tints, shades and accessible color scales.

How to Convert Colors

1. Open the Color Converter.
2. Type a HEX value, adjust the RGB or HSL number inputs, or click a quick preset.
3. The swatch at the top updates instantly to preview the color.
4. Use the Copy button next to HEX, RGB or HSL to copy a CSS-ready string such as #2563EB, rgb(37, 99, 235) or hsl(217, 83%, 53%).

The tool accepts 3-digit shorthand, expands it automatically, and always outputs the 6-digit form for maximum compatibility.

CSS Tips: color-mix and Modern Color

Modern CSS can blend colors directly, which works especially well with HSL and RGB:

• color-mix(in srgb, #2563EB 60%, white) — lightens a HEX color without precomputing the result.
• hsl(217 83% 53% / 0.5) — modern slash syntax for alpha in HSL.
• oklch() and lch() — newer perceptually-uniform spaces, useful for consistent lightness across hues.

When you need a transparency-friendly or mixable value, copy the RGB or HSL form instead of HEX.

Hand Conversion With Worked Examples

You will normally use the converter, but knowing the manual math helps you sanity-check values and read stylesheets with confidence.

HEX to RGB. Split the six digits into three pairs and convert each from base 16. The digits run 0–9 then A–F, where A is 10, B is 11, C is 12, D is 13, E is 14 and F is 15. Take #0099CC: the pairs are 00, 99 and CC. The first pair is 0. The second is 9 × 16 + 9 = 153. The third is 12 × 16 + 12 = 204. So #0099CC becomes rgb(0, 153, 204), a medium cyan-blue. Pure red #FF0000 is even simpler: F × 16 + F = 255, giving rgb(255, 0, 0).

RGB to HSL, qualitatively. Divide each channel by 255 to get values between 0 and 1. Lightness is the average of the largest and smallest of the three. Saturation measures how far apart the largest and smallest are: when all three channels are equal, the color is gray and saturation is 0. Hue follows which channel dominates: red-dominant colors sit near 0 degrees, green-dominant near 120 and blue-dominant near 240.

Two reference conversions to memorize. rgb(255, 0, 0) converts to hsl(0, 100%, 50%): maximum saturation, middle lightness, hue 0 for red. rgb(0, 255, 0) converts to hsl(120, 100%, 50%): the same saturation and lightness with hue 120 for green. Any gray such as rgb(128, 128, 128) has 0 saturation and its hue is meaningless, which is why converters report hue 0 for grays.

Choosing Pairs That Pass Contrast Checks

A beautiful palette still fails if nobody can read the text on it. The WCAG accessibility standard requires body text to reach a contrast ratio of at least 4.5 to 1 against its background, while large headings and UI icons need at least 3 to 1. Ratios run from 1 (identical colors) to 21 (black on white).

Three rules cover the majority of real designs. First, white text on saturated blues generally passes: white on #2563EB measures about 5.2 to 1, clearing the body-text bar. Second, light gray body text on white almost always fails — placeholders and secondary labels are the most common violation on real sites. Third, never judge contrast by eye on your own calibrated monitor; test the exact pair with the Contrast Checker and adjust lightness in HSL until the ratio clears 4.5.

When you need a full accessible scale rather than one pair, generate candidates with the Palette Generator, convert the shortlist here, and then run each step against your background color. Holding hue constant while stepping lightness in HSL gives you evenly spaced shades, and one of them will almost always land exactly on the ratio you need.

FAQ

What is the difference between RGB and HSL? RGB describes a color by red, green and blue components. HSL describes it by hue, saturation and lightness. HSL is more intuitive for designers because you can change lightness independently.

Does the tool support 3-digit HEX shorthand? Yes. Typing #fff is automatically expanded to #FFFFFF. Output always uses the 6-digit form for compatibility.

Can I copy CSS-ready values? Yes. The Copy button next to each format gives you #2563EB, rgb(37, 99, 235) or hsl(217, 83%, 53%) ready to paste into CSS.

→ Open the free Color Converter