Book Summaries | Refactoring UI - Working with Color

January 5th, 2024

Refactoring UI - Designing Text (Chapter 5)

This summary will serve to further cement my learnings taken when reading the fifth chapter of Refactoring UI, titled Working with Color, and I hope will provide some learnings to you as well.

Color Representation in Web Design

Hex and RGB Limitations

• Hex and RGB, common color representations, lack visual correlation, making it challenging for developers.
• HSL (Hue, Saturation, Lightness) offers a human-eye-friendly alternative, representing colors intuitively.

HSL Attributes

1. Hue Definition:

   • Represents a color’s position on the wheel (0° red, 120° green, 240° blue).

2. Saturation Impact:

   • 0% is grey, 100% is vivid; without saturation, hue changes don’t affect the color.

3. Lightness Scale:

   • 0% black, 100% white, 50% pure color; lightness impacts perceived brightness.

HSL vs. HSB

• HSL and HSB differ; brightness in HSB isn’t the same as lightness in HSL.
• Browsers understand HSL, making it preferable for web design over HSB.

Comprehensive Color Palette

Need for Diversity

• Small color palettes are insufficient; diverse UIs require an extensive range.
• Three main color categories: Greys, Primary Colors, and Accent Colors.

Greys

• Dominant in UI elements; need 8-10 shades for flexibility.
• True black is replaced by dark grey for a more natural look.

Primary and Accent Colors

• Primary colors define the site’s overall appearance; need a variety of shades.
• Accent colors emphasize actions or states; usually requires multiple shades for flexibility.

Palette Definition

1. Base Color Selection:

   • Pick a central color, often suitable as a button background.

2. Edges and Gaps:

   • Choose darkest and lightest shades; fill in-between gaps with 5-10 shades.

3. Balance and Variety:

   • Aim for 9 shades per color; find compromises between adjacent shades for balance.

Adjustment Guidelines

• Avoid excessive palette expansion; maintain a balance between options and simplicity.

Enhancing Color Brightness

Perceived Brightness

• HSL lightness affects saturation; near 0% or 100%, saturation impact diminishes.
• Adjust saturation as lightness deviates from 50% to preserve color vibrancy.

Using Perceived Brightness

• Colors with equal lightness can differ in perceived brightness.

• Rotate hue for lighter colors; useful for creating warm or rich shades.

• Small hue rotations (20-30°) maintain the color identity while altering brightness.

Saturating Greys

Greys’ Saturation

• True grey is unsaturated, but practical greys often have saturation.
• Saturation affects color temperature; blues for coolness, yellows for warmth.

Color Temperature

• Saturation influences perceived temperature; adjust saturation for consistent warmth or coolness.

Accessibility in Design

Color Contrast

• WCAG guidelines ensure text readability; contrast ratios are vital for accessibility.
• Dark backgrounds increase attention; flipping contrast resolves hierarchy issues.

Hue Rotation for Contrast

• Colored text on colored backgrounds challenges contrast; rotating hue enhances readability.
• Rotate towards brighter colors for increased contrast without compromising vibrancy.

Inclusive Design

• Colorblind users may struggle with color-dependent communication.
• Supplement color with icons or alternative indicators for universal understanding.

Additional Notes

Below you’ll see an example tailwind.config.js file using HSL values that is also an accessible color palette.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        // Greys
        grey: {
          100: "hsl(0, 0%, 96%)",
          200: "hsl(0, 0%, 88%)",
          300: "hsl(0, 0%, 74%)",
          400: "hsl(0, 0%, 62%)",
          500: "hsl(0, 0%, 47%)",
          600: "hsl(0, 0%, 38%)",
          700: "hsl(0, 0%, 26%)",
          800: "hsl(0, 0%, 13%)",
          900: "hsl(0, 0%, 0%)",
        },

        // Primary Colors
        primary: {
          100: "hsl(232, 67%, 84%)",
          200: "hsl(232, 47%, 72%)",
          300: "hsl(232, 34%, 60%)",
          400: "hsl(232, 29%, 52%)",
          500: "hsl(232, 26%, 42%)",
          600: "hsl(232, 24%, 38%)",
          700: "hsl(232, 22%, 34%)",
          800: "hsl(232, 20%, 27%)",
          900: "hsl(232, 64%, 12%)",
        },

        // Accent Colors
        accent: {
          100: "hsl(33, 100%, 74%)",
          200: "hsl(33, 100%, 58%)",
          300: "hsl(33, 100%, 45%)",
          400: "hsl(33, 99%, 35%)",
          500: "hsl(33, 96%, 30%)",
          600: "hsl(33, 93%, 25%)",
          700: "hsl(33, 85%, 20%)",
          800: "hsl(33, 67%, 32%)",
          900: "hsl(33, 63%, 22%)",
        },
      },
    },
  },
  variants: {},
  plugins: [],
};