Free · live preview · no signup
#FFA500 — Orange
Every CSS spelling of orange, plus computed lighter and darker variants — and the converter preloaded with it to explore from here.
Short answer
Orange is #FFA500 in HEX notation, rgb(255, 165, 0) in RGB, and hsl(39, 100%, 50%) in HSL. All three are the same color in CSS — HEX and RGB are literal channel values, while HSL re-expresses them as hue, saturation and lightness, which is the format to reach for when you want systematic tints and shades (vary lightness, keep the rest). The table below does exactly that for orange.
Preview
- HEX
- #ffa500
- RGB
- rgb(255, 165, 0)
- HSL
- hsl(39, 100%, 50%)
All three are valid CSS — same color, different notation.
About the conversion
Why HSL earns its place: designers think "same color, lighter" — and in HSL that's a single number. The shades table holds hue and saturation fixed and steps lightness, which keeps every variant recognizably orange instead of drifting hue the way naive RGB math does.
Orange across lightness levels
| Lightness | HEX | RGB |
|---|---|---|
| 20% | #664200 | rgb(102, 66, 0) |
| 35% | #b37400 | rgb(179, 116, 0) |
| 50% | #ffa600 | rgb(255, 166, 0) |
| 65% | #ffc14d | rgb(255, 193, 77) |
| 80% | #ffdb99 | rgb(255, 219, 153) |
Same hue and saturation, lightness varied through HSL — the honest way to build tints and shades of a brand color.
Common colors in HEX, RGB and HSL
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Lime | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Orange | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Pink | #ffc0cb | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
All values computed with the same conversions the tool uses.
How we calculate this
Three notations, two genuinely different models:
- HEX ↔ RGB. pure notation: each RGB channel (0–255) is two hexadecimal digits, #RRGGBB. Lossless in both directions — no color changes.
- RGB ↔ HSL. a real remapping: hue is the angle around the color wheel (0–360°), saturation the distance from gray, lightness the distance from black/white — the standard CSS algorithm, rounded to whole units for display.
- Which to use. HEX for compactness, RGB when code manipulates channels, HSL when humans reason about color — 'same hue, lighter' is one HSL number but three coupled RGB ones.
Assumptions
- All values are sRGB, the web's default color space — wide-gamut spaces (Display-P3) are out of scope.
- HSL round-trips can drift by ±1 per channel from display rounding; the underlying math is exact.
- Alpha (transparency) is orthogonal to these conversions — append it as the fourth value in any of the three notations.
Last reviewed: July 29, 2026
Frequently asked questions
How do I convert HEX to RGB?+
Split the six digits into three pairs and read each pair as a base-16 number: #ff8000 → ff|80|00 → rgb(255, 128, 0). Three-digit shorthand doubles each digit first (#f80 = #ff8800). It's pure notation — the color itself doesn't change, which is why the conversion is exact in both directions.
What is HSL and when should I use it?+
Hue (0–360° around the color wheel), Saturation (0% gray to 100% vivid), Lightness (0% black to 100% white). Use it whenever you're thinking like a human: making a color 'lighter', building tints and shades of a brand color, or generating palettes — each of those is a single HSL number, versus three coupled channels in RGB. CSS supports hsl() everywhere.
Are HEX, RGB and HSL the same color?+
Yes — all three describe points in the same sRGB space, so #ff8000, rgb(255, 128, 0) and hsl(30, 100%, 50%) render identically in CSS. HEX/RGB are literally the same numbers in different bases; HSL is a geometric remapping of them. The only caveat is rounding: whole-number HSL can be off by about one RGB step when converted back.
How do I make a color lighter or darker correctly?+
Convert to HSL, change only the lightness, convert back. Adding white/black in RGB (or worse, scaling channels) drifts the hue — orange fades toward brown. Our per-color pages show this: each shade table holds hue and saturation fixed and steps lightness, keeping every variant recognizably the same color.
What about CMYK?+
CMYK is for ink, not screens: it's a subtractive model whose real output depends on printer, paper, and profile, so any formula-based CMYK value is an approximation. For web work you never need it; for print, do the conversion inside your design tool with the actual output profile rather than a generic formula.
Does this tool upload my colors or track what I pick?+
No — the conversions are a few lines of math running entirely in your browser. Nothing you type or pick is transmitted anywhere. That's also why it works offline once the page has loaded.
Also try the Color Converter.