Color Palettes for Web Design: HEX, RGB, HSL, OKLCH in 2026

Color is the most emotionally charged design decision and the most technically misunderstood. The same "blue" in HEX vs HSL vs OKLCH renders differently. The same "accessible" contrast in dark mode often fails in light mode. The same palette that looks premium on a designer's MacBook can look muddy on a $200 budget Android phone.

This guide is the practical reference for working with color in 2026 — what each color format is good for, why OKLCH is finally becoming the default, how to build palettes that work across light/dark/different devices, and the contrast math that keeps you accessible without making everything grey.

The four color formats you'll meet

CSS has supported four primary color models. Each has a job.

HEX — the legacy default

#0891b2 — three or six hexadecimal digits.

Pros: compact, universal, copy-paste friendly, every designer recognises common ones.

Cons: humans cannot intuit color from hex digits. You can't easily "make it 10% darker" in hex — you have to convert mentally. Doesn't support transparency in 6-digit form (8-digit HEX with alpha exists since CSS Color 4 but underused).

Use when: pasting from existing brand assets, code-level color tokens, anywhere brevity matters.

RGB — the literal-pixel format

rgb(8 145 178) or rgb(8 145 178 / 0.8) for alpha.

Pros: directly maps to the RGB color signal on every screen. Easy to manipulate channel-by-channel.

Cons: same problem as HEX — humans don't think in red/green/blue intensities.

Use when: dealing with image data, canvas APIs, programmatic color generation. Rarely in design files.

HSL — the human-friendly format

hsl(190 91% 36%) — Hue (0-360 degrees on color wheel), Saturation (0-100%), Lightness (0-100%).

Pros: intuitive. Want a darker version? Drop the lightness. Want less saturated? Drop the saturation. Want the complementary color? Rotate hue by 180.

Cons: HSL's "lightness" is perceptually inconsistent. hsl(60 100% 50%) (pure yellow) looks much lighter than hsl(240 100% 50%) (pure blue) at the same L value. This breaks systematic design.

Use when: prototyping, quick adjustments, design tools that don't yet support OKLCH.

OKLCH — the perceptual default in 2026

oklch(57% 0.13 220) — perceptual Lightness (0-100%), Chroma (0-0.4ish), Hue (0-360 degrees).

Pros: perceptually uniform. Two colors at L=50 look the same brightness regardless of hue. Wider color gamut — represents colors HSL can't (modern wide-gamut displays). Browser support since 2023 in all major browsers.

Cons: less familiar. Chroma is unbounded so picking max-saturation values varies by hue.

Use when: building design systems in 2024+. Light/dark mode tokens. Anywhere consistent perceptual brightness matters.

When to use which

A simple decision flow:

Building a design system from scratch in 2026: OKLCH for tokens. Convert to HEX/HSL only at deployment.
Working with existing brand colors: HEX. They came as HEX, stay HEX, convert if you need to manipulate.
Quick prototyping in browser DevTools: HSL — easiest mental adjustments.
Image manipulation, canvas drawing: RGB.

For converting between any of these, use color converter.

Building a 2026 color palette

A modern palette has these components.

1. Brand colors (1-3 hues)

The colors that define the brand. Pick by:

Industry norm or counter-positioning: tech tends to use blue/purple; finance uses navy/green; fashion uses black/white/single accent.
Logo compatibility: brand color must work with the existing logo and wordmark.
Emotional fit: warm (red/orange/yellow) = energy, urgency. Cool (blue/green) = trust, calm. Purple = creativity, premium. Neutral = professional, restrained.

2. Functional accent colors (4-5 fixed)

These rarely change between brands: green for success, amber for warning, red for error, blue for info, gray for neutral.

Functional colors signal meaning instantly. Don't reinvent — if your "error" is purple, users will mis-read state.

3. A neutral scale (9-12 grays)

The unsung hero. Most UI is gray. Build a scale from gray-50 (page background light mode) to gray-950 (page background dark mode), with intermediate values for borders, body text, headings.

Tailwind's neutral scale is well-tuned; copy it or adapt slightly for brand alignment.

4. Light/dark mode palette parity

Every brand and functional color needs a dark-mode counterpart. Naive approach: invert colors. Doesn't work — pure inversion looks harsh.

Better approach: each color in your palette has paired tokens for light/dark surfaces. Same hue, different lightness/chroma per surface. OKLCH makes this systematic — drop L for darker, raise L for lighter, keep H constant.

Contrast: the math you need

Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background:

AA standard (legal minimum in most jurisdictions): 4.5:1 for body text, 3:1 for large text (18pt+ or 14pt+ bold).
AAA standard (recommended for accessibility-focused sites): 7:1 for body text, 4.5:1 for large text.

Contrast ratio is computed from the luminance of foreground vs background. Black on white = 21:1 (maximum). Black on #777 = 4.48:1 (just fails AA for body text).

WCAG 3.0 (in draft, gradual rollout 2024-2027) replaces this with APCA (Accessible Perceptual Contrast Algorithm) which fixes some edge cases. For now, WCAG 2.2 AA is the standard to meet.

