Build Lab
Web Grok Build · templates & craft
Back to catalog
UtilityBeginner · Ship in one sitting#08

Color palette

Generate and export harmonious palettes

Snapshot

Pick a seed color, derive scales, check contrast, copy tokens.

What this template is for

Design system starters and brand exploration. Export CSS variables or Tailwind-friendly tokens.

Best when you need

  • Brand color exploration
  • Design-token export
  • Contrast accessibility checks
  • Moodboard color sets

Usually includes

  • Seed color picker
  • Harmony modes (analogous, triad…)
  • Contrast ratios
  • Copy hex/HSL/CSS vars
  • Shade/tint scales

Iteration ideas

Ask for these next in the same Build chat — one or two per turn.

  • Image color extraction
  • WCAG pass/fail labels
  • Figma token JSON
  • Locked brand primaries

Who it serves

Designers, frontend devs, brand teams

Prompt seed

Paste into web Grok Build, then refine.

Build a "Color palette" using the Grok Build template as the base.
Goal: Generate and export harmonious palettes
Primary use case: Brand color exploration
Requirements: polished UI, mobile-first, working preview in one shot.
Tone: modern, restrained, production-demo quality — not a wireframe.

New to the loop? Learn web Build walks chat → preview → iterate → publish, using templates like this as practice ships.