Color Converter (HEX, RGB, HSL)

HEX, RGB, and HSL — three ways to write the same color

Every color displayed on a screen is ultimately defined by three numbers: the intensity of red, green, and blue light mixed together. Those three numbers can be written in several notations. HEX is the compact hexadecimal form used throughout CSS, design tools, and file formats. RGB writes the same channels as plain decimal integers. HSL rotates the representation to a more human-friendly axis — hue, saturation, and lightness — that maps more closely to how designers think about color. All three notations are mathematically equivalent; a color converter simply transforms the arithmetic between them. Developers reach for HEX and RGB; designers and CSS authors frequently prefer HSL.

HEX in detail

A HEX color is written as #rrggbb — six hexadecimal digits, two per channel, where each pair ranges from 00 (0 in decimal) to ff (255 in decimal). The 3-digit shorthand #abc is exactly equivalent to #aabbcc; each digit is doubled. HEX is case-insensitive, but lowercase is the modern convention in CSS and tooling. The leading # is required in CSS property values, though most color picker tools accept hex strings with or without it.

A common gotcha: people sometimes type #FF thinking it represents maximum red. That is not valid HEX — all six channel digits must be present (or all three in shorthand form). The hex to rgb conversion is straightforward arithmetic: take each pair of hex digits, parse them as a base-16 integer, and you have the decimal channel value. For example, #ff6347 parses as R=255, G=99, B=71.

RGB in detail

The rgb to hex direction is the reverse: format each decimal integer as a two-digit hex string and concatenate them with a # prefix. rgb(255, 99, 71) writes each channel as a decimal integer from 0 to 255. Modern CSS also accepts the space-separated form rgb(255 99 71) without commas, and an rgba() variant — rgba(255, 99, 71, 0.5) — which adds a fourth alpha channel for translucency. This color converter works with opaque integer RGB; the conversion math and color theory are the same regardless of whether an alpha channel is present.

RGB is the native representation for pixels in graphics APIs, image processing pipelines, and raw canvas operations, which is why developers working close to the metal tend to stay in this format. For CSS theming and design work, HSL is generally more practical.

HSL in detail — the human-friendly axis

HSL stands for hue, saturation, and lightness. The hex to hsl conversion is more involved than hex to rgb, but the result is a color space that maps directly to how designers describe color adjustments.

• Hue (0–360°): the position on the color wheel. 0° is red, 120° is green, 240° is blue, and 360° wraps back to red.
• Saturation (0–100%): vividness versus gray. At 0% saturation any hue becomes pure gray; the hue value is irrelevant.
• Lightness (0–100%): brightness from black to white. 0% is always black, 100% is always white, and 50% yields the fullest version of the hue.

The practical advantage: to lighten a color, bump lightness. To push it toward orange from red, nudge hue upward. To tone it down, reduce saturation. Achieving the same effects in RGB requires adjusting multiple channels simultaneously and knowing roughly what the result will look like — an unintuitive process. CSS first developers and designers tend to switch to HSL permanently once they try it.

When to use which format

All three formats are interchangeable via a color converter, so the choice is driven by context rather than capability.

• HEX: design files (Figma, Sketch), sharing colors in tickets and documentation, anywhere compactness and copy-paste convenience matter. It is the default format in most color picker UIs.
• RGB: programmatic pixel manipulation, graphics APIs (Canvas, WebGL), image processing, and any context where decimal arithmetic on channel values is needed.
• HSL: CSS custom properties and theming systems, generating tonal palettes (vary lightness in a loop), and any CSS where you want to express relationships between shades of the same hue.

Color contrast and accessibility (WCAG)

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background to ensure readability for users with low vision or color blindness. The contrast ratio is derived from the relative luminance of the two colors and ranges from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — black on white).

• AA normal text: 4.5:1 minimum
• AA large text (≥18pt or ≥14pt bold): 3:1 minimum
• AAA normal text: 7:1 minimum
• AAA large text: 4.5:1 minimum

This color converter shows the contrast ratio of your picked color against both white and black, and labels each WCAG level as pass or fail. If your brand color fails AA against white text, you have a real accessibility problem — you can either darken the color (lower the HSL lightness) or switch to darker text. Color alone should never be the only channel conveying information: pair every red error or green success state with an icon, label, or pattern so that users with color blindness are not excluded.

