The Easy Way to Pick UI Colors

Key UI color strategy (what “actually works”)

• Neutral palette for most UI surfaces: use neutral colors for backgrounds, text, borders, and many other UI elements.
• Brand/primary color for emphasis: reserve a primary/brand color for main actions and to add “character.”
• Optional semantic colors for states: use semantic colors (e.g., success/warning/error) to communicate different UI states.

“Colors” means shades, not just single values

• Create consistent shade steps across the UI (e.g., hover states, gradients).
• Main point: code needs to match what you see visually—some color formats make palettes harder to reason about.

Why HSL is recommended for building palettes

The speaker recommends HSL because it produces a palette that “makes sense” in code.

Problem with Hex/RGB

• Similar-looking grays can be very different numerically, making palettes inconsistent.

HSL approach for neutrals

• Keep Saturation = 0 so colors are neutral.
• Hue becomes irrelevant for neutral shades (since saturation is zero).
• Create shades by varying Lightness:
  • Example background shading for dark mode:
    • 0% base
    • 5% (cards/surfaces)
    • 10% (raised/highlighted elements)

Usage guidance

• Higher lightness (in dark mode) feels “closer to the user” → use for important/raised elements.
• Text:
  • Use higher contrast/sharper colors for headings.
  • Use slightly muted but still legible tones for general text.
  • Avoid extreme values like 100% lightness, which can feel harsh.

Light mode conversion logic

To flip dark ↔ light mode, invert shade values by:

• Subtract lightness from 100.

Naming convention

• Background naming depends on which side is darkest:
  • BG dark (darkest shade) vs BG light (lightest shade)
• Text naming should be case-agnostic (text behavior doesn’t “flip” the same way as backgrounds).

Implementation: theming + CSS/JS toggling

Suggested setup:

• Put the default theme variables in :root
• Put the alternate theme in the body selector
• Toggle with either:
  • one line of JavaScript, or
  • a media query to follow the user’s preferred theme

Core idea:

• Define color variables first; the rest of theme logic can be automated depending on your framework/control needs.

Visual polish layers beyond flat colors

To avoid a “boring” UI, add:

• Borders
  • Visible but not distracting (especially in dark mode).
• Gradients
  • Use a simple gradient based on background shades.
  • If distracting, show the full gradient on hover.
  • Aim to mimic light coming from above.
• Highlight border color
  • Use a separate “highlight” color (top border gets lighter treatment).
• Light mode adjustments
  • If gradients/borders don’t read as intended, bump highlight lightness but avoid ugly extremes.
  • In light mode, create a dedicated border variable that blends with the card/background.
• Shadows
  • Add depth (where light exists, add shadow).
  • Use alpha transparency (0 to 1).
  • For realism: mix darker + shorter shadows with lighter + longer ones.

Hue/Saturation exploration tool + workflow

The speaker built a real-time tool to experiment with hue/saturation while already having:

• correct contrast
• gradient
• highlight
• shadows

Workflow:

• Tune for cool/vibrant vs warm/neutral
• Flip/check light mode after changes
• Pay special attention to primary/secondary colors (mostly for buttons and hover states)
• Use a button to copy the generated colors

Color format upgrade: OKLCH (and why Tailwind changed)

The video challenges understanding of what formats like LCH/OKLCH mean.

LCH/OKLCH components

• L: lightness (0 to 1)
• H: hue (0 to 360)
• C (chroma): like saturation, typically scaled to a smaller range (speaker references ranges up to ~2 or ~4 depending on definition)

Key claim

• Tailwind switched its default color format to OKLCH (with the V4 update).

Comparison

• HSL issue: dark/light shade steps can lose saturation.
• LCH/OKLCH: shade increments look more natural.

Availability of code/theme

Mentions a theme/code bundle that includes:

• both dark and light
• color formats (theme supports both HSL and OKLCH)

Instruction:

• Copy/paste the generated CSS into a CSS file and start styling.

A link is referenced as being in the description.

Main speakers/sources

• Primary speaker: the video’s presenter (unnamed in subtitles), who mentions they built:
  • a real-time hue/saturation tool
  • a theme/code bundle they provide
• Sponsor: Brilliant (learning app)