Convert color values between HEX, RGB, and HSL formats instantly. Enter a value in any format, pick from the color wheel, or paste a CSS color — all three representations update in real time.
Web developers work with three primary color formats when writing CSS and designing interfaces. Each format describes the same visual color in a different mathematical way, and choosing the right format for each use case can make your code more readable, maintainable, and flexible. Most modern browsers and design tools support all three formats interchangeably.
HEX (hexadecimal) color codes are the most widely recognised format in web development. They represent a color as a six-character string prefixed with a hash (#), where each pair of characters represents the red, green, and blue channel values in hexadecimal notation from 00 (minimum, 0 in decimal) to FF (maximum, 255 in decimal). For example, #F97316 breaks down as F9 (249 red), 73 (115 green), 16 (22 blue).
HEX codes can also be written in shorthand when each pair repeats — #FF6600 can be written as #F60. An 8-character HEX code includes an alpha (transparency) channel: #F97316CC where CC is 80% opacity. HEX is the most compact notation and is universally supported, making it the default choice for design system tokens, CSS variables, and any context where brevity matters.
RGB (Red, Green, Blue) represents a color as three decimal values, each from 0 to 255, in the CSS function notation rgb(249, 115, 22). This format is more immediately readable than HEX for developers who think in decimal. The equivalent with transparency is rgba(249, 115, 22, 0.8) where the fourth value is the alpha channel from 0 (transparent) to 1 (fully opaque). In CSS Color Level 4, the modern syntax allows rgb(249 115 22) without commas and rgb(249 115 22 / 80%) for transparency.
RGB is particularly useful when you need to manipulate color values programmatically — for example, when building a colour picker, applying tints, or animating between two colors. It is also the format most directly related to how displays physically produce colour by mixing light from red, green, and blue sub-pixels.
HSL (Hue, Saturation, Lightness) is a human-intuitive colour model that describes colour in terms of perceptual properties rather than hardware characteristics. Hue is a degree on the colour wheel from 0 to 360 (0 = red, 120 = green, 240 = blue). Saturation is a percentage from 0% (grey) to 100% (full colour). Lightness is a percentage from 0% (black) to 100% (white), with 50% being the "pure" colour.
HSL is invaluable for creating colour palettes and themes programmatically. To create a lighter tint of a colour, simply increase the lightness. To create a muted version, decrease the saturation. To create harmonious colour combinations, vary only the hue. CSS preprocessors like Sass have built-in HSL manipulation functions, and CSS Custom Properties make it easy to build theme systems based on HSL values.
Use HEX for design tokens, colour palettes in documentation, and any context where the value is copied from a design tool. Use RGB when you need to manipulate individual channels in JavaScript or when working with Canvas/WebGL. Use HSL when building colour systems, generating shades and tints programmatically, or writing CSS that needs to be easy to reason about visually. All three formats describe exactly the same colours — the choice is purely about readability and convenience for your specific use case.