Color Converter Guide: HEX, RGB, HSL for Web Design

Every color on a screen is stored as numbers, but which numbers you see depends on which format a designer or developer chose: HEX codes in a CSS file, RGB values in a design tool, or HSL sliders in a color picker. They all describe the exact same colors, just with different math underneath.

HEX: Compact Codes for Web and Code

HEX notation packs red, green, and blue into a six-digit code like #3498DB, where the first two digits are red, the middle two are green, and the last two are blue, each ranging from 00 to FF in hexadecimal (0 to 255 in decimal). #FFFFFF is pure white, #000000 is pure black, and #FF0000 is pure red. A shorthand three-digit form exists too: #F00 expands to #FF0000. HEX is popular in CSS and design tools because it is compact and easy to copy-paste as a single string.

RGB: The Additive Color Model

RGB expresses the same three channels as plain decimal numbers from 0 to 255 instead of hex pairs: rgb(52, 152, 219) is the same blue as #3498DB (52 in decimal equals 34 in hex, 152 equals 98, 219 equals DB). RGB is an additive model, meaning you start from black and add light: mixing full red, green, and blue at maximum gives white. This matches how screens actually work, since each pixel is made of red, green, and blue sub-pixels emitting light.

HSL: Thinking in Hue, Saturation, and Lightness

HSL describes color more the way humans think about it. Hue is a position on the color wheel from 0 to 360 degrees (0 and 360 are red, 120 is green, 240 is blue). Saturation is intensity from 0 percent (gray) to 100 percent (vivid). Lightness runs from 0 percent (black) to 100 percent (white), with 50 percent being the pure hue. That same blue converts to roughly hsl(204, 70%, 53%). HSL makes it much easier to create color variations: to make a lighter version of a brand color, just increase the lightness value and keep hue and saturation the same, something that is not intuitive to do directly in RGB or HEX.

Converting Between the Formats

Going from HEX to RGB means splitting the six digits into three pairs and converting each pair from base 16 to base 10. Going from RGB to HSL requires finding the maximum and minimum of the three channel values, then computing lightness as their average, saturation based on the spread between them, and hue based on which channel is dominant. This is genuinely fiddly to do by hand, which is why designers rely on conversion tools rather than manual math during actual design work.

Why the Same Color Might Look Different

Beyond format, monitor calibration, color profile (sRGB versus Display P3), and ambient lighting all affect how a color actually renders. Two screens showing the identical HEX code can look noticeably different if one has a wider color gamut or different brightness calibration. This is a separate issue from format conversion, but it is worth knowing that identical numbers do not always guarantee identical visual appearance across devices.

Common Format Choices by Use Case

• HEX: CSS stylesheets, design handoff documents, brand style guides
• RGB: image editing software, canvas/graphics programming
• HSL: creating color palettes and shade variations programmatically
• RGBA/HSLA: any of the above plus an alpha channel for transparency

Convert Colors Instantly

Our color converter switches between HEX, RGB, and HSL in real time with a live preview, so you can paste in any format and get accurate values in the other two without doing the hex-to-decimal math by hand.