|

Crafting a UI Palette

BySandro Pasqual

Once you’ve chosen your brand color, the next step is building a palette that makes your UI design sing. A great UI palette includes tints (lighter variations), shades (darker variations), and tinted grays (neutral tones with a brand hint) to ensure flexibility across light and dark modes. In this guide, we’ll create a UI palette based on Hue 216° (a blue-purple from our last post), using HSB (Hue, Saturation, Brightness) for intuition and CIELAB’s L* for scientific precision. We’ll define 10 tints and 10 shades, explore ideal L* ranges for light and dark modes, and explain the purpose of each in UI design. Let’s dive in!

Why Build a Palette?

A single brand color isn’t enough for a polished UI. You need variations to:

  • Add depth: Tints for backgrounds, shades for text.
  • Ensure accessibility: Meet WCAG 2.1 contrast ratios (4.5:1 for text).
  • Support modes: Work in light and dark themes.
  • Stay branded: Keep every element tied to your identity.

Using Hue 216° (H=216°, S=95%, B=85%, L*≈43), we’ll craft a palette that’s versatile and cohesive for any app or website.

Bnei Brak Bay
#0B5DD9
CIELAB L*= 43
HSB 216/95/85
Vitamin C
#FF9900
CIELAB L*= 72
HSB 36/100/100
Charlie Brown
#955900
CIELAB L*= 43
HSB 36/100/58

Step 1: Understand Tints, Shades, and Tinted Grays

  • Tints: Lighter versions of your color (higher L*, brighter). Great for backgrounds, hover states, or subtle accents.
  • Shades: Darker versions (lower L*, dimmer). Ideal for text, borders, or bold elements.
  • Tinted Grays: Near-neutral tones with a hint of your hue. Used for backgrounds or secondary text to avoid stark grays.
  • CIELAB L: Our anchor for lightness (0 = black, 100 = white). L ensures changes look uniform to the eye.
  • HSB: Guides Hue (216°), Saturation (intensity), and Brightness (relative light).

Step 2: Create 10 Tints

Tints are lighter than the base color (L>55), perfect for backgrounds or soft UI elements. We’ll spread them across L=60–95, the most useful range for UI.

How to Make Tints

HSB

  • Keep H=216° for brand consistency.
  • Lower S (20–50%) to soften intensity.
  • Raise B (85–100%) for brightness.

CIELAB

  • Increase L* incrementally (e.g., 60, 65, …, 95).
  • Reduce |a| and |b| to keep tints subtle (e.g., a≈2, b≈-5).

10 Tints for Hue 216°

T1
#6D98D9
Secondary button, active state
CIELAB L*= 60
HSB 216/50/85
T2
#729CDB
Highlighted icon, badge
CIELAB L*= 62
HSB 216/48/86
T3
#7AA2DE
Card background (light mode)
CIELAB L*= 65
HSB 216/45/87
T4
#82A8E0
Hover state, subtle accent
CIELAB L*= 68
HSB 216/42/88
T5
#8AAEE5
Sidebar background
CIELAB L*= 70
HSB 216/40/90
T6
#98B9EB
Modal overlay (light)
CIELAB L*= 75
HSB 216/35/92
T7
#A8C5F0
Input field background
CIELAB L*= 80
HSB 216/30/94
T8
#B8D0F5
Disabled button (light mode)
CIELAB L*= 85
HSB 216/25/96
T9
#C8DCFA
Main background (light mode)
CIELAB L*= 90
HSB 216/20/98
T10
#D9E8FF
Near-white background, canvas
CIELAB L*= 95
HSB 216/15/100

Why these? L=60–95 covers light mode needs, from vibrant accents (L=60) to near-white backgrounds (L*=95). Lower S ensures tints aren’t too intense, while H=216° keeps the blue-purple vibe.

Step 3: Create 10 Shades

Shades are darker than the base (L<55), great for text, borders, or dark mode elements. We’ll use L=10–50 for maximum UI utility.

How to Make Shades

  • HSB:
  • Keep H=216°.
  • Maintain or lower S (50–70%) for depth.
  • Lower B (20–60%) for darkness.
  • CIELAB:
  • Decrease L* (e.g., 10, 15, …, 50).
  • Adjust a* and b* to preserve Hue 216° (e.g., a≈6, b≈-15).
  • HSB:
  • Keep H=216°.
  • Maintain or lower S (50–70%) for depth.
  • Lower B (20–60%) for darkness.
  • CIELAB:
  • Decrease L* (e.g., 10, 15, …, 50).
  • Adjust a* and b* to preserve Hue 216° (e.g., a≈6, b≈-15).

