The three dimensions of color

HSL describes a color along three axes that map to how humans actually perceive color. Knowing what each axis controls is the single most useful skill in color picking.

Choosing a background color

Backgrounds set the mood for everything painted on top. They should usually be the most desaturated, lowest-contrast elements, leaving room for text and accents to do the work.

• Good for long reading: off-white (≈98% lightness, 0–5% saturation) or deep ink (≈10–15% lightness) for dark mode. They cause less eye strain than pure white or pure black.
• Good for dashboards and dense UI: a slightly cool neutral such as #f8fafc (slate-50) prevents data colors from clashing.
• Avoid: highly saturated backgrounds for any screen the user reads from for more than a few seconds. They tire the eyes and crush the saturation budget you have for accents.
• Avoid: pure #ffffff on high-brightness OLED displays for night-time apps — it can feel painfully bright.

Choosing a text color

Text color is the most demanding job for color: it must read at small sizes, in bulk, often for minutes at a time. Lightness contrast against the background dominates everything else.

• Good for body text on light backgrounds: a dark slate or navy such as #111827 or #1f2937. Pure black on pure white can feel harsh; a slight color cast is gentler.
• Good for body text on dark backgrounds: a soft off-white such as #e5e7eb rather than pure white, again to avoid harshness.
• Good for secondary text: a muted gray that still meets AA (4.5:1). Don’t go below AA just to de-emphasize.
• Avoid: mid-saturation hues at mid-lightness for body text (e.g. medium blue, medium green). They almost never reach AA contrast on white or dark backgrounds.
• Avoid: light gray on white as a label or hint. If users have to lean in, the design has failed.

Choosing an accent or brand color

Accent colors carry attention and identity. The same hue can be warm and energetic or cold and corporate depending on saturation and lightness. Restraint is more valuable than novelty.

• Good for trust and stability: blues in the 200°–230° range, moderate saturation. Common in finance, healthcare, and infrastructure products.
• Good for energy and growth: oranges and greens. Use them as small splashes, not as backgrounds.
• Good for premium feel: dark, low-saturation accents (deep teal, slate, eggplant) on near-white backgrounds. The space around the color does the work.
• Avoid: two highly saturated accent colors on the same screen. They fight for attention and feel cheap.
• Avoid: pure red, pure yellow, or pure green for non-state elements — users associate them with errors, warnings, and success. Reserve those hues for status.

Status colors: success, warning, error, info

Status colors are conventions, not opinions. Users have learned them from operating systems and the web for decades. Honoring those conventions is more important than originality.

Building a small palette that holds together

Most product UIs need fewer colors than designers think. A workable starting palette: one neutral background, one neutral text, one accent, plus four status colors. That is seven colors, which is plenty.

• Pick the neutral first. Off-white or very-light-gray for light mode. Deep slate for dark mode. Keep saturation under 5%.
• Pick the accent next. Choose a hue that survives the contrast check against the neutral at text-sized weights.
• Generate a scale. For each color, derive 5–10 shades by varying lightness in roughly 10% steps. This gives you hover, pressed, disabled, and surface variants without inventing new colors.
• Avoid: picking colors one component at a time. The palette feels noisy because it is.

Color harmony: combining hues

Classic color theory describes a few reliable hue relationships. They are starting points, not laws — every successful palette also tunes saturation and lightness.

Accessibility: not optional

Roughly 8% of men and 0.5% of women have some form of color vision deficiency. A meaningful share of users also browse on low-quality screens, in sunlight, or with vision impairments. Accessibility is the floor, not the ceiling.

• Always pair color with another signal. Icons, text, weight, or position. Red text alone for an error fails for red-green color blindness.
• Verify contrast. AA (4.5:1 for body, 3:1 for large text) is the minimum. AAA (7:1) is appropriate for long-form reading.
• Test in grayscale. If a chart or dashboard still works without color, it is robust. If it falls apart, redesign before shipping.
• Avoid red/green as the only difference in data visualization. Use blue/orange or shape encoding instead.

Common mistakes and how to fix them

A few patterns show up in nearly every internal design review.

• Too many saturated colors. Fix: keep saturated colors for status and one accent. Make everything else neutral.
• Light gray text on white. Fix: darken until it passes AA. Resist the urge to use opacity instead — that produces unpredictable contrast.
• Pure black on pure white. Fix: soften both —#111827 on #fafafa reads more like print.
• Brand color reused as the error color. Fix: error needs to feel different from anything decorative. Pick a dedicated red.
• Charts with similar mid-tones. Fix: vary lightness across the series, not just hue. The eye reads lightness faster than hue.

A short workflow

When picking a color in this tool, a fast workflow that usually produces good results:

1. Decide the job first: background, body text, accent, or status.
2. Pick lightness for that job: high for backgrounds, low for text on light backgrounds, mid for accents.
3. Pick saturation: low for neutrals, moderate for accents, higher only for true status.
4. Pick hue last. Hue carries emotion but rarely solves a legibility problem.
5. Check contrast against the surface it will sit on. If it fails, change lightness, not hue.