Skip to main content

HEX Color Codes: How #FF5733 Becomes Orange

July 22, 2025 โ€ข 4 min read

Every colour on the web is defined by a code. That strange-looking #FF5733 in your CSS is not random โ€” it is a precise recipe for a colour using the hexadecimal number system. Here is how to read and create these codes.

How HEX Codes Work

#RRGGBB โ€” Red, Green, Blue (2 digits each)

Each pair ranges from 00 (none) to FF (maximum = 255 in decimal)

A HEX colour code is made of three pairs of hexadecimal digits. Hexadecimal counts from 0-9 then A-F, giving 16 values per digit. Two digits together give 256 possible values (16 ร— 16).

Breaking Down #FF5733

  • โ–ถ FF = Red at maximum (255 out of 255)
  • โ–ถ 57 = Green at 87 out of 255 (moderate)
  • โ–ถ 33 = Blue at 51 out of 255 (low)
  • โ–ถ Result: Lots of red, some green, little blue = a warm orange-red

Essential HEX Codes to Know

  • โ–ถ #000000 โ€” Pure black (all channels at zero)
  • โ–ถ #FFFFFF โ€” Pure white (all channels at maximum)
  • โ–ถ #FF0000 โ€” Pure red
  • โ–ถ #00FF00 โ€” Pure green
  • โ–ถ #0000FF โ€” Pure blue
  • โ–ถ #FFFF00 โ€” Yellow (red + green, no blue)
  • โ–ถ #FF00FF โ€” Magenta (red + blue, no green)
  • โ–ถ #00FFFF โ€” Cyan (green + blue, no red)
  • โ–ถ #808080 โ€” Medium grey (all channels equal at half)

Shorthand Notation

When both digits in each pair are the same, you can use 3-digit shorthand:

  • โ–ถ #FFF = #FFFFFF (white)
  • โ–ถ #000 = #000000 (black)
  • โ–ถ #F00 = #FF0000 (red)
  • โ–ถ #369 = #336699 (steel blue)

HEX vs RGB

HEX and RGB represent the same colours in different formats:

  • โ–ถ #FF5733 = rgb(255, 87, 51) โ€” same colour, different notation
  • โ–ถ HEX is more compact in CSS code
  • โ–ถ RGB is easier to read and understand at a glance
  • โ–ถ Both support 16.7 million colours (256 ร— 256 ร— 256)

Tips for Working with HEX

  • โ–ถ Equal R, G, B values always produce a shade of grey
  • โ–ถ Higher values = lighter โ€” #333333 is dark grey, #CCCCCC is light grey
  • โ–ถ Adding alpha: Use 8-digit HEX (#FF573380) where the last two digits control transparency
  • โ–ถ Adjusting brightness: Increase all channels equally to lighten, decrease to darken

Try It Now

Open Color Picker โ†’

๐Ÿ”— Try our converter: Open Tool โ†’