How to use this color converter

1. Use the color picker to select a color visually, or type directly into any of the format fields.
2. To convert hex to rgb, type a HEX value (with or without the # prefix; both 3-digit and 6-digit forms are accepted). All other fields update immediately.
3. To convert rgb to hex, type an RGB value as rgb(r, g, b) or just the three comma-separated integers.
4. To enter HSL, type hsl(h, s%, l%) or the three space-separated values. The hex to hsl conversion runs in both directions — editing HSL updates HEX and RGB.
5. The CSS named color row shows the standard CSS color name if your color matches one of the 147 named colors exactly; otherwise it shows a dash.
6. Click any Copy button to place that format on your clipboard.
7. Check the contrast section to see WCAG accessibility ratings for your picked color against white and black backgrounds.

Common color examples

A few well-known CSS named colors shown in all three formats:

Tomato      #ff6347   rgb(255, 99, 71)    hsl(9, 100%, 64%)
DodgerBlue  #1e90ff   rgb(30, 144, 255)   hsl(210, 100%, 56%)
ForestGreen #228b22   rgb(34, 139, 34)    hsl(120, 61%, 34%)
HotPink     #ff69b4   rgb(255, 105, 180)  hsl(330, 100%, 71%)

Notice that Tomato and HotPink both have 100% saturation — they are fully vivid hues. ForestGreen's saturation is only 61% because the green channel, while dominant, is not at maximum intensity relative to the others. DodgerBlue sits at exactly hue 210°, which places it squarely in the blue-cyan arc of the color wheel.

Frequently asked questions

Why are my HEX and RGB values not exactly matching after a round-trip through HSL?

Rounding. HSL is a polar coordinate system applied to a rectilinear hex grid. Converting from RGB to HSL and back again can introduce 1–2 unit differences in the decimal channel values because each channel is rounded to the nearest integer at the final step. This is normal and expected. The visual difference is imperceptible. If you need bit-exact round-tripping, stay within HEX and RGB and avoid the intermediate HSL step.

Can I convert colors with an alpha channel?

This version of the color converter handles opaque RGB without an alpha channel. CSS supports rgba(), hsla(), and an eight-digit hex form #rrggbbaa for colors with translucency. Support for alpha-channel formats is on the roadmap. In the meantime, the alpha value does not affect the hue, saturation, or lightness of a color — you can convert the RGB portion independently and re-append the alpha manually.

What is the difference between HSL and HSV (or HSB)?

HSV (also called HSB — hue, saturation, brightness) is a closely related polar color space, but the third axis works differently. In HSV, the pure hue sits at V=100%; in HSL, the pure hue is at L=50% — both 0% and 100% lightness collapse to black and white respectively. CSS uses HSL as its standard, which is why this tool uses HSL. Many design applications (Photoshop, Figma's advanced color picker) expose HSV/HSB instead. If you get HSV values from a design tool and need to paste them into CSS, you will need to convert to HSL first.

Are all 147 CSS named colors recognized?

Yes. The lookup covers the full CSS Color Module Level 4 named-color list. If you pick exactly #ff6347you will see "tomato"; if you type #ff6348 — one unit off — you will see a dash because no CSS named color maps to that exact RGB triplet. Named colors are a fixed, enumerated set; the color picker operates on a continuous 16-million-color space, so matches are intentionally exact.

How is the WCAG contrast ratio calculated?

The contrast ratio uses the relative luminance formula from the WCAG 2.1 specification. Each RGB channel is first linearized with a gamma correction, then weighted by its perceptual contribution to brightness (approximately R: 21%, G: 72%, B: 7%) to produce a single luminance value between 0 and 1. The ratio between two luminance values is then computed as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter value. This is why a green-heavy color can appear adequately bright even at relatively low RGB values — the human eye is most sensitive to green wavelengths.

Is my data sent anywhere when I use this tool?

No. All hex to rgb, rgb to hex, and hex to hsl conversions happen entirely in your browser. The colors you type or pick never leave your device, are never transmitted to any server, and are not logged. This color converter and color picker are static client-side tools with no backend. No account or signup is required.