The Complete Guide to Color for Designers & Developers

Color is the one design property that every discipline touches and almost nobody agrees on how to talk about. A designer thinks in swatches and moodboards. A frontend developer thinks in hex strings and CSS custom properties. A print vendor thinks in CMYK percentages and Pantone numbers. An accessibility auditor thinks in contrast ratios. This guide is the connective tissue between those vocabularies — the models, the math, and the practical decisions — with links to the calculators and reference pages on this site that do the actual arithmetic so you don't have to keep re-deriving it.

The color models, and when each one earns its keep

RGB (red, green, blue, each 0–255) is how screens actually emit light — it's additive, so mixing all three channels at full intensity gives white. It's also the model developers reach for first because #FF6347 and rgb(255, 99, 71) are the same tomato-red value, just two different notations for the identical additive triple. Run any hex through the hex-to-RGB converter or go the other way with RGB-to-hex if you're starting from channel values instead.

HSL (hue, saturation, lightness) re-parameterizes the same RGB cube into something a human can reason about: "a slightly desaturated orange, medium-dark" maps directly onto HSL numbers in a way rgb(180, 90, 40) never will. This is why design tools default to an HSL or HSB picker even though the browser stores the pixel as RGB underneath. The color picker exposes both simultaneously so you can feel the relationship between them.

CMYK is the odd one out: it's subtractive, built for pigment on paper rather than light from a screen, and it cannot represent everything RGB can (and vice versa — RGB can't represent every CMYK ink combination either). If you're prepping brand colors for a print vendor, don't just eyeball a CMYK approximation of your hex; run the actual conversion and expect the printed result to shift, because it will. See the print color guide for the color-management detail, and use the color converter to get every model — RGB, HSL, HSV, CMYK, Lab, and OKLCH — from a single hex input.

Lab and OKLCH exist to fix a real defect in RGB and HSL: neither is perceptually uniform. A 10-degree hue shift at high lightness looks like a much bigger jump than the identical 10-degree shift at low lightness, and two colors with the "same" HSL lightness can look meaningfully different in brightness to the human eye. Lab (1976) was the earlier attempt at fixing this; OKLCH (Björn Ottosson, 2020) is the modern refinement built specifically to behave well in CSS gradients and programmatic palette generation. Full detail, including the actual matrix math, is in what OKLCH is and why it matters.

Building an accessible palette isn't optional anymore

WCAG 2.x defines contrast ratio from relative luminance — L = 0.2126*R + 0.7152*G + 0.0722*B in linearized channel space — and the pass thresholds are specific: 4.5:1 for normal text at AA, 7:1 at AAA, and a relaxed 3:1 for large text (18pt+, or 14pt+ bold) and for UI component boundaries. Those numbers aren't arbitrary; they come from legibility research baked into the spec itself. The full derivation, with worked examples, lives in WCAG contrast explained, and you can check any foreground/background pair instantly with the contrast checker.

Passing contrast for text is necessary but not sufficient. Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, overwhelmingly red-green (deuteranomaly/deuteranopia and protanomaly/protanopia). If your UI's only signal for "error" versus "success" is red versus green with no icon, shape, or text label, a meaningful share of your audience genuinely cannot read the state. Run your palette through the color blindness simulator — it applies the Machado, Oliveira & Fernandes (2009) dichromacy matrices — and read the full walkthrough at designing for color blindness. For a step-by-step palette-building workflow rather than just the theory, see choosing an accessible color palette.

Harmony: the color wheel rules that actually hold up

Classic color theory gives you a handful of reliable starting formulas, all computable directly from hue angle once you're working in HSL or OKLCH:

• Complementary — hues 180° apart (e.g., a blue and its orange opposite). Maximum contrast, useful for a single accent against a dominant base, risky as two equal-weight colors because they visually vibrate.
• Analogous — hues within about 30–60° of each other. Naturally harmonious because they share underlying wavelength proximity; the risk is low contrast if you don't vary lightness/saturation across the set.
• Triadic — three hues 120° apart. Balanced and vibrant, common in illustration and brand systems that need three colors of roughly equal visual weight.
• Split-complementary — a base hue plus the two hues adjacent to its complement (180° ± 30°, roughly). Most of the contrast of a complementary pair with less visual tension.

The color harmonies tool generates all of these from a single input hex, and color theory basics for developers covers the reasoning in more depth, including why the traditional RYB "artist's wheel" doesn't map cleanly onto the RGB/HSL wheel browsers use. For a focused comparison of the two most-used pairings, read complementary vs. analogous colors.

Naming, families, and "what goes with this"

Every named color on this site — 148 standard CSS/X11 names like Tomato, Coral, and Teal, plus 946 colors from the xkcd color-naming survey like Cloudy Blue — has its own reference page with full conversions, nearest-neighbor names, and computed shade/tint ramps. If you have a hex value and want the closest human name for it, the color name finder runs a Delta-E nearest-match in Lab space, which is far more reliable than eyeballing an RGB distance because it accounts for perceptual non-uniformity.

Need a full ramp of lighter and darker steps from one base color — the kind of thing a design-token scale needs? The shades, tints & tones generator computes it programmatically, and the 20 hue-family hub pages (from red shades and blue shades through less obvious families like teal shades and fuchsia shades) collect every named color that falls in that hue range.

Pairing colors that already work together is its own problem, and guessing is slow. The goes-with generator computes complementary and analogous partners for any of the 148 CSS-named colors — see it applied to what goes with Tomato, Coral, or Slateblue as worked examples.

Gradients, CSS syntax, and the tooling gap between them