How to check contrast

Use contrast checker for any foreground/background pair.
Browser DevTools (Chrome, Firefox) show contrast for any element with text inspected.
Lighthouse audit catches obvious contrast failures sitewide.

Common contrast failures

Gray text on white: #999 on white = 2.85:1. Fails AA. #767676 on white = 4.54:1, just passes.
White text on brand color: most brand blues at 50% saturation give 3-4:1 contrast with white. Need a darker shade or larger text.
Placeholder text: often light gray for "softness" but should still hit 3:1 for AA Large.
Disabled state: WCAG 2.2 doesn't require disabled elements to meet contrast — but it's still good practice to keep them readable.

The contrast trap

Designers sometimes use low contrast intentionally for "subtle" effects. This excludes: people with low vision (1 in 4 adults globally), people reading in bright sunlight (anyone outdoors), people on cheap LCD screens with poor contrast, people with monitors set to wide color but tuned wrong.

If you must use low-contrast for aesthetic, ensure it's not on essential information. Body text, form labels, error messages — never below 4.5:1.

Wide gamut and HDR colors

Modern devices (iPhone 7+, recent MacBooks, OLED TVs, premium Android) display the Display-P3 color space — about 25% more colors than the older sRGB.

OKLCH and CSS Color 4's color(display-p3 R G B) syntax can express these wider colors. HSL and 6-digit HEX cannot.

In 2026: most user devices support P3 (~80% of mobile, ~60% of laptops). All major browsers respect P3 colors in CSS. Fallback to sRGB happens automatically on non-P3 devices.

You don't need P3. Most brand designs work fine in sRGB. But if your design uses vivid saturated colors (especially red, orange, green), P3 unlocks more vibrant rendering on capable devices.

The dark mode strategy

Three approaches in 2026:

1. Single fixed mode (light or dark) — choose one. Skip the complexity. Common for utility-first sites, simple landing pages.

2. System-preference responsive — prefers-color-scheme media query. Auto-adjusts. ~70% of users have system preference set; this respects it.

3. User-toggleable — Add a UI toggle. Persist preference in localStorage. Override system preference. More work but expected on content sites in 2026.

Whichever you pick, design the dark mode palette intentionally — don't just invert. Saturated colors need different chroma values in dark mode (often slightly less saturated to avoid eye fatigue).

Common color mistakes

After auditing hundreds of sites, the same patterns:

Too many colors. More than 3 brand colors + 5 functional = chaos. Strong brands use 1-2 colors and one accent.
No defined neutral scale. Random grays sprinkled around. Looks unprofessional. Pick a scale and stick.
Brand color used for everything. Buttons, links, headings, icons all bright brand color = no visual hierarchy.
Pure black on pure white. Too harsh. Use #111 to #222 on #fafafa to #fff for comfortable reading.
Same colors in light and dark mode. A pure red that pops in light mode burns the eyes in dark mode. Reduce chroma for dark.
Ignoring colorblind users. 8% of men, 0.5% of women have some form of color vision deficiency. Don't rely on red/green alone to convey state — add icons or labels.
Random gradients. Two-color gradients should be neighbors on the color wheel (analogous) or opposites (complementary), not random pairings.

Building a palette from scratch (15-minute method)

If starting fresh:

Pick one brand color. Open color palette generator. Browse, settle on one hue you like.
Generate light/dark variants at OKLCH lightness 30, 40, 50, 60, 70, 80, 90, 95.
Add 4 functional colors from standard scales (green for success, amber for warning, red for error, blue for info).
Pick a neutral scale — copy Tailwind's gray or zinc.
Add an accent color — complementary or analogous to your brand color, used sparingly for CTAs or highlights.
Run contrast check on every text+background combo. Adjust lightness values until all body text meets 4.5:1.

Save the palette as CSS custom properties or design tokens. Reference everywhere by token name (--color-brand-600), never raw hex. Future palette changes become trivial.

Tools to use

Color Palette Generator — generate harmonious palettes from one base color.
Color Converter — convert between HEX, RGB, HSL, OKLCH.
Contrast Checker — check any foreground/background pair against WCAG AA/AAA.
Gradient Generator — CSS gradient builder with OKLCH support.

The bottom line

Color in 2026 is finally catching up to how humans actually perceive it. OKLCH replaces HSL as the format that makes design systems sensible. P3 wide gamut renders richer colors on capable devices. WCAG contrast remains the legal minimum and the practical baseline.

For most projects: pick 1-2 brand colors, 4-5 functional colors, a 9-12 step neutral scale. Define in OKLCH, compile to HEX/RGB for legacy support. Design light and dark mode in parallel — not as an afterthought. Verify every text color hits 4.5:1 contrast against its background. Use color to convey hierarchy, not decoration.

A disciplined palette is invisible — readers and users feel the rhythm without consciously noticing the consistency. An undisciplined palette is the kind of thing people can't name but immediately label as "feels off".

The compound effect of a thoughtful palette across hundreds of pages is the difference between a site that looks built and a site that looks designed.