Brand Mood Analyzer By Amaan Shaikh

Understanding how color influences branding is crucial for designers, marketers, and businesses. This blog introduces a smart, interactive Brand Mood Analyzer by Amaan Shaikh a beautifully crafted tool built with HTML, CSS, and JavaScript. Which is a perfect blend of design psychology and programming skills.

🌟 Project Overview

This is not just a color extractor. It’s a full-fledged Brand Mood Analyzer that:

Extracts color palettes from images
Suggests the mood/emotions associated with each color
Shows color harmonies and accessibility contrast
Previews branding on buttons/text areas
Exports CSS color variables
Animates UI for a modern user experience

It’s a complete tool for designers, brand strategists, and developers who want to understand how color shapes perception.

✨ Key Features

✅ Upload & Extract Color Palettes

Users can either drag and drop an image or upload one, and the tool will then:

Analyze the image to find top 5 dominant colors
Display them as clickable color boxes
Allow users to copy HEX codes instantly

🎭 Brand Mood Suggestions

Each color is linked with common brand moods such as:

Trust, Calm, Growth, Passion, Luxury, and more
Helps guide color psychology in branding decisions

🎨 Harmonious Color Generation

Get complementary and analogous colors using HSL theory for better design balance.

♿ Accessibility Contrast Checks

Instant WCAG-compliant contrast ratio feedback:

Checks contrast against white and black backgrounds
Indicates pass/fail for readability standards

🔁 Live Brand Preview

Shows how a button and text might look in real brand usage:

Updates background dynamically
Changes font style based on mood
Responsive and animated preview

📋 CSS Variable Export

Auto-generates copy-ready CSS code for all extracted palette colors:

:root {
  --color1: #3498db;
  --color2: #e74c3c;
  --color3: #2ecc71;
  ...
}

⚙️ Frameworks & Tools Applied

HTML5 & CSS3: As the foundational structure and style of the interface, these element technologies made the design leap off the page, with awesome transitions, animations, and responsiveness to various screen sizes via media queries.
Vanilla JavaScript (ES6+): Provided the methods for interactivity, along with core functionality to operate the app, with no external libraries were used. Current ES6+ syntax was used for cleaner, efficient, and manageable code.
Canvas API for image analysis
HSL color theory for generating harmonies
ARIA roles & semantic HTML for accessibility

📂 Project Structure Highlights

Uses <canvas> for pixel data extraction
Uses hexToHSL, generateHarmonies, and contrastRatio functions
Divided into UI panels: palette, mood, harmonies, accessibility, preview, and CSS export
Dynamic DOM manipulation with event listeners and style updates

🚀 How to Run the App

Download the HTML file or open it from your browser.
Drag & drop any image (like a brand logo or photo).
Instantly visualize your brand palette and mood.
Copy HEX codes or export CSS variables with a single click.

No build tools or frameworks needed just open and explore.

💡 Final Thoughts

Brand Mood Analyzer by Amaan Shaikh, showcases a beautiful synergy between design, branding psychology, and frontend programming. It’s ideal for:

Students learning real-world applications of JavaScript
Designers exploring branding impact through colors
Developers building creative portfolio projects

Whether you’re learning, teaching, or designing this Brand Mood Analyzer is a fun, educational, and powerful tool to experiment with.

🎨 How To Make A Brand Mood Analyzer