Build a Brand Palette Generator

Why This Project?

Color is math. Every design tool you've ever used — Figma, Coolors, Adobe Color — computes its palettes using the same trigonometry on the HSL color wheel. This chapter strips away the library and builds that math directly in vanilla JavaScript.

You'll learn to convert between hex and HSL, derive harmonic colors by rotating the hue angle, generate tint/shade scales via lightness interpolation, and export the result as CSS custom properties, SCSS variables, JSON, or a Tailwind config — all from the same underlying data array.

The AI Angle for This Chapter

Color math is a precision task. The hex-to-HSL conversion must be exact — a small rounding error compounds through every derived color. This is a case where asking AI to "write a color converter" will give you working code, but you need to understand the algorithm well enough to verify it against known values.

The most powerful prompt technique for this chapter is describing the output format first. Write the exact CSS variables you want to see, then ask AI to write the function that generates them. The spec becomes your test case.

Before You Build — Think in HSL

Before writing any code, sketch the palette on paper using HSL values:

Build It

Build hexToHsl(hex) that:
1. Parses the 6-digit hex into r, g, b (0–255 each)
2. Normalizes to 0–1 range
3. Finds max and min channel values
4. Computes L = (max+min)/2
5. Computes S = d / (1 - |2L-1|) where d = max-min
6. Computes H based on which channel is max
7. Returns [H (0-360), S (0-100), L (0-100)] as integers

Test: hexToHsl('#e00000') → [0, 100, 44]
Test: hexToHsl('#ffffff') → [0, 0, 100]
Test: hexToHsl('#0057b7') → [213, 100, 36]

getScale(hex, steps, satShift):
- Tints: for i from (steps-1) down to 1:
    L_tint = base_L + (95 - base_L) * (i / steps)
    Push { hex: hslToHex(H, S, L_tint), role: 'tint-i' }
- Push base color: { hex, role: 'base' }
- Shades: for i from 1 to steps-1:
    L_shade = base_L - (base_L - 8) * (i / steps)
    Push { hex: hslToHex(H, S, L_shade), role: 'shade-i' }
- satShift adjusts S on derived colors (clamp 0-100)

getHarmony(hex, mode): use a lookup object keyed by mode name.
Each value is an array of { hex: hslToHex(H+offset, S, L), role }.
Complementary offset: 180. Triadic: 0, 120, 240. Analogous: -30, 0, 30.

makeSwatch(color, showName, darkLabel):
1. Determine label text color: if L > 55 use dark (#111), else white
2. Create a div with background: color.hex
3. Inner label: hex value (bold) + role name (small)
4. On click: navigator.clipboard.writeText(color.hex),
   add class 'copied' for 1s (CSS ::after overlay: "Copied!")

For harmony colors use a card layout:
- Top half: color fill
- Bottom: role label, hex, hsl() string, optional name

Build a flat array of [variableName, hexValue] pairs.
For CSS:
  ':root {\n' + pairs.map(([k,v]) => `  --${k}: ${v};`).join('\n') + '\n}'
For SCSS:
  pairs.map(([k,v]) => `$${k}: ${v};`).join('\n')
For JSON:
  JSON.stringify(Object.fromEntries(pairs), null, 2)
For Tailwind:
  Group pairs by prefix, nest under theme.extend.colors,
  output as module.exports JS string

downloadSVG():
1. Combine all colors into one flat array
2. Calculate grid dimensions: cols = min(length, 10), rows = ceil(length/cols)
3. For each color, emit:
   <rect x y width height rx fill={hex}/>
   <text>hex value</text>
   <text>role name</text>
4. Add palette title text at top
5. Wrap in <svg> with dark background fill
6. Blob with type 'image/svg+xml', download as 'brand-swatches.svg'

Concepts You Just Used

• HSL color model — expressing colors as position on a wheel (H), intensity (S), and brightness (L) makes palette math intuitive and predictable
• Linear interpolation — start + (end - start) * t where t is 0–1; used for every tint and shade step
• Modular arithmetic — (H + 180) % 360 wraps the hue angle around the 360° wheel
• CSS custom properties — --variable-name: value declared in :root are the modern standard for design tokens
• Data → format factory — one array of [key, value] pairs, multiple output string templates; the data is format-agnostic
• SVG generation — SVG is just XML; any string of well-formed SVG tags is a valid, downloadable vector file
• navigator.clipboard.writeText() — async copy to clipboard; always handle the .catch() for permission denied
• Live reactivity — attaching input and change listeners to all controls and calling one regenerate function creates instant feedback

Reflect

Go Further