Hex Color to Binary Converter

How Hex Colors Map to Binary

Every color you see on a screen is ultimately stored as a sequence of bits. When I first started working with graphics programming, the moment it clicked was when I realized that #FF5733 is not some magic code — it is just three bytes of binary data, one each for Red, Green, and Blue. The hex notation is just a more compact way to write those bytes.

A standard hex color code like #RRGGBB contains six hexadecimal digits. Each pair of digits represents one 8-bit channel. Since one hex digit holds exactly 4 bits, two hex digits make a full byte. The binary representation of each channel is straightforward: convert the hex pair to decimal, then write that decimal value as an 8-bit binary number.

During a design system overhaul, I had to programmatically parse thousands of hex color values from Figma export files. Being able to mentally convert #3366CC to its binary RGB components saved me from writing a separate parser.

In my day-to-day work building web tools, I find myself doing this conversion constantly — whether I am debugging a CSS color mismatch or packing pixel data for a canvas render. Understanding the binary behind the hex makes color manipulation far less mysterious.

#FF5733 — Worked Binary Breakdown

Let us walk through the color #FF5733 step by step. This is a vivid orange-red shade. I use this color often in my projects because it demonstrates a nice range: one channel maxed out and two channels at mid-to-low values.

Red Channel: FF (255)

Green Channel: 57 (87)

Blue Channel: 33 (51)

Putting it all together, the full 24-bit binary representation of #FF5733 is 11111111 01010111 00110011. That is exactly 24 bits — 8 per channel. Each time your GPU renders this color on screen, these 24 bits travel through the graphics pipeline.

Manual Hex-to-Binary Conversion Method

When I need to convert a hex color to binary without a tool, I use a simple three-step method that I have developed over years of debugging pixel formats. It never fails and works for any 6-digit hex color.

A quick sanity check I always do: the leftmost bit of each binary byte tells you whether that channel value is 128 or higher. If the hex pair starts with 8 or above (8, 9, A-F), the binary byte starts with 1. This has saved me countless times when I am reading raw hex dumps from image files.

// JavaScript hex color to binary converter I use in dev tools:
function hexColorToBinary(hex) {
  const r = parseInt(hex.slice(1,3), 16).toString(2).padStart(8, '0');
  const g = parseInt(hex.slice(3,5), 16).toString(2).padStart(8, '0');
  const b = parseInt(hex.slice(5,7), 16).toString(2).padStart(8, '0');
  return `${r} ${g} ${b}`;
}
console.log(hexColorToBinary('#FF5733'));
// Output: "11111111 01010111 00110011"

24-Bit Color and the Full Color Space

Each RGB channel is an 8-bit value, giving us 256 possible intensities per channel (0-255). Three channels combined gives 256 × 256 × 256 = 16,777,216 possible colors. That is the full 24-bit true color space used by virtually every modern display.

Here is how those 16.7 million colors look at the bit level — the entire range fits into three bytes:

Notice something interesting about pure red, green, and blue: in each case, only one byte is fully set, and the other two bytes are all zeros. When you see a color like #FF00FF (magenta), you know the Red and Blue channels are fully on but Green is off — 11111111 00000000 11111111. Thinking in binary rather than hex makes these patterns immediately obvious.