10 Shades for Hue 216°

TintHSB (H, S%, B%)CIELAB L*Hex CodesPurpose in UI
S1216°, 68%, 75%50Primary text (light mode)
S2216°, 66%, 70%45Secondary text, dark button
S3216°, 64%, 65%40Labels, icons (light mode)
S4216°, 62%, 60%35Borders, dividers
S5216°, 60%, 50%30Disabled text, shadows
S6216°, 58%, 45%25Background (dark mode)
S7216°, 56%, 40%22Card background (dark mode)
S8216°, 55%, 35%18Deep accents, icons (dark)
S9216°, 70%, 25%15Modal overlay (dark mode)
S10216°, 70%, 20%10Near-black background

Why these? L=10–50 spans text (L=30–50) to dark mode backgrounds (L*=10–25). Keeping S moderate ensures shades feel branded without being too muted.

Step 4: Add Tinted Grays

Tinted grays are near-neutral but carry a faint Hue 216° hint, replacing pure grays for a cohesive look.

How to Make Tinted Grays

HSB

  • H=216°.
  • S=5–15% for neutrality.
  • B=40–98% for light or dark grays.

CIELAB

  • L=30–50 for text, L=90–96 for backgrounds.
  • Small a, b (e.g., a≈1, b≈-3).

Example Tinted Grays

  • Gray 1: H=216°, S=10%, B=98%, L*≈96.
  • Use: Light mode background.
  • Gray 2: H=216°, S=15%, B=40%, L*≈35.
  • Use: Secondary text (light/dark mode).
  • Gray 3: H=216°, S=12%, B=20%, L*≈15.
  • Use: Dark mode background.

Step 5: Ideal L* Ranges for Light and Dark Modes

  • Light Mode:
  • Tints (L=70–95): Backgrounds (L=90–95), hover states (L=75–85), accents (L=70–75).
  • Shades (L=30–50): Text (L=30–45), borders (L*=35–50).
  • Tinted Grays: L=90–96 (backgrounds), L=40–50 (text).
  • Why: High L* ensures readability on white-ish bases.
  • Dark Mode:
  • Tints (L=60–80): Accents (L=60–70), hover states (L*=70–80).
  • Shades (L=10–30): Backgrounds (L=10–20), text (L*=20–30).
  • Tinted Grays: L=15–25 (backgrounds), L=30–40 (text).
  • Why: Low L* creates depth, while mid-range L* ensures contrast.

Step 6: Test Accessibility

Use L* for WCAG compliance (4.5:1 for text):

  • Light Mode Example:
  • Text (S3, L=40) on background (T9, L=90):
  • Ratio = (90 + 0.05) / (40 + 0.05) ≈ 2.24 (too low).
  • Fix: Use S5 (L*=30) → Ratio ≈ 3.01 (use for large text).
  • Better: Use S6 (L*=25) → Ratio ≈ 4.67 (WCAG-compliant).
  • Dark Mode Example:
  • Text (T5, L=70) on background (S9, L=15):
  • Ratio = (70 + 0.05) / (15 + 0.05) ≈ 4.70 (WCAG-compliant).

Tools: WebAIM Contrast Checker, Stark (Figma).

Step 7: Apply and Refine

Mock up your palette in Figma:

  • Tints: Backgrounds (T9–T10), buttons (T1–T3).
  • Shades: Text (S1–S3), borders (S4–S6), dark mode (S7–S10).
  • Grays: Subtle backgrounds, secondary text.
    Test in light/dark modes and for color blindness (Stark plugin).

Best Practices

  • Consistent Hue: H=216° for all tints/shades.
  • L* Precision: Use 5-unit L* steps for balance.
  • Limit Palette: 10 tints + 10 shades + 3–4 grays is enough.
  • Document: Share HSB/CIELAB values in your style guide.
  • Test Context: Check on iOS, Android, and web.

Tools

  • Coolors.co: Build HSB palettes.
  • NixSensor.com: Convert HSB to CIELAB.
  • Figma: Mock up and test.
  • WebAIM: Verify contrast.

Conclusion

With Hue 216°, we’ve built a UI palette that’s vibrant, accessible, and versatile. Our 10 tints (L=60–95) and 10 shades (L=10–50) cover everything from light mode backgrounds to dark mode text, while tinted grays add cohesion. Try this palette in your next project, or swap Hue 216° for your own brand color. What’s your favorite tint or shade? Share below!

Similar Posts