RGB
RGB describes a color by its red, green, and blue channels — each on a 0–255 scale (8 bits per channel). It is what computer monitors and most digital cameras emit, and what every other web color format ultimately maps to.
RGB to HSL Color Converter
rgb(255, 107, 53) = hsl(16, 100%, 60%)
Convert RGB color values to HSL color values exactly, via the canonical 8-bit sRGB representation. Every result you see is the same number the W3C CSS spec would produce — no proprietary adjustments, no perceptual fudging. Try the live converter below, or scan the reference table for twenty-five named colors and their RGB ↔ HSL pairs.
rgb(R, G, B) or just R, G, B with each value 0–255
hsl(H, S%, L%) with hue 0–360, saturation and lightness 0–100
Preview
#FF6B35
Try
How to convert RGB color to HSL color
Paste or type your color
Enter the RGB color above. Convertitive accepts rgb(r, g, b) or just r, g, b with each value 0–255.
Read the HSL value
The result appears the moment your input parses. For example, rgb(255, 107, 53) (Convertitive's coral accent) becomes hsl(16, 100%, 60%).
Copy and share
Click the copy button to grab the result. The preview swatch lives-updates so you can sanity-check the conversion at a glance.
RGB to HSL reference table
Twenty-five well-known colors with their RGB and HSLrepresentations side by side. The swatches are rendered directly from the computed RGB, so what you see is exactly what you will ship.
| Name | RGB | HSL | |
|---|---|---|---|
| Black | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| White | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| Red | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| Lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| Blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| Yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) | |
| Cyan | rgb(0, 255, 255) | hsl(180, 100%, 50%) | |
| Magenta | rgb(255, 0, 255) | hsl(300, 100%, 50%) | |
| Silver | rgb(192, 192, 192) | hsl(0, 0%, 75%) | |
| Gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) | |
| Maroon | rgb(128, 0, 0) | hsl(0, 100%, 25%) | |
| Olive | rgb(128, 128, 0) | hsl(60, 100%, 25%) | |
| Green | rgb(0, 128, 0) | hsl(120, 100%, 25%) | |
| Teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) | |
| Navy | rgb(0, 0, 128) | hsl(240, 100%, 25%) | |
| Purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) | |
| Orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) | |
| Pink | rgb(255, 192, 203) | hsl(350, 100%, 88%) | |
| Gold | rgb(255, 215, 0) | hsl(51, 100%, 50%) | |
| Tomato | rgb(255, 99, 71) | hsl(9, 100%, 64%) | |
| Coral | rgb(255, 127, 80) | hsl(16, 100%, 66%) | |
| Salmon | rgb(250, 128, 114) | hsl(6, 93%, 71%) | |
| Indigo | rgb(75, 0, 130) | hsl(275, 100%, 25%) | |
| Chocolate | rgb(210, 105, 30) | hsl(25, 75%, 47%) | |
| Crimson | rgb(220, 20, 60) | hsl(348, 83%, 47%) |
Frequently asked questions
- How do I convert RGB color to HSL color?
- Paste your RGB value into the input above. Convertitive parses it, maps it through 8-bit sRGB, and re-emits it in HSL. For example, rgb(255, 107, 53) becomes hsl(16, 100%, 60%).
- What is the exact HSL value of rgb(255, 107, 53)?
- rgb(255, 107, 53) in RGB equals hsl(16, 100%, 60%) in HSL.
- Why might my RGB → HSL round-trip produce a slightly different value?
- HSL and HSV store hue/saturation/lightness as rounded percentages, which costs about ±0.5% of perceived saturation on extreme values. For most UI work the difference is invisible.
- Does this support transparency or alpha?
- Not yet. The current version handles fully opaque colors only. RGBA/HSLA inputs are silently ignored beyond the first three channels. Alpha support is on the roadmap.
- Are color names supported?
- Not directly as input — but the reference table on every page shows twenty-five common CSS named colors with their RGB and HSL equivalents. Copy the value you want into the calculator above.
- Why does the swatch sometimes look wrong on my screen?
- Browsers handle color profiles differently. On most modern displays the rendered swatch matches the stored sRGB exactly. On wide-gamut displays without an active sRGB profile, very saturated colors may render slightly more vivid than the math implies.
- Can I use these results in CSS directly?
- Yes. Every output above is a valid CSS color expression. HEX values include the # prefix; RGB/HSL/HSV outputs are in the standard function form CSS accepts.
- Are the conversions WCAG-accurate?
- The conversions are mathematically exact within IEEE 754 double precision. WCAG contrast ratios require an additional sRGB-to-linear-luminance step that is not part of HEX/RGB/HSL/HSV conversions — Convertitive will ship a dedicated contrast checker later.
About RGB and HSL
HSL
HSL describes a color by hue (0–360°), saturation (0–100%), and lightness (0–100%). It is the format CSS recommends for human-readable palettes because nudging the hue keeps the same lightness, unlike RGB where every channel matters.