How to Convert Colors Between HEX, RGB, and HSL
Every colour on the web is the same colour described differently. The orange used on this site — #f58220, rgb(245, 130, 32), and hsl(30, 91%, 54%) — are three different notations for identical colour information. Understanding how colour formats work and how to convert between them makes you faster in CSS, more precise in design handoffs, and better at debugging visual inconsistencies.
Convert between HEX, RGB, HSL, HSV and other colour formats instantly with our free Color Converter tool. If you are also working with hex values in other contexts — memory addresses, error codes, data — our Hex Converter handles those conversions separately.
HEX — The Web Standard
Hexadecimal colour codes represent red, green, and blue channels as three pairs of hex digits: #RRGGBB. Each pair ranges from 00 to FF, which is 0 to 255 in decimal — 256 possible values per channel, giving 256 cubed (16,777,216) possible colours.
Breaking down #f58220: R: f5 in hex = 245 in decimal G: 82 in hex = 130 in decimal B: 20 in hex = 32 in decimal
Shorthand notation: when both digits in any pair are identical, you can write one digit instead. #ff8800 becomes #f80. #ffffff (white) becomes #fff. #000000 (black) becomes #000. Not every hex colour can be shortened — only those where each channel has identical digit pairs.
Eight-digit hex adds an alpha transparency channel: #RRGGBBAA. #f58220ff is fully opaque orange. #f5822080 is approximately 50% transparent orange (80 in hex = 128 in decimal, and 128/255 = 50%). This is supported in modern CSS and most design tools.
HEX is the most compact single-string format and is the dominant format for CSS colour values, design specification documents, and sharing colours between tools.
RGB — Channel-Based Colour
RGB specifies red, green, and blue channels as integers from 0 to 255, or as percentages. It directly exposes the component channels, which is useful for programmatic colour manipulation.
rgb(245, 130, 32) — orange rgb(0, 0, 0) — black rgb(255, 255, 255) — white rgb(255, 0, 0) — pure red rgba(245, 130, 32, 0.5) — 50% transparent orange
Modern CSS also accepts the space-separated syntax: rgb(245 130 32) and rgb(245 130 32 / 50%). These are equivalent to the comma-separated forms and are part of the CSS Color Level 4 specification supported by all modern browsers.
RGB is the natural choice when you need to access individual channel values in JavaScript or when manipulating colours mathematically — blending two colours, calculating contrast ratios for accessibility compliance, or generating colour palettes programmatically.
Converting HEX to RGB in JavaScript: const hex = "#f58220"; const r = parseInt(hex.slice(1, 3), 16); // 245 const g = parseInt(hex.slice(3, 5), 16); // 130 const b = parseInt(hex.slice(5, 7), 16); // 32
HSL — The Designer's Colour Model
HSL stands for Hue, Saturation, and Lightness. It describes colour in a way that matches how designers and humans naturally think about colour relationships, rather than how monitors mix light.
Hue: a degree value from 0 to 360 around the colour wheel. 0 and 360 are red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta.
Saturation: how vivid or muted the colour is. 0% is completely grey regardless of hue. 100% is the fully saturated pure colour.
Lightness: how light or dark the colour is. 0% is always black. 100% is always white. 50% is the normal colour at full saturation.
Practical example with orange (hsl 30, 91%, 54%): Making it darker: hsl(30, 91%, 35%) — lower the lightness Making it lighter: hsl(30, 91%, 75%) — raise the lightness Making it more muted: hsl(30, 40%, 54%) — lower the saturation Complementary colour: hsl(210, 91%, 54%) — add 180 to the hue
This predictability makes HSL the preferred format for generating colour palettes, theme variations, and hover/focus states in CSS. Our Color Converter tool converts any colour to HSL along with all other formats simultaneously.
Convert any colour between HEX, RGB, HSL, HSV and more — free and instant
Try Color Converter Free →Converting Between Formats Manually
HEX to RGB
Split the hex string into three pairs and convert each from hex to decimal. #f58220 splits as f5 (245), 82 (130), 20 (32) giving rgb(245, 130, 32).
RGB to HEX
Convert each decimal value to hex and pad to two digits if needed. 245 converts to f5, 130 converts to 82, 32 converts to 20, giving #f58220. Our Hex Converter can help with decimal-to-hex conversions.
RGB to HSL
The conversion formula normalises RGB values to 0-1 range, finds the maximum and minimum channel values, then calculates hue from which channel is dominant, saturation from the range, and lightness from the average. This involves several conditional branches. For practical work, just use the Color Converter tool — manual RGB-to-HSL conversion is error-prone and time-consuming.
CSS Custom Properties for Colour Themes
Modern CSS practice stores base colour values in custom properties (CSS variables) at the root level and derives variations using HSL: :root --base-hue: 30; --brand: hsl(var(--base-hue), 91%, 54%); --brand-dark: hsl(var(--base-hue), 91%, 35%); --brand-light: hsl(var(--base-hue), 91%, 75%); Changing one variable updates the entire colour palette — a clean approach for theming. If your site meta tags are set up correctly for social sharing, check them with our Meta Tags Checker.