HEX vs RGB vs HSL: Color Codes Explained for Beginners

Published April 14, 2026 · By the PixelPalette team

If you have ever copied a color from a design tool, you have probably seen the same color written three different ways: #1E90FF, rgb(30, 144, 255), and hsl(210, 100%, 56%). All three describe exactly the same blue. They are simply three different "languages" for telling a screen which color to display. Understanding when to use each one will save you time and prevent ugly inconsistencies across your website, ads, and social media graphics.

HEX: the web standard

A HEX code is a six-character string preceded by a hash symbol, such as #F5A524. The six characters are actually three pairs: the first pair controls red, the second green, and the third blue. Each pair is a hexadecimal number from 00 (none of that channel) to FF (the maximum, equal to 255 in decimal). So #FF0000 is pure red, #00FF00 is pure green, and #FFFFFF is white because all three channels are at full intensity.

HEX is the most widely shared format. Brand guidelines, Figma, Canva, Photoshop, and every CSS stylesheet accept it. When a client asks "what's your brand color?", the expected answer is a HEX code. If you only memorize one format, make it this one.

RGB: the same color, written in decimal

rgb(245, 165, 36) carries exactly the same information as #F5A524 — it just uses ordinary decimal numbers from 0 to 255 for each channel instead of hexadecimal pairs. RGB became popular in CSS because it is easier for humans to reason about ("more red, less blue") and because it has a sibling, rgba(), which adds a fourth value for transparency. For example, rgba(245, 165, 36, 0.5) is the same orange at 50% opacity — something a plain HEX code historically could not express.

Modern CSS also supports 8-digit HEX codes (like #F5A52480) where the last pair encodes transparency, so the practical difference between HEX and RGB today is mostly habit and readability.

HSL: the designer-friendly format

HSL stands for Hue, Saturation, Lightness, and it describes color the way humans actually think about it:

• Hue is the position on the color wheel, from 0 to 360 degrees. 0 is red, 120 is green, 240 is blue.
• Saturation is how vivid the color is, from 0% (gray) to 100% (fully saturated).
• Lightness runs from 0% (black) to 100% (white), with the pure color sitting at 50%.

HSL shines when you need variations of one color. Want a lighter hover state for a button? Keep the hue and saturation, raise the lightness by 10%. Want a darker border? Lower the lightness. Doing the same adjustment in HEX requires a converter or guesswork; in HSL it is a single number change. This is why many design systems define their palettes in HSL internally even if they publish HEX codes externally.

Which one should you use?

One important caveat: HEX, RGB, and HSL all describe colors for screens. Printed material uses the CMYK ink model, and the same HEX value can look noticeably different on paper. If your project will be printed, ask your printer for a CMYK conversion instead of sending HEX codes.

Converting between formats

You almost never need to convert by hand. Every modern design tool shows all three formats in its color picker, browser developer tools let you click the small color swatch in the Styles panel to cycle between HEX, RGB, and HSL, and our own extractor outputs both HEX and RGB for every color it finds in an image. The key thing to remember is that converting between these three formats is lossless — no information is gained or lost, only the notation changes.