Digital & Tech Units: The Complete Guide to Bytes, Pixels & Time

Computers measure the world in their own dialects: bytes, bits, pixels, hex, RGB, Unix seconds, ems, and rems. These units are everywhere — in your hard drive's marketing label, in your internet bill, in your CSS file, in your photo editor — but most people never learn how they actually work. And the gaps in that understanding cost real money: hard drives that look smaller than advertised, internet plans that don't deliver what you thought, colors that don't match across screens.

This guide walks through every digital unit you'll meet as a developer, designer, or curious user. We'll cover the great kilobyte controversy (1,000 vs 1,024), why Mbps isn't MBps, the three main color systems (HEX, RGB, HSL), why programmers love hexadecimal, the Unix epoch and the Year 2038 problem, and the four CSS typography units that constantly cause layout bugs.

For instant conversion, jump to the data storage converter, color converter, or Unix timestamp converter. For the full story, read on.

The 1 GB Marketing Controversy

The single biggest digital-units fight of the past 40 years is over what "1 kilobyte" means.

Term	Decimal (SI)	Binary (IEC)
kilo (k)	1,000	1,024 (kibi, Ki)
mega (M)	1,000,000	1,048,576 (mebi, Mi)
giga (G)	10⁹	2³⁰ ≈ 1.074×10⁹ (gibi, Gi)
tera (T)	10¹²	2⁴⁰ ≈ 1.1×10¹² (tebi, Ti)

When you buy a "1 TB" hard drive, the manufacturer uses the decimal definition: 1,000,000,000,000 bytes. When Windows reports the drive's capacity, it uses the binary definition: a TB-sized drive shows up as about 931 GB. Nothing is broken — you got exactly the bytes you paid for. It's just the labels disagree.

1,000,000,000,000 / 2^40 = 0.909... TiB (binary) = 931 GiB

The IEC tried to fix this in 1998 by introducing the binary prefixes kibi (Ki), mebi (Mi), gibi (Gi), tebi (Ti). Linux and macOS now use these consistently. Windows still calls 1,024 MB "1 GB." Hard drive manufacturers still use decimal. So the confusion persists.

For a deeper look, see MB vs MiB.

💡 Fun fact: A 2007 class-action lawsuit against Seagate (and similar suits against Western Digital and others) was settled when the manufacturers agreed to add disclaimers — "1 GB = 1,000,000,000 bytes" — to packaging. They didn't change their definitions; they just clarified them in fine print.

The data storage converter handles both definitions side by side.

Mbps vs MBps — Lowercase b Matters

Your internet plan probably advertises "100 Mbps" — that's megabits per second, not megabytes. Lowercase b = bit, uppercase B = byte. 1 byte = 8 bits, so:

100 Mbps = 12.5 MB/s (megabytes per second)

When you download a 1 GB file on a 100 Mbps connection, the fastest theoretical transfer takes 80 seconds (1,000 MB / 12.5 MB/s). In practice, protocol overhead, TCP windowing, and other inefficiencies make it closer to 90–100 seconds.

Speed	MB/s download	Time for 1 GB	Time for 100 GB
25 Mbps	3.1	5.3 min	9 hr
100 Mbps	12.5	80 sec	2.2 hr
500 Mbps	62.5	16 sec	27 min
1 Gbps	125	8 sec	13 min
10 Gbps	1,250	0.8 sec	1.3 min

The data speed converter handles bit/byte conversions across all common prefixes.

Color Systems — HEX, RGB, HSL, HSV

Colors on screens are defined by three numbers, but designers use four different schemes to name those numbers.

HEX — The CSS Default

A hex color is six hexadecimal digits: #RRGGBB. Each pair represents 0–255 for one color channel.

• #FF0000 = pure red (R=255, G=0, B=0)
• #00FF00 = pure green
• #0000FF = pure blue
• #FFFFFF = white
• #000000 = black
• #808080 = mid gray

Hex is compact and copy-pasteable — its primary advantage. The color converter reads any of HEX/RGB/HSL/HSV and outputs all four.

RGB — Same Numbers, Decimal Form

rgb(255, 0, 0) is the same as #FF0000. Modern CSS adds rgba() for alpha (transparency): rgba(255, 0, 0, 0.5) is half-transparent red.

HSL — Hue, Saturation, Lightness

HSL describes color the way humans think about it:

