Number Base & Color Code Converters: Binary, Hex, and Beyond

This guide explains how number base conversion works for binary, decimal, and hexadecimal, then shows how these same ideas underpin digital color models like RGB, HSL, CMYK, and RGBA -- with real formulas, worked examples, and free online converters for every conversion pair.

The Three Essential Number Systems

Computers operate in binary (base 2, digits 0-1), humans naturally count in decimal (base 10, digits 0-9), and programmers commonly use hexadecimal (base 16, digits 0-9 then A-F) as a compact way to represent binary data. Understanding how to move between these systems is a foundational skill in computing, electronics, and web development.

Binary to Decimal Conversion

Each binary digit represents a power of 2, with the rightmost digit representing 2^0 = 1, the next 2^1 = 2, then 2^2 = 4, and so on. To convert, multiply each digit by its positional power of 2 and sum the results.

Formula: Decimal = sum of (bit x 2^position), where position counts from 0 on the right.

Worked example: Convert binary 1011 to decimal. = (1 x 2^3) + (0 x 2^2) + (1 x 2^1) + (1 x 2^0) = 8 + 0 + 2 + 1 = 11. Verify with the Binary to Decimal converter.

Decimal to Binary Conversion

Reverse the process using repeated division by 2. Divide the decimal number by 2, record the remainder (0 or 1), then divide the quotient by 2 again. Repeat until the quotient is 0. Reading the remainders from bottom to top gives the binary number.

Worked example: Convert decimal 11 to binary. 11 / 2 = 5 remainder 1; 5 / 2 = 2 remainder 1; 2 / 2 = 1 remainder 0; 1 / 2 = 0 remainder 1. Reading remainders bottom to top: 1011. Use the Decimal to Binary converter for any number.

Hexadecimal: Compact Binary Notation

Hexadecimal (hex) uses 16 symbols: 0-9 and A-F, where A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. One hex digit represents exactly four binary bits (a nibble), so a byte (8 bits) maps neatly to two hex digits. This makes hex ideal for memory addresses and color codes.

Binary to Hex: Group the binary number into 4-bit chunks from the right, then convert each group to its hex digit. Example: 10110111 broken into 1011 and 0111 gives B and 7, so the result is 0xB7. The Binary to Hex converter automates this grouping.

Hex to Decimal: Each hex digit represents a power of 16. Example: 0xB7 = (11 x 16^1) + (7 x 16^0) = 176 + 7 = 183. The Hex to Decimal converter handles multi-digit hex values instantly, and Decimal to Hex reverses the process.

How Color Models Work

Digital colors are just structured numbers. The three dominant color models in web and print design are:

RGB: Red, Green, Blue -- each channel is an integer 0-255 (or a hex pair). Used for screens.
HSL: Hue (0-360 degrees), Saturation (0-100%), Lightness (0-100%). More intuitive for designers because adjusting lightness or saturation does not change the hue.
CMYK: Cyan, Magenta, Yellow, Black -- percentages used in print workflows.

A hex color code like #3A7BD5 is simply three hex pairs: R = 0x3A = 58, G = 0x7B = 123, B = 0xD5 = 213. The Hex to RGBA Color Converter decodes any hex code into its individual RGBA channels, including an optional alpha (opacity) value.

Converting Between Color Models

RGB to HSL: Normalize each RGB channel to 0-1 by dividing by 255. Find Cmax (largest) and Cmin (smallest). Lightness L = (Cmax + Cmin) / 2. Saturation S = (Cmax - Cmin) / (1 - |2L - 1|) when L is not 0 or 1. Hue H depends on which channel is Cmax. The RGB to HSL Color Converter applies this algorithm precisely; HSL to RGB reverses it.

RGB to CMYK: Normalize RGB to 0-1. K (black) = 1 - max(R, G, B). Then C = (1 - R - K) / (1 - K), M = (1 - G - K) / (1 - K), Y = (1 - B - K) / (1 - K). The RGB to CMYK Color Converter handles this in one step, and CMYK to RGB reverses the math for converting print specs to screen values.

Colour Accessibility: Contrast and Luminance

The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio between text and its background to ensure readability for people with low vision. Contrast ratio is based on the relative luminance of each color -- a weighted sum of the linearized RGB channels:

L = 0.2126 x R + 0.7152 x G + 0.0722 x B (where each channel has been gamma-decoded to the 0-1 linear range)

The Relative Luminance Calculator computes L for any color. Contrast ratio between two luminances L1 (lighter) and L2 (darker) is (L1 + 0.05) / (L2 + 0.05). WCAG AA requires at least 4.5:1 for normal text. The Color Contrast Checker calculates this ratio for any two colors and tells you whether you pass AA and AAA thresholds.

Common Mistakes

Confusing hex color pairs with plain hex numbers: #FF is 255 in decimal, but a full hex color code is three concatenated pairs, not one number.
Forgetting gamma correction in luminance calculations: Raw RGB values are not linear -- you must linearize them before applying the luminance formula, or your contrast ratio will be wrong.
Treating HSL saturation and CMYK as interchangeable: Both describe colour intensity but are defined differently and cannot be substituted for each other.

Frequently Asked Questions

Why do programmers use hexadecimal instead of decimal?

Because one hex digit maps exactly to four binary bits, hex provides a compact, human-readable representation of binary data. Two hex digits perfectly represent one byte, making memory dumps, color codes, and bitmasks much easier to read than their decimal equivalents.

What does RGBA mean compared to RGB?

RGBA adds a fourth channel -- Alpha -- which controls opacity, ranging from 0 (fully transparent) to 1 or 255 (fully opaque). It is used extensively in CSS and image compositing.

How do I convert a hex color to HSV?

HSV (Hue, Saturation, Value) is similar to HSL but uses Value (brightness of the brightest tone) instead of Lightness. The Hex to HSV Color Converter handles this directly; you can also use Hex to HSL if your tool requires the HSL model instead.