Back to Plugins
Brand Colour Generator

Brand Colour Generator

Generate brand colour palettes, visualise logo, and export style guides using real colour theory.

Plugin Preview

Brand Colour Generator preview

About this plugin

Stop guessing with colour picker roulette. Brand Colour Generator helps logo designers and brand strategists explore, visualise, and document professional colour palettes in seconds.


Unlike basic colour generators, this plugin works directly with your logo's geometry to create context-aware mockups. It uses industry-standard colour harmonies (HSL) and automatically checks contrast ratios to ensure your brand is accessible.


✨ Key Features:


Live Logo Preview: See your selected Icon and Wordmark update in real-time inside the plugin window.


Smart Harmony Rules: Generate palettes using Complementary, Split-Complementary, Analogous, Triadic, and Monochromatic algorithms.


Accessibility First: The "Auto Background" feature calculates luminance to ensure your logo passes WCAG contrast standards against the background.


Smart Assignment: Intelligently separates your Icon colour from your Wordmark colour to create professional, non-vibrating lockups.


One-Click Style Guide: Finished? Click "Generate Swatch" to print a tidy frame to your canvas containing your primary, secondary, and accent colours with their Hex codes ready for developer handoff.


🚀 How to use:


Select & Assign: Click your logo icon on the canvas, then click "Select Layer" under Icon. Do the same for your Wordmark.


Pick or Randomise: Choose a base brand colour using the picker, or let the plugin randomise a starting point.


Choose a Rule: Select a harmony rule (e.g., Complementary) to generate matching accents.


Generate: Click Generate to see the preview.


Export: Click "Generate Swatch on Canvas" to save your palette.

Plugin Details

Version1
CreatedNovember 25, 2025
Last UpdatedNovember 30, 2025
Categoryshapes-colors
CreatorKunleOlat
Stats7 installs, 0 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none