HEX, RGB, and HSL: A Beginner’s Guide to Digital Color Codes

Published August 18, 2026 · By the Shipirox team

The same screen color can appear in several formats. For example, #1E90FF, rgb(30, 144, 255), and hsl(210, 100%, 56%) all instruct a browser to display the same shade of blue. The difference is not the color itself—it is the notation used to describe it.

Knowing the main formats makes it easier to work with CSS, design tools, brand guidelines, and image palettes. Each format has a situation where it feels more convenient.

HEX: the compact web format

A HEX color begins with a hash symbol followed by hexadecimal characters, such as #F5A524. In the common six-digit form, the code is divided into three pairs: red, green, and blue.

Each pair ranges from 00 to FF. In decimal terms, that is the same as a range from 0 to 255. For example, #FF0000 is red, #00FF00 is green, #0000FF is blue, and #FFFFFF is white because every color channel is at its maximum value.

HEX is popular because it is short, easy to copy, and accepted almost everywhere. It is a practical choice for sharing a brand color with a developer, adding a value to a stylesheet, or saving a swatch in a design tool.

RGB: red, green, and blue in numbers

RGB describes the same three channels with ordinary decimal numbers. For instance, rgb(245, 165, 36) represents the same orange as #F5A524. The first number controls red, the second controls green, and the third controls blue.

RGB is especially useful in CSS when you want to include transparency. Modern CSS allows an alpha value with syntax such as rgb(245 165 36 / 50%), which displays that orange at 50% opacity. The older rgba() notation is also still widely supported and familiar.

HEX can also include alpha using eight digits. For example, #F5A52480 adds a transparency value after the red, green, and blue pairs. In practice, choose the notation your project finds easiest to read and maintain.

HSL: adjust color visually

HSL stands for Hue, Saturation, and Lightness. Instead of describing the amount of red, green, and blue in a color, it describes a color in terms that are often easier to adjust by eye:

• Hue identifies the point on the color wheel, measured from 0 to 360 degrees. Red is near 0, green near 120, and blue near 240.
• Saturation controls intensity. At 0%, the color becomes gray; at 100%, it is fully vivid.
• Lightness controls how light or dark the result is. At 0% it is black, at 100% it is white, and a fully saturated pure hue is commonly near 50%.

HSL can be helpful when creating hover states, borders, lighter backgrounds, and darker text-safe versions of one brand color. You can keep the hue stable while adjusting only lightness or saturation, which is much easier than guessing new HEX values.

When to use each format

HEX, RGB, and HSL are screen-oriented color descriptions. Print uses ink and paper, so it commonly relies on CMYK or spot-color systems. A color that looks vivid on a monitor can appear different when printed, so ask your printer for the correct production values instead of sending a HEX code alone.

Do you need to convert manually?

Usually, no. Figma, Photoshop, Canva, browser developer tools, and many color utilities can display or convert HEX, RGB, and HSL automatically. The important point is that these formats can represent the same screen color; changing notation does not intentionally change the color.

For practical work, keep HEX values in your brand documentation, use HSL when you are building controlled variations in CSS, and use RGB syntax whenever its transparency support makes your code clearer.