Hex Colors: #FF5733, RGB, HSL and Contrast

#FF5733 is rgb(255, 87, 51), a warm orange. Its HSL form is hsl(10.59 100% 60%). In CSS, use it as background-color: #FF5733; for normal-size text on that background, choose black rather than white. It has a 3.15:1 contrast ratio against white and 6.66:1 against black under the WCAG 2.2 formula. Open the hex color converter to inspect or change it.

The six hexadecimal digits split into red, green, and blue byte values. The sections below show the exact calculation, CSS shorthand and alpha syntax, and contrast limits.

What a Hex Color Code Represents

Screens build color by mixing three channels of light: red, green, and blue (RGB). Each channel has an intensity from 0 (off) to 255 (full). A hex color code packs those three numbers into one compact string.

Take #FF5733 apart:

#FF5733 means red 255, green 87, and blue 51, which produces a warm orange. The leading # marks the value as a color literal and has no numeric meaning.

Each channel range, 0-255, fits in one byte and therefore two hex digits (00 to FF). Three channels produce a fixed six-digit value. The hex to ASCII programming guide uses the same byte-pair notation for text data.

Reading the Pairs

Each two-digit pair runs from 00 (none of that color) to FF (full). A handful of anchor values make hex colors readable at a glance:

• 00 = 0 (channel off)
• 80 = 128 (roughly half)
• FF = 255 (channel maxed)

From there you can reason about any color:

• #FFFFFF: all three channels full, white.
• #000000: all three channels off, black.
• #FF0000: red full, pure red.
• #00FF00: green full, pure green.
• #0000FF: blue full, pure blue.
• #808080: equal mid values, mid gray.

Equal channel values produce a shade of gray because no channel dominates.

Converting Hex to RGB by Hand

To convert a pair to decimal, multiply the first digit by 16 and add the second (where A–F are 10–15). For #57:

5 × 16 + 7 = 87

Run that on each pair of #FF5733:

• FF → 15 × 16 + 15 = 255
• 57 → 5 × 16 + 7 = 87
• 33 → 3 × 16 + 3 = 51

Result: rgb(255, 87, 51).

To convert RGB to hex, write each channel with two digits and zero-pad values under 16. For rgb(87, 0, 51), the pairs are 57, 00, and 33, giving #570033. Omitting the leading zero produces an invalid five-digit value.

Converting #FF5733 to HSL

HSL describes the same sRGB color with hue, saturation, and lightness. Applying the CSS Color conversion method to normalized RGB values (1, 0.34118, 0.2) gives:

• Hue: 10.588235°
• Saturation: 100%
• Lightness: 60%

A practical two-decimal CSS representation is therefore hsl(10.59 100% 60%). Rounding the hue to a whole 11° is convenient for display, but it is not the closest reversible representation; the converter keeps two decimals so this example round-trips to #FF5733.

Is #FF5733 Accessible for Text?

Contrast depends on the foreground/background pair, not the color in isolation. Using WCAG 2.2's sRGB linearization, relative-luminance coefficients, and (L1 + 0.05) / (L2 + 0.05) ratio:

These results assume opaque sRGB colors. Alpha transparency must be composited over the actual background before contrast is measured.

Converting in Code

JavaScript