• Hue (0–360°): the color around a color wheel. 0° = red, 120° = green, 240° = blue.
• Saturation (0–100%): how vivid. 0% is gray; 100% is fully saturated.
• Lightness (0–100%): 0% is black, 50% is full color, 100% is white.

hsl(0, 100%, 50%) is pure red. hsl(120, 100%, 50%) is pure green.

HSL is the easiest system for designing color palettes because rotating hue keeps brightness constant.

HSV — Hue, Saturation, Value

HSV is similar to HSL but uses value instead of lightness. hsv(0, 100%, 100%) is pure red. Photoshop, GIMP, and most digital painting tools use HSV as their picker default.

💡 Fun fact: Humans can distinguish about 10 million colors, but the standard sRGB color space used by most screens can only display about 16.8 million combinations (256³). Modern HDR displays (e.g. P3) can show closer to 1 billion colors.

Number Bases — Binary, Octal, Decimal, Hexadecimal

Numbers can be written in any base. Computers fundamentally use base-2 (binary). Humans use base-10 (decimal). Programmers often use base-16 (hexadecimal) as a compact way to write binary.

Decimal	Binary	Octal	Hex
0	0	0	0
1	1	1	1
7	111	7	7
8	1000	10	8
10	1010	12	A
15	1111	17	F
16	10000	20	10
100	1100100	144	64
255	11111111	377	FF
1024	10000000000	2000	400

Why programmers love hex: one hex digit equals exactly 4 bits (a nibble). Two hex digits equal one byte (8 bits, 0–255). So a 32-bit value is exactly 8 hex digits, and you can read the bit pattern at a glance:

0xDEADBEEF = 1101 1110 1010 1101 1011 1110 1110 1111

The number base converter handles binary/octal/decimal/hex in all directions.

Unix Time and the Year 2038 Problem

Unix systems represent time as the number of seconds since midnight UTC on January 1, 1970 — the Unix epoch. This single integer powers nearly every timestamp in modern computing.

1700000000 → 2023-11-14 22:13:20 UTC

The Unix timestamp converter shows a live ticking epoch and converts to/from any date.

Why 1970?

Unix was being developed at Bell Labs in 1969–1970. Picking the start of 1970 as "zero" was a convenient rounding decision; the designers expected the system to be replaced long before any rollover.

The Year 2038 Problem

A 32-bit signed integer can represent values from −2,147,483,648 to +2,147,483,647. Counting seconds from Jan 1, 1970, the upper limit is reached at:

Tuesday, January 19, 2038, at 03:14:07 UTC

One second later, a 32-bit Unix timestamp overflows to negative — interpreted as December 13, 1901. Any system still using 32-bit timestamps at that moment will misbehave.

Most modern operating systems (Linux x86-64, macOS, Windows 10+) already use 64-bit timestamps, which won't overflow for 292 billion years. The remaining risk lies in:

• Embedded systems (industrial controllers, smart meters, medical devices)
• Old satellite systems
• File formats that hardcode 32-bit timestamps (some legacy database schemas)
• Internal calculations in older mobile apps

Industry-wide migration to 64-bit timestamps is ongoing.

💡 Fun fact: The Year 2038 problem is sometimes called "Y2K38" or the "Epochalypse." It's structurally identical to the Year 2000 problem, just with binary integers instead of 2-digit year strings.

CSS Typography Units — px, em, rem, pt

CSS gives you four common units to size text and spacing — and confusing them is one of the top causes of layout bugs.

Absolute units

• px (pixels): a CSS pixel is a reference pixel, not a hardware pixel. It's defined as 1/96 of an inch at standard viewing distance. On a phone with a high-density screen, 1 CSS px may be 3 hardware px.
• pt (points): the print industry's unit. 1 pt = 1/72 inch. CSS pt = (96/72) px ≈ 1.333 px.
• in, cm, mm: rarely used on screen because they assume a known physical size.

Relative units

• em: relative to the font size of the parent element. If parent is 16 px, 1em = 16px. If you nest divs each with font-size: 1.2em, you compound — three levels deep becomes 1.728× the original.
• rem (root em): relative to the root html element's font size (default 16 px). 1rem = 16px regardless of nesting. This is what most modern stylesheets use for predictable scaling.
• %: relative to parent (similar issues as em).
• vw / vh: 1% of viewport width / height.

