🎨 Color Codes Explained: HEX, RGB, HSL & Color Theory for Designers

Every color you see on a website, app, or digital interface is described by a code — a precise mathematical representation of exactly which point in the color space that pixel should occupy. But the same color can be expressed in multiple formats: #0D5C46, rgb(13, 92, 70), hsl(161, 75%, 21%). Which format do you use? When? Why do they exist? And how does any of this connect to the colors you choose for your design in the first place?

This guide is the complete reference for color codes and color theory as they apply to digital design. We cover every format — HEX, RGB, RGBA, HSL, HSLA, and CMYK — with worked conversion examples, explain the color theory fundamentals that help you choose colors that work together, address web accessibility contrast requirements, provide a CSS usage guide, and walk through how to use our free Color Converter tool to convert between formats and explore colors visually.

How Computers Represent Color: The Foundations

The RGB Color Model: Light as Color

Digital screens — phones, laptops, monitors, televisions — produce color by emitting light. Every pixel contains three tiny light sources: Red, Green, and Blue. By varying the intensity of each from 0 (off) to 255 (maximum brightness), screens can produce approximately 16.7 million distinct colors. This is the additive color model: you start with black (no light) and add light to create color. Combining red and green light produces yellow. Combining all three at full intensity produces white light.

This is why RGB is the native language of screens: it maps directly to the physical hardware. Every color you specify in a web browser, design tool, or image editor is ultimately reduced to RGB values before being sent to the display. All other color formats — HEX, HSL, CMYK — are alternative ways of expressing or approximating the same underlying RGB values.

The Subtractive Model: How Print Is Different

Print works on the opposite principle. Paper starts white (reflecting all light). Inks absorb (subtract) portions of the spectrum. The CMYK model — Cyan, Magenta, Yellow, and Key (Black) — works by layering transparent ink pigments that each absorb specific light wavelengths. Mixing all three colors (CMY) theoretically produces black, but in practice produces a muddy dark brown; a separate black (K) ink is required for clean, deep blacks.

This fundamental difference between additive (screen) and subtractive (print) color means that RGB colors cannot always be reproduced exactly in CMYK print. Certain highly saturated blues, greens, and oranges visible on screen fall outside the CMYK gamut — the range of colors reproducible with those inks on paper. This is why designs created for screen often look different when printed, and why professional print workflows require converting from RGB to CMYK before sending to press.

HEX Color Codes: The Web Standard

What Is a HEX Code?

A HEX color code is a 6-digit (or 3-digit shorthand) representation of an RGB color in base-16 (hexadecimal) notation, prefixed with #. The six digits split into three pairs: the first pair is Red, the second is Green, the third is Blue. Each pair represents a value from 00 (0 in decimal) to FF (255 in decimal).

For ToolWeb's brand green: #0D5C46:

• 0D = Red: (0 × 16) + 13 = 13
• 5C = Green: (5 × 16) + 12 = 92
• 46 = Blue: (4 × 16) + 6 = 70
• RGB equivalent: rgb(13, 92, 70)

3-Digit HEX Shorthand

When each pair in a HEX code consists of two identical digits, it can be shortened to a single digit. #FFCC00 can be written as #FC0; #112233 as #123. The browser expands each digit by doubling it — #FC0 → #FFCC00. This shorthand only works when both digits in each pair are the same; it cannot shorten arbitrary codes like #0D5C46.

8-Digit HEX with Alpha (Transparency)

Modern CSS supports an 8-digit HEX format that adds an alpha channel: #RRGGBBAA. The last two digits represent opacity from 00 (fully transparent) to FF (fully opaque). #0D5C4680 is ToolWeb green at approximately 50% opacity. This is mathematically equivalent to rgba(13, 92, 70, 0.5).

When to Use HEX

• Static colors in CSS stylesheets (backgrounds, borders, text)
• Design token definitions and brand color specifications
• Copy-pasting colors between design tools (Figma, Sketch, Adobe XD all export HEX)
• When conciseness is important (6 characters vs. up to 25 for RGBA)

RGB and RGBA: The Intuitive Format

RGB Syntax

The CSS rgb() function takes three parameters — red, green, blue — each as an integer from 0 to 255. rgb(13, 92, 70) is ToolWeb green. In CSS Level 4, commas are optional: rgb(13 92 70) is equivalent. Both syntaxes are supported in all modern browsers.

RGBA: Adding Transparency

