Video summary

How I make UI color palettes

Main summary

Key takeaways

Technology

Core concept: 3 color categories

Most UI palettes use three groups of color:

  • Brand colors (1–2) Primary identity color(s) applied as “splashes” across the UI—e.g., Facebook’s blue. Typical uses: buttons, links, navigation, icons.

  • Supporting colors Used sparingly to communicate states or messages:

    • Green for success/positive confirmations
    • Orange/Yellow for warnings
    • Red for dangerous situations (e.g., form errors)
    • Blue for neutral informational messages/dialogs Guideline: keep HSB saturation and brightness within ~5–10 of the brand color so the UI doesn’t feel disconnected. (Hue can be adjusted more freely.)

  • Neutrals The majority of the interface, mostly grays. Typical uses: text, backgrounds, borders, secondary buttons.

The 5 steps to build the palette

Step 1: Choose a starting point

  • Ideally use your brand color (usually provided by the company’s branding).
  • If you don’t have one, pick a good “middle” color (lighter/darker shades will be derived from it).
  • Suggestions:
    • Often located in the upper-right of a color picker.
    • Pick a shade suited for button backgrounds.
  • Inspiration sources mentioned: huemint.com and colorhunt.com.

Step 1.5 (important technique): Use HSB instead of hex/RGB

Jordan recommends building with HSB for finer control:

  • Hue (H): 1–365 around the color wheel
  • Saturation (S): 0–100 (intensity)
  • Brightness (B): 0–100 (mix of black/white)

Reason: more intuitive adjustments for later steps.

Step 2: Create supporting colors

  • Build warning/success/error/info colors to match the brand.
  • Maintain harmony by keeping saturation/brightness close to the base brand (within 5–10).
  • Adjust hue as needed.

Step 3: Generate multiple shades (for each color family)

  • Use 5–10 shades.
  • Recommended structure:
    • Layout 9 blocks labeled 100 to 900, with 500 as the base color.
    • This leaves room for adding half steps later.
  • Method (“arc” trick):
    • Imagine a line from top-left to bottom-right of the color picker passing through the base color.
    • Select shade values along this arc:
      • Ends: lightest and darkest
      • Examples provided:
        • Dark: S 20–30, B 90–100
        • Light: S 5–10, B 95–100
  • Usage rationale:
    • Darkest is often used for text
    • Lightest is often used for tinted backgrounds
  • Fill-in approach:
    • Pick 300 and 700 in the middle of remaining gaps, then fill the rest similarly.

Step 4: Build neutrals

  • Pick a middle gray, then create a neutral scale using a similar process.
  • Important difference: neutrals require desaturation.
    • Darker neutrals should stay more to the left to avoid looking too saturated.

Step 5: Test and iterate

  • Combine all color scales and visually verify:
    • Each scale has a consistent light-to-dark range.
  • Quick visual technique:
    • Squint/blurring the palette to see if transitions align.
  • If the palette looks “squiggly” (inconsistent stepping):
    • Swapping colors between families (e.g., yellow200 → blue200 backgrounds) may feel incohesive.
    • Adjust shades to restore cohesion.

Validation questions:

  • Do you have the needed color options?
  • Does it look aesthetically pleasing?
  • Do colors “fit together”?
  • Does it pass contrast checks (including accessibility tools)?

Iteration tips:

  • Avoid creating too many options:
    • Stick to a maximum of ~10 shades
  • Prefer tweaking existing shades rather than expanding indefinitely.
  • Example mentioned: Green was too saturated/neon; saturation was reduced.

Additional resources mentioned

Jordan also shared a more in-depth guide:

  • “A Product Designer’s Field Guide for Colors” (uxtools.co/shop/color) Includes:

    • places to find inspiration
    • recommended color tools
    • automation ideas for shading
    • accessibility/contrast checking
    • dark mode tutorial
    • developer handoff guidance
    • Figma file with example palettes

A follow-up video is mentioned where Jordan critiques a real app page and does a redesign focused on color.

Main speaker / source

  • Jordan (product designer; host/author of the tutorial)

Original video