Farben

Color on screens

Most displays build colors by mixing red, green, and blue light. In the common 8-bit-per-channel model, each channel ranges from 0 to 255, yielding 256³ ≈ 16.7 million possible colors. Two popular spellings of the same triple dominate web work: RGB functional notation and hexadecimal codes.

Convert a hex value to decimal channels with the hex to RGB tool.

RGB triples

In CSS, rgb(34, 139, 34) means red=34, green=139, blue=34—a forest-like green. Modern CSS also allows rgb(34 139 34 / 0.8) with an alpha (opacity) component. Alpha is not part of the classic six-digit hex color without extension; see eight-digit hex below.

RGB values are device-referred in everyday CSS: they describe signals sent to the display pipeline, not a guaranteed print match. For brand-critical print work, designers use ICC profiles and other color-managed workflows.

Hex encoding

A hex color writes each channel as two hexadecimal digits. Hex digits run 0–9 then A–F (case-insensitive), representing 0–15. Two digits represent 0–255 because 16×16 = 256.

Example: #228B22

• 22 hex → 2×16 + 2 = 34 decimal (red)
• 8B hex → 8×16 + 11 = 139 decimal (green)
• 22 hex → 34 decimal (blue)

So #228B22 equals rgb(34, 139, 34).

The leading # is conventional in HTML/CSS. Some systems omit it; others require it.

Short hex form

CSS allows three-digit hex #rgb as a shorthand where each digit is duplicated: #2A8 expands to #22AA88. This is convenient for coarse colors and design tokens, but it cannot express every 8-bit triple—only those whose channels are multiples of 17 (0x00, 0x11, …, 0xFF).

Alpha in hex

Eight-digit hex #RRGGBBAA appends an alpha channel. #228B2280 is roughly 50% opacity depending on how you interpret the scale (0x80 / 255 ≈ 0.502). Support is solid in modern browsers; when targeting older environments, prefer rgba() / modern rgb() with alpha.

Four-digit short hex #rgba expands similarly by digit duplication.

Converting hex → RGB by hand

1. Strip the #.
2. If length is 3 or 4, expand digits.
3. Split into pairs.
4. Parse each pair as base-16.
5. Optionally convert the alpha pair to a 0–1 float by dividing by 255.

Converting RGB → hex

1. Clamp channels to 0–255 integers.
2. Convert each to two hex digits (pad with a leading zero if needed).
3. Concatenate after #.

Rounding appears when converting from formats with wider gamuts or decimal channels—decide whether to round or truncate and stay consistent.

HSL and other models

Designers often think in HSL (hue, saturation, lightness) because adjusting tint feels natural. Computers still rasterize to RGB for typical displays. Conversion between HSL and RGB is lossless for the CSS gamut when done carefully, but intermediate rounding can drift after many round trips.

Other models (CIELAB, OKLCH, Display P3) appear in modern CSS for perceptual uniformity or wider gamuts. Hex and sRGB remain the lingua franca of design tokens and older specs.

Accessibility: contrast matters more than codes

Whether you write #333333 or rgb(51,51,51), the readability question is contrast against the background. WCAG contrast ratios compare relative luminances. Picking pretty hex codes without checking contrast leaves text hard to read. Pair color tools with a contrast checker when setting body text and UI chrome.

Design systems and tokens

Teams store brand colors as named tokens (--color-brand-600: #228B22) so components never hard-code random hex strings. Document both hex and RGB if different platforms need different APIs (native mobile often wants float 0–1 channels).

Keep a single source of truth; generate the other formats. Hand-maintaining parallel lists drifts.

Common mistakes

• Mixing up #RGB expansion rules.
• Forgetting that 100% in modern CSS RGB is not the same syntax as 0–255 integers.
• Assuming hex on screen matches printed pantone without color management.
• Using pure #000000 on #111111 for “subtle” text—contrast may still fail for small type.
• Parsing hex with regex that allows odd lengths without validation.

Programmatic tips

• Normalize to uppercase or lowercase hex in your codebase for diff stability.
• Validate with a strict pattern: ^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$ (adjust if you disallow short forms).
• When interpolating animations, convert to a linear space or use modern CSS color interpolation rather than naively lerping hex strings as text.

Workflow with converters

When a design tool exports hex and a graphics API wants bytes:

1. Paste hex into a converter.
2. Confirm channels.
3. Feed integers or normalized floats to the API.
4. Spot-check a few brand colors visually.

The from-hex-to-rgb tool is built for that quick confirmation loop.

Summary

Hex colors are base-16 spellings of RGB channel bytes. Six-digit hex maps directly to three 0–255 components; short and eight-digit forms extend the idea for brevity and alpha. Learn the pair-wise conversion once, keep tokens consistent, and verify contrast—because the format you choose matters less than whether people can read the interface.