Understanding HEX, RGB, and HSL Color Values

Published August 18, 2026 · By the Zirapy team

When you work with a website or a design tool, one color may be displayed in several different formats. A blue such as #1E90FF can also be written as rgb(30, 144, 255) or hsl(210, 100%, 56%). These values do not represent three different blues; they are simply different ways of describing the same screen color.

Learning the difference helps you copy colors correctly, create consistent brand assets, and make small CSS adjustments without relying entirely on a color picker.

HEX codes in simple terms

HEX is short for hexadecimal. A standard HEX color uses a # sign followed by six characters, for example #F5A524. The code is split into three sections: the first two characters describe red, the middle two describe green, and the last two describe blue.

Each pair goes from 00, meaning none of that color channel, to FF, meaning the maximum amount. That is why #FF0000 creates red, #00FF00 creates green, #0000FF creates blue, and #FFFFFF creates white.

For everyday design and branding, HEX is the easiest format to store and share. It works in CSS, WordPress page builders, Figma, Canva, Photoshop, and most other creative tools. If you maintain a style guide, HEX codes are usually the clearest values to include.

How RGB describes a color

RGB stands for red, green, and blue—the three channels used to create colors on digital displays. Unlike HEX, RGB shows the channel amounts as normal numbers from 0 to 255. For example, rgb(245, 165, 36) is exactly the same orange as #F5A524.

RGB is useful when writing CSS because it can include transparency. You may see the older format rgba(245, 165, 36, 0.5), where the final number means 50% opacity. Modern CSS can also write that concept as rgb(245 165 36 / 50%).

You can use transparency with HEX as well. An eight-character code such as #F5A52480 adds an alpha value at the end. In that example, 80 controls the opacity of the original orange.

HSL makes adjustments easier

HSL means Hue, Saturation, and Lightness. Instead of controlling red, green, and blue directly, it describes a color by its place on the color wheel and how vivid or light it is.

• Hue is measured from 0 to 360 degrees around the color wheel. Red is near 0, green is near 120, and blue is near 240.
• Saturation describes color intensity. A value of 0% is gray, while 100% produces a fully saturated color.
• Lightness controls brightness. At 0% the result is black, at 100% it is white, and the strongest pure hue is usually around 50%.

HSL is useful when building shades for a design system. For a hover state, you can preserve the same hue and saturation while slightly increasing lightness. For darker text or borders, lower the lightness. This gives you more predictable variations than manually searching for new HEX values.

Choose a format for the job

HEX, RGB, and HSL are made for screen-based work. Printing uses physical inks and paper, often through CMYK or a spot-color system. A color that looks bright on your monitor may not reproduce the same way in print, so request printer-ready values for packaging, flyers, and other physical materials.

Convert colors without doing math

There is rarely a reason to convert color formats by hand. Most modern design programs show HEX, RGB, and HSL in the same color panel, while browser developer tools can switch between formats as you inspect a page.

Use the format that makes the task easiest. Keep a HEX master value for your brand, choose HSL when you need controlled variations, and use RGB when working with opacity or programmatic color changes. The final displayed screen color can remain the same regardless of the notation you choose.