How does 3-digit hex expand?

Each digit duplicates: #rgb becomes #rrggbb. So #abc equals #aabbcc, and #fff equals #ffffff. Short form is convenience syntax, not a different color model.

Are these values sRGB or Display P3?

Classic hex and rgb() in CSS are typically interpreted as sRGB. Wide-gamut displays and P3 CSS colors can look different for the same numeric channels. This converter targets everyday sRGB web colors.

Why prefer HSL for themes?

Hue, saturation, and lightness map more intuitively to “shift blue warmer” or “lighten 10%” than raw RGB does. Many design systems still store hex for interchange while authors think in HSL while editing.

Does conversion include an alpha channel?

When supported, 8-digit hex and rgba()/hsla() carry opacity. Confirm channel order: CSS #rrggbbaa places alpha at the end; some older engines differ. Opaque brand colors usually stay 6-digit hex.

Can I type named CSS colors?

If the parser accepts keywords such as rebeccapurple, they resolve to fixed sRGB values you can then view as hex or HSL. Prefer hex in tokens to avoid keyword support gaps.

Why does Photoshop HSB disagree with CSS HSL?

HSB/HSV and HSL are related but not identical models. Brightness is not the same as lightness. Convert through RGB hex when moving between design apps and CSS to avoid model confusion.

Will two notations always round-trip perfectly?

Integer RGB and 6-digit hex usually round-trip cleanly. HSL percentages may round to nearby RGB integers, so a second conversion can differ by a bit. Store a canonical hex if exact stability matters.

Is conversion private?

Yes. Color arithmetic and preview rendering run locally in the browser.

Color Converter (HEX ↔ RGB ↔ HSL)

Designers speak in hex, engineers paste rgb(), and theme systems often prefer HSL when they need to lighten a brand color without guessing. This color converter translates among HEX, RGB, and HSL so the same sRGB color can travel through Figma notes, CSS variables, and documentation without manual channel math. A live swatch helps you confirm the shade before you commit tokens. Conversion does not magically fix contrast, color blindness issues, or wide-gamut Display P3 mismatches—those need separate checks. Enter the notation you have, copy the notation you need, and keep brand references consistent across tools.

Color Converter UI

Informational only; verify critical results independently.

How to use

Paste a hex code such as #1e90ff, or enter RGB channel integers, or adjust HSL values when sliders or fields are available.
Watch the live preview swatch to confirm the color matches your brand reference or screenshot sample.
Copy the CSS-ready string you need: #rrggbb, rgb(), rgba(), hsl(), or hsla() when alpha is supported.
Expand 3-digit hex (#abc) to 6-digit (#aabbcc) when an older toolchain rejects short form.
Tweak one HSL channel at a time to explore lighter, darker, or hue-shifted variants of a brand base.
When matching a pixel from a screenshot, convert once and record both hex and rgb in the handoff doc.
Keep a single source-of-truth notation in your design tokens—convert at boundaries instead of maintaining three conflicting lists.
Check contrast separately after picking text and background pairs; conversion alone does not guarantee readability.
If you use 8-digit hex with alpha, confirm the consumer understands #rrggbbaa versus rgba() ordering.
Export the same color into design QA notes in at least two notations to reduce transcription errors.
Clear experimental brand explorations from shared machines if the palette is confidential pre-launch.

Examples

#1e90ff → rgb(30, 144, 255) and an HSL near hsl(210, 100%, 56%) for DodgerBlue-style CSS.
hsl(210, 100%, 50%) → hex suitable for Figma or token JSON import.
rgb(255, 99, 71) → HSL for animating saturation on a tomato-like accent.
Short #abc expands to #aabbcc (channels aa, bb, cc).
Brand navy #003366 → HSL for systematic tint steps in a theme file.
#rrggbbaa example #00336680 → roughly 50% alpha navy overlay depending on parser.
rgb(0, 0, 0) ↔ #000000 ↔ hsl(0, 0%, 0%) as a black sanity check.
rgb(255, 255, 255) ↔ #ffffff ↔ hsl(0, 0%, 100%) as a white sanity check.
#ff0000 → hsl(0, 100%, 50%) showing pure red at full saturation mid lightness.
rgb(128, 128, 128) → #808080 → hsl(0, 0%, 50%) for neutral mid gray.

FAQ

How does 3-digit hex expand?: Each digit duplicates: #rgb becomes #rrggbb. So #abc equals #aabbcc, and #fff equals #ffffff. Short form is convenience syntax, not a different color model.
Are these values sRGB or Display P3?: Classic hex and rgb() in CSS are typically interpreted as sRGB. Wide-gamut displays and P3 CSS colors can look different for the same numeric channels. This converter targets everyday sRGB web colors.
Why prefer HSL for themes?: Hue, saturation, and lightness map more intuitively to “shift blue warmer” or “lighten 10%” than raw RGB does. Many design systems still store hex for interchange while authors think in HSL while editing.
Does conversion include an alpha channel?: When supported, 8-digit hex and rgba()/hsla() carry opacity. Confirm channel order: CSS #rrggbbaa places alpha at the end; some older engines differ. Opaque brand colors usually stay 6-digit hex.
Can I type named CSS colors?: If the parser accepts keywords such as rebeccapurple, they resolve to fixed sRGB values you can then view as hex or HSL. Prefer hex in tokens to avoid keyword support gaps.
Why does Photoshop HSB disagree with CSS HSL?: HSB/HSV and HSL are related but not identical models. Brightness is not the same as lightness. Convert through RGB hex when moving between design apps and CSS to avoid model confusion.
Will two notations always round-trip perfectly?: Integer RGB and 6-digit hex usually round-trip cleanly. HSL percentages may round to nearby RGB integers, so a second conversion can differ by a bit. Store a canonical hex if exact stability matters.
Is conversion private?: Yes. Color arithmetic and preview rendering run locally in the browser.

Formula / Method

HEX ↔ RGB: each two hex digits map to a 0–255 channel (ff → 255). RGB → HEX writes each channel as two hexadecimal digits. RGB → HSL: normalize channels to 0–1, compute max/min chroma, derive hue from which channel dominates, lightness = (max+min)/2, saturation from chroma relative to lightness. HSL → RGB reverses that piecewise function. Example: #1e90ff → R=30, G=144, B=255. Example: #ff0000 → hsl(0, 100%, 50%). Alpha, when present, is a separate 0–1 or 0–255 opacity channel and does not change the opaque RGB triplet’s hue relationships.

Assumptions & Limitations

Targets common sRGB web notations, not spectral measurement, CMYK print separations, or ICC profile transforms. Does not compute WCAG contrast (use a contrast checker). Display P3 and HDR encodings are out of scope. Rounding between HSL and RGB can introduce ±1 channel differences. Named color support depends on the parser. Preview appearance still depends on the viewer’s display calibration.

Related guides

Color Contrast and Accessibility: WCAG Basics
Meet WCAG AA/AAA contrast ratios for text, fix brand-color failures, and convert hex/RGB/HSL with practical design checks.

Related tools

Last updated: 2026-07-28

← Back to Color Tools