Unit	At root (16px)	At 1.5em parent (24px)
1 px	1 px	1 px
1 em	16 px	24 px
1 rem	16 px	16 px
1 pt	1.333 px	1.333 px
1% (font)	16 px	24 px

Rule of thumb: use rem for font sizes and most spacing; use em only when you specifically want a child element to scale with its parent.

The typography converter handles all of these.

Pixels — Physical vs Logical

Modern phone and laptop displays have device pixels much smaller than CSS pixels. Apple's "Retina" displays pack 2× or 3× the device pixels into the same physical area. To keep websites readable, CSS abstracts this away:

device_pixels = css_pixels × devicePixelRatio

Device	devicePixelRatio	Display
Standard laptop	1×	1 CSS px = 1 device px
MacBook Retina	2×	1 CSS px = 4 device px (2 in each direction)
iPhone Pro	3×	1 CSS px = 9 device px

Always think in CSS pixels when laying out a page; let the browser handle the device-pixel mapping.

Audio and Video Bitrate

Streaming services and codecs report bitrate in kbps (kilobits per second) or Mbps:

Content	Typical bitrate
Phone-quality MP3	128 kbps
CD-quality MP3	320 kbps
FLAC (lossless)	800–1,400 kbps
Spotify (very high)	320 kbps
Netflix SD	1 Mbps
Netflix HD	5 Mbps
Netflix 4K	15 Mbps
YouTube 4K	20+ Mbps
Blu-ray	30–40 Mbps
4K HDR Blu-ray	80–100 Mbps

Bitrate × duration = file size (in bits). A 1-hour 5 Mbps stream is 5 × 3600 / 8 = 2.25 GB.

Putting It Together — Reading a Web Page

When your browser renders this page, dozens of digital units come into play in milliseconds:

1. Your 100 Mbps connection downloads the HTML in milliseconds.
2. The HTML is 24 KB (24,000 bytes — and yes, also 23.4 KiB in the binary system).
3. The CSS declares font-size: 1rem at root and color: #1a2b3c.
4. Your monitor renders that color as rgb(26, 43, 60) at hardware pixel level, scaled by your devicePixelRatio.
5. The page calls a JavaScript function that uses Date.now() to get the current Unix timestamp.
6. Your tab uses 150 MB of RAM (= 156,672,000 bytes by the binary definition).

Every step is governed by one of the units in this guide.

FAQ

Why is my 1 TB drive only 931 GB? The drive manufacturer used decimal (1 TB = 10¹² bytes) but Windows reports in binary (1 GB = 2³⁰ bytes). The math: 10¹² / 2³⁰ = 931 GiB. You got the bytes; the label just disagrees.

Should I use HEX, RGB, or HSL in my CSS? HEX for static colors (compact, copy-pasteable). HSL for systematic palettes (easy to tweak hue/lightness). RGB/RGBA when you need transparency. Modern CSS supports all of them as equivalent inputs.

Is the Year 2038 problem real or theoretical? Real for legacy 32-bit systems (some embedded devices, old databases, certain file formats). Already solved for nearly all modern operating systems and software. The risk is concentrated in industrial control, automotive, and aerospace systems that get updated slowly.

Why does my screen show different colors than my friend's? Three reasons: different color gamuts (sRGB vs P3 vs Adobe RGB), different brightness/contrast settings, and uncalibrated displays. Professional designers use hardware colorimeters to calibrate monitors monthly.

Is rem always better than em? Mostly yes. rem is predictable; em compounds if you nest elements that each set font-size. Use em only when you want a child to deliberately scale with its parent (e.g., padding on a button should usually be in em).

Related guides

• Blog: MB vs MiB — The Storage Marketing Story — the full kibibyte vs kilobyte argument.
• Converter: Data Storage Converter — bytes, KB/KiB, MB/MiB, GB/GiB, TB/TiB.
• Converter: Data Speed Converter — bits, bytes, Mbps, MBps.
• Converter: Color Converter — HEX, RGB, HSL, HSV.
• Converter: Number Base Converter — binary, octal, decimal, hex.
• Converter: Unix Timestamp Converter — live epoch ↔ human date.
• Converter: Typography Converter — px, em, rem, pt, %.
• Quick conversions:
  • 100 Mbps to MB/s
  • 1 TB to GiB
  • #FF5733 to RGB
  • 255 to hex

Computers speak in their own units. The shorter the gap between your mental model and the machine's, the fewer bugs, surprises, and over-priced internet plans you'll encounter.