CSS gradients are simple to write and easy to make ugly: a naive linear-gradient(#ff0000, #0000ff) interpolates straight through RGB space, which crosses a muddy, desaturated middle because red and blue's shortest RGB path runs through gray, not through purple. This is one of the concrete reasons OKLCH-based interpolation (linear-gradient(in oklch, ...) in modern CSS) produces visibly better gradients than the RGB default — the perceptual path stays vivid the whole way through. Build one visually with the gradient generator, then export the exact CSS with the gradient-to-code tool instead of hand-copying pixel values off a screenshot. For current techniques and where gradients are trending — mesh gradients, grain overlays, duotone photography treatments — see gradient design trends.

Extracting palettes from real images

Sometimes the palette isn't theoretical — it's already sitting in a product photo, a brand logo, or a piece of reference art, and you need the dominant colors out of it programmatically rather than by eye. The image color extractor does exactly this client-side (no image ever leaves the browser), clustering pixel colors and returning the dominant swatches with hex values ready to drop into a palette or design-token file.

From palette to production: tokens and CSS variables

Picking colors is the easy 20% of the job; the other 80% is making sure a hardcoded hex value doesn't quietly leak into forty different components before anyone realizes a rebrand now means a codebase-wide search-and-replace. The fix that scales is a two-tier token structure: primitive tokens (--blue-500: #3b82f6) holding raw values, and semantic tokens (--color-action-primary: var(--blue-500)) naming a *role* rather than a hue, so a rebrand or a dark-mode flip only ever touches the semantic layer's mapping. The full pattern, including scale-naming conventions, is in building a design token color system — see also CSS variables for theming for the runtime-switching mechanics and the CSS variable exporter for generating a starter token file from a palette. Once you're maintaining separate light and dark surfaces, the elevation and contrast rules change shape — that's covered in the dark mode color palette guide.

Curated palettes and color psychology

If you'd rather start from a finished, intentional set than assemble one hue-by-hue, the 120 curated theme palettes on this site are built around a real stated intent rather than a random hue rotation — Sunset Gradient, Ocean Breeze, Autumn Harvest, Corporate Blue, and Nordic Noir among them.

Color also carries genuine cultural and psychological weight, and it varies more than marketing decks usually admit — red reads as luck and prosperity in Chinese contexts and as danger or passion in most Western ones; white is a wedding color in the US and a mourning color in parts of East Asia. The honest version of this material, with the disagreements and regional variation left in rather than smoothed over, is in color psychology in UI design and the individual color meaning pages (also see blue, gold, and purple).

Picking a brand color, and knowing your gamut

A single brand color has to clear a taller bar than any other color decision in a project: it needs to differentiate from every direct competitor, hold up shrunk down to a sixteen-pixel favicon and blown up on a building-sized banner, and survive a CMYK print run without the printed version embarrassing the on-screen one. That full process is walked through in picking brand colors. And because not every color a designer picks in sRGB is even representable by every screen or printer, understanding color gamuts explains the practical difference between sRGB, Display P3, and Rec. 2020, and when it actually matters for your project.

Data visualization is a special, stricter case

Charts have a harder accessibility bar than UI chrome: a reader has to distinguish five or more categories at a glance, often at small sizes, often printed in grayscale by someone's office printer, and often by someone with a color vision deficiency. Accessible data visualization color covers sequential, diverging, and categorical palette construction with those constraints treated as first-class requirements, not an afterthought pass at the end.

Common mistakes worth naming directly

A few failure modes show up often enough across real projects that they deserve to be called out by name rather than left implicit:

Checking contrast against the wrong background. A common bug: a designer checks white text against a card's background color, ships it, and the card sits on a gradient or an image elsewhere in the app where the effective contrast drops well below 4.5:1. Contrast is a pairwise property of two specific colors in a specific context, not an attribute of a single color in isolation — recheck it everywhere the pairing actually appears, not just in the design file's default state.

Interpolating gradients in the wrong space by default. As covered above, the default CSS gradient interpolation runs through RGB, which desaturates through gray for hue pairs on opposite sides of the wheel (red-to-blue, orange-to-cyan). If a gradient looks muddier than the two endpoints suggest it should, the interpolation space — not the endpoint colors — is usually the actual bug.

Treating HSL lightness as if it were perceptual brightness. A saturated blue and a saturated yellow at the identical HSL L value can look dramatically different in actual brightness to the eye — HSL's lightness channel is only a geometric midpoint of the RGB max and min, with no reference to how the human visual system weights red, green, and blue. This is precisely the defect Lab and OKLCH were built to fix — if you're building a tint/shade ramp and the mid-tones look uneven, an OKLCH-based ramp (via the shades, tints & tones generator) will usually look more even than an HSL-based one, even at identical numeric step sizes.

Relying on hue alone to carry meaning. Red/green status indicators, category-colored chart legends with no accompanying labels, and "click the blue link" instructions in copy all share the same defect: they encode information in a channel (hue) that a meaningful fraction of readers cannot fully perceive. Pair hue with a second channel — shape, icon, label, or a large enough lightness/pattern difference to survive grayscale — every time color is doing signaling work rather than purely decorative work.

Skipping gamut and print checks until the end of a project. A brand color picked in sRGB on a laptop screen can look different on a wide-gamut phone display, and will almost always shift on a CMYK print run unless it was converted and proofed deliberately. Catching this in week one of a brand rollout is a five-minute check; catching it after a print vendor has already run 10,000 business cards is not.

Where to go from here

If you only bookmark three pages from this guide, make them the contrast checker (you'll use it on every project with text on a colored background), the color converter (the single tool that answers "what's this in every other model"), and WCAG contrast explained (so the contrast checker's output stops feeling like a black box). Everything else on this site — the 1,094 named-color pages, the 148 combination pages, the 120 curated palettes, and the rest of the 16-tool suite — exists to answer the specific version of "what color should I use here" that you're facing on any given day.