The rgba() function adds a fourth parameter: alpha, from 0 (fully transparent) to 1 (fully opaque). rgba(13, 92, 70, 0.5) is ToolWeb green at 50% opacity. This is the most readable format for transparent colors because the opacity value (0.5) is immediately interpretable, unlike the hex equivalent (#0D5C4680) which requires mental hex-to-decimal conversion.

Practical RGB Color Reference

HSL and HSLA: The Designer's Color Model

Why HSL Exists

RGB is efficient for machines but unintuitive for humans. If you have rgb(13, 92, 70) and want a lighter version of the same color, how do you modify it? You would need to understand how each of the three channels contributes to perceived lightness — a non-obvious calculation. HSL solves this by separating color into three properties that map to how humans actually think about color:

The Three HSL Parameters

• Hue (H): The color's position on the color wheel, expressed in degrees from 0 to 360. 0° and 360° = red. 120° = green. 240° = blue. Intermediate values are the spectrum between these anchors. Hue is the answer to "what color is this?"
• Saturation (S): The intensity or purity of the color, from 0% (fully desaturated — gray) to 100% (fully saturated — the pure color). A hue at 50% saturation is a muted, pastel version. Saturation answers "how vivid is this color?"
• Lightness (L): How light or dark the color is, from 0% (black) through 50% (the pure color) to 100% (white). Lightness answers "how bright is this color?"

ToolWeb green (#0D5C46) in HSL: hsl(161, 75%, 21%). Hue 161° is a blue-green (teal/emerald range). Saturation 75% is highly vivid. Lightness 21% is quite dark — a deep forest green.

The Power of HSL in Design Systems

HSL's true advantage is in design systems and component libraries. Consider these operations that are trivial in HSL but require calculation in RGB:

• Create a lighter shade: Increase L — hsl(161, 75%, 40%) is a lighter green
• Create a muted/pastel version: Decrease S — hsl(161, 30%, 21%) is a desaturated, muted green
• Find the complementary color: Add 180° to H — hsl(341, 75%, 21%) is a deep red-pink
• Create a hover state: Increase L by 10% — a trivial change in HSL, a complex calculation in RGB

/* Design system using HSL — easy to maintain */
:root {
  --brand-hue: 161;
  --brand-sat: 75%;

  --color-primary:      hsl(var(--brand-hue), var(--brand-sat), 21%);
  --color-primary-light:hsl(var(--brand-hue), var(--brand-sat), 40%);
  --color-primary-pale: hsl(var(--brand-hue), 30%, 90%);
  --color-primary-dark: hsl(var(--brand-hue), var(--brand-sat), 12%);
}

CMYK: The Print Standard

CMYK Syntax and Values

CMYK expresses color as four percentage values: Cyan, Magenta, Yellow, and Key (Black), each from 0% to 100%. cmyk(86%, 0%, 24%, 64%) approximates ToolWeb green in print. CMYK is not natively supported in CSS — it is used exclusively in print workflows through design software (Adobe Illustrator, InDesign, Photoshop) and sent to printers as ICC-profiled CMYK PDFs.

The RGB-to-CMYK Conversion Problem

Converting between RGB and CMYK is not a simple mathematical formula — it involves color profiles (ICC profiles) that account for the specific characteristics of the inks and paper being used. A CMYK value calculated purely mathematically (without a profile) gives an approximation, not a press-accurate result. For professional print work, always let a profiled conversion in Adobe software or your print provider's preflight tool handle the conversion — never rely on online calculators for print-critical color accuracy.

Color Theory Fundamentals for Digital Designers

The Color Wheel and Harmony Schemes

Color harmony refers to combinations of colors that are aesthetically pleasing because of their geometric relationship on the color wheel. These are not arbitrary preferences — they are patterns identified through centuries of art and design practice. The major harmony schemes:

Color Psychology in Web Design

Color associations vary significantly across cultures, but some patterns are broadly consistent in Western digital product design:

Color Accessibility: WCAG Contrast Ratios

Approximately 8% of men and 0.5% of women have some form of color vision deficiency (commonly called color blindness). Web accessibility standards require that text be readable regardless of color perception. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background:

A white text (#FFFFFF) on ToolWeb green (#0D5C46) has a contrast ratio of approximately 7.2:1, which passes both AA and AAA for normal text. Black on white achieves the maximum 21:1 ratio. To check any color pair, tools like WebAIM's Contrast Checker or the browser DevTools accessibility panel calculate the ratio automatically.

CSS Color Usage Guide (2026)

All CSS Color Formats at a Glance

/* All represent ToolWeb green (#0D5C46 = rgb(13,92,70) = hsl(161,75%,21%)) */

/* HEX */
color: #0D5C46;

/* RGB */
color: rgb(13, 92, 70);

/* RGB (CSS Level 4 — no commas) */
color: rgb(13 92 70);

/* RGBA — 50% transparent */
color: rgba(13, 92, 70, 0.5);

/* HSL */
color: hsl(161, 75%, 21%);

/* HSLA — 50% transparent */
color: hsla(161, 75%, 21%, 0.5);

/* 8-digit HEX — 50% transparent */
color: #0D5C4680;

/* CSS custom properties (recommended for design systems) */
:root { --brand-green: #0D5C46; }
.element { color: var(--brand-green); }

/* Modern: oklch (perceptually uniform, 2024+) */
color: oklch(38% 0.09 161);

Choosing the Right Format for Your Project

• Simple static styles: HEX — shortest, universally supported, easy to copy
• Transparency needed: RGBA or HSLA — both work; RGBA is more widely understood
• Design system / component library: HSL with CSS custom properties — enables programmatic variation and theme switching
• Print design: CMYK — only use in professional design software, not CSS
• Advanced accessibility / color science: oklch / lab — the future standard for perceptually uniform color manipulation

How to Use ToolWeb's Free Color Converter

What the Tool Converts

ToolWeb's Color Converter converts between HEX, RGB, and HSL — the three formats most commonly needed for web and digital design work. It also includes a visual color picker so you can select colors interactively and instantly see all three format equivalents.

FAQ — Color Codes Answered