Color Converter
What is #1E90FF in RGB? How do you write rgb(30, 144, 255) as HSL? Paste a color in any of the three CSS formats — or grab one from the picker — and get the other two instantly, with a live swatch.
HEX
#1E90FF
RGB
rgb(30, 144, 255)
HSL
hsl(210, 100%, 56%)
Hue is an angle on the color wheel: 0° red, 120° green, 240° blue. To darken a color without shifting its hue, lower the HSL lightness — far easier than juggling three RGB channels. Grays (r = g = b) always have 0% saturation, so their hue reads as 0°.
HEX, RGB, and HSL — Three Names for One Color
All three formats describe the same 24-bit color, just differently. HEX packs the red, green, and blue channels into base-16 pairs: #1E90FF (DodgerBlue) is 1E = 30, 90 = 144, FF = 255, i.e. rgb(30, 144, 255). HSL re-maps that into a hue angle, saturation, and lightness — here hsl(210, 100%, 56%) (exactly 209.6°, 100%, 55.9%) — which makes lighter and darker variants a one-number edit. Grays are the edge case: #808080 has zero saturation, so it reads hsl(0, 0%, 50.2%) with a meaningless hue.
Worked examples
#1E90FF → R: 1E = 30 G: 90 = 144 B: FF = 255 rgb(30, 144, 255) → hsl(210, 100%, 56%) (exact 209.6°, 55.9%) #808080 → hsl(0, 0%, 50.2%) any gray: saturation = 0% Shorthand #08F = #0088FF (each digit doubled) With alpha #1E90FF80 ≈ 50% opacity (AA pair: 00–FF)
Frequently Asked Questions
How do I convert HEX to RGB by hand?
Each pair of hex digits is one channel in base 16: multiply the first digit by 16 and add the second. For #1E90FF, 1E = 1×16 + 14 = 30, 90 = 9×16 + 0 = 144, and FF = 255, so it's rgb(30, 144, 255). Three-digit shorthand doubles each digit: #08F means #0088FF.
When should I use HSL instead of RGB or HEX?
HSL separates what you perceive: hue is a 0–360° angle on the color wheel, saturation is color intensity, and lightness runs black to white. To darken #1E90FF — hsl(210, 100%, 56%) — you just lower the lightness; doing the same by editing three RGB channels is guesswork. HSL is ideal for generating hover states, shades, and tints in CSS.
Why does my gray color show 0° hue in HSL?
Any color where R = G = B has zero saturation, and with no color present the hue angle is undefined — converters report it as 0° by convention. For example #808080 is hsl(0, 0%, 50.2%): the 0° doesn't mean red, because at 0% saturation the hue has no effect.
Can a HEX color code include transparency?
Yes — 8-digit hex (#RRGGBBAA) adds an alpha pair at the end, from 00 (fully transparent) to FF (fully opaque). #1E90FF80 is DodgerBlue at roughly 50% opacity (80 hex = 128 ÷ 255 ≈ 50.2%). All modern browsers support it, as does the 4-digit shorthand #RGBA.