function hexToRgb(hex) {
  hex = hex.replace(/^#/, "");
  // expand 3-digit shorthand to 6 digits
  if (hex.length === 3) {
    hex = hex.split("").map(c => c + c).join("");
  }
  const num = parseInt(hex, 16);
  return {
    r: (num >> 16) & 255,
    g: (num >> 8) & 255,
    b: num & 255,
  };
}

function rgbToHex(r, g, b) {
  return "#" + [r, g, b]
    .map(c => c.toString(16).padStart(2, "0"))
    .join("");
}

console.log(hexToRgb("#FF5733"));      // { r: 255, g: 87, b: 51 }
console.log(rgbToHex(255, 87, 51));    // #ff5733

Python

def hex_to_rgb(hex_code):
    hex_code = hex_code.lstrip("#")
    if len(hex_code) == 3:                       # shorthand
        hex_code = "".join(c * 2 for c in hex_code)
    return tuple(int(hex_code[i:i+2], 16) for i in (0, 2, 4))

def rgb_to_hex(r, g, b):
    return "#{:02X}{:02X}{:02X}".format(r, g, b)

print(hex_to_rgb("#FF5733"))    # (255, 87, 51)
print(rgb_to_hex(255, 87, 51))  # #FF5733

JavaScript bit shifts and Python slices both isolate the three channel bytes.

Shorthand and Alpha Variants

3-digit shorthand

CSS lets you write a 3-digit hex color when each pair has two identical digits. Each digit is duplicated, not padded:

• #F53 expands to #FF5533 (not #0F0503).
• #FFF → #FFFFFF (white).
• #000 → #000000 (black).

Shorthand only works when all three channels happen to be doubled digits, so #FF5733 has no 3-digit form.

8-digit hex (with alpha)

Modern CSS supports an alpha channel for transparency, appended as a fourth pair: #RRGGBBAA.

• AA = FF → fully opaque.
• AA = 00 → fully transparent.
• AA = 80 → about 50% opacity.

So #FF573380 is the same orange at roughly half opacity. There's also a 4-digit shorthand (#RGBA) that expands the same way as the 3-digit form.

Common Mistakes

• Dropping zero-padding. Channel value 10 is 0A, not A. Forgetting the leading zero shifts every following digit and corrupts the color.
• Confusing shorthand with truncation. #F53 does not mean "the first three digits of a 6-digit code." It means each digit is doubled. Truncating a 6-digit code gives a different color.
• Mixing up channel order. Hex colors are red-green-blue. Some image and embedded formats store color as BGR or ARGB; if your reds and blues look swapped, the byte order differs.
• Treating color hex and text hex as different number systems. Both use base 16. FF is 255 whether it labels a red channel or a data byte; the surrounding format supplies the interpretation.
• Case anxiety. Hex is case-insensitive: #ff5733 and #FF5733 are identical. Lowercase is the CSS convention, but neither is wrong.

Why Hex Won the Web

CSS can express the same sRGB color as rgb(255, 87, 51), but hex notation is shorter, fixed-width, and easy to copy between design tools, code, and documentation. Its three byte-sized channels avoid rounding when converting to and from integer RGB channel values. The same compactness that helps when reading raw bytes also makes hex convenient for sRGB colors.

FAQ

What does a hex color code like #FF5733 mean?

It specifies red, green, and blue intensities in hexadecimal. The pairs are FF (red = 255), 57 (green = 87), and 33 (blue = 51). #FF5733 is therefore a warm orange. The leading # marks it as a color literal.

How do I convert a hex color to RGB?

Split the six digits into three pairs and convert each from base-16 to decimal: multiply the first digit by 16 and add the second. #FF5733 becomes red 255, green 87, blue 51, i.e. rgb(255, 87, 51). In code, parseInt("FF", 16) in JavaScript or int("FF", 16) in Python does each pair, or use the hex color converter for an instant result.

What's the difference between #F53 and #FF5533?

They are the same color. Three-digit shorthand duplicates each digit, so #F53 expands to #FF5533. #FF5733 cannot be shortened because the green pair contains different digits.

What is the 8-digit hex color format?

The format is #RRGGBBAA, where the fourth pair is the alpha channel. FF is opaque, 00 is transparent, and 80 is about 50% opacity. CSS also supports four-digit #RGBA shorthand.

Are hex color codes case-sensitive?

No. #FF5733, #ff5733, and #Ff5733 all describe the identical color, because hexadecimal digits A–F mean the same value regardless of case. Lowercase is the common CSS style, but tools and browsers accept either.

Why use hexadecimal for colors instead of plain numbers?

Each sRGB channel ranges from 0 to 255 in this notation, which fits in one byte and two hex digits, so a full RGB color fits in a fixed six-character string with no padding ambiguity. Hex codes are compact and easy to copy between design and code; they describe CSS channel values without making assumptions about a browser's internal color storage.

Summary

Split #RRGGBB into three byte-sized pairs to read or calculate the channel values. Three- and four-digit forms duplicate each digit, while an eight-digit value adds alpha as the final pair. Use the hex color converter when you need the RGB, HSL, and contrast results together.