Skip to content

Harmony · five-stop palettes

Palette generator

Lock a base color, flip through complementary / triadic / analogous / split schemes, and steal a coherent five-swatch row before someone asks for “just one more accent”. Export includes a CSS custom-properties block for lazy handoff to a prototype stylesheet.

CSS custom properties


      

      

        

          

            
Why this palette generator exists

            

              Harmony presets get you from “one brand purple” to a coherent row of swatches in seconds.
              The export is a CSS custom-properties block you can paste into a spike branch — not a replacement for brand
              governance, but faster than arguing in a whiteboard.
            

            
How to use it

            
    
              
  1. Pick a base color that already passed stakeholder review.
    2. 
              
  2. Cycle complementary, triadic, analogous, and split modes — watch which scheme survives next to real UI chrome.
    3. 
              
  3. Copy the CSS block into a prototype or design doc.
    4. 
              
  4. Extend neutrals and disabled tones with the CSS variables tool so tables do not inherit random grays.
    5. 
            

            

              
Skip this when…

              

                You already have a locked token JSON from design ops — import that instead of generating throwaway harmonies here.
              

            

            
UI-first tweaks

            
    
              
  • Reserve the highest-chroma stop for CTAs, not paragraph text.
    • 
              
  • Keep one neutral-ish stop even in “rainbow” harmonies — you still need borders and disabled states.
    • 
              
  • When in doubt, screenshot the palette next to real typography; harmony math does not know your font metrics.
    • 
            

          

          
        

        

          
Related tools

          
Gradients, ramps, and reading on harmony in practice.

          

            
              
              
                From accent to palette
                Blog: how teams grow one swatch into a usable set.
              
            
            
              
              
                Gradient generator
                Turn two anchors into linear, radial, or conic CSS.
              
            
            
              
              
                Tailwind palette
                Compare your harmony against a well-known neutral ramp.
              
            
          

        

      

      

        
FAQ

        

          How do harmonies map to product roles?
          

            We do not auto-name “primary” or “destructive” — teams disagree on semantics. Export HEX, then assign roles in
            your token sheet where reviewers can comment.
          

        

        

          Which harmony should I use for UI?
          

            Analogous reads cohesive for dashboards. Complementary and split add punch for marketing heroes — use sparingly
            on dense apps. Triadic is loud; good for education or gaming, risky for enterprise tables.
          

        

        

          Can I export to Figma tokens?
          

            Not directly — we output CSS variables you can paste into docs or a style dictionary starter. Figma token plugins
            vary; copy HEX manually if your pipeline demands JSON.
          

        

        

          Why five stops?
          

            Enough to suggest primary / secondary / accent / warning-ish roles without pretending we know your neutrals.
            Extend manually for extended ramps.
          

        

        

          Does this understand brand guidelines?
          

            No — it only knows geometry in color space. If marketing forbids certain hues, enforce that in review, not here.