ColorSync by Blader

About this plugin

Plugin Description

ColorSync by Blader is an advanced tool for designers who need to generate professional color palettes, precise color harmonies, and perfectly balanced gradients. It uses functional algorithms to ensure professional-quality results directly in Figma.

Detailed Feature Breakdown

1. Core Controls

Color Picker

1. Function: Sets the base color for all harmonies.
2. Usage: Click to select any hue or manually enter HEX values.

Color Quantity

1. Function: Controls palette size (1-20 colors).
2. Pro Tip: Use 3-5 colors for minimalism, 10+ for complex systems.

Color Format

1. Options: HEX, RGB, HSL.
2. Function: Toggles value display (e.g., #FF5733 → rgb(255, 87, 51) → hsl(12, 100%, 60%)).

Dark/Light Mode

1. Function: Optimizes UI for low-light or bright environments.

2. Harmony Types

1. Each option uses color theory principles:

Complementary

1. What it does: Creates 2 opposing colors (180° apart).
2. Best for: Maximum contrast (CTAs, alerts).

Analogous

1. What it does: Generates 3-5 adjacent colors (30° increments).
2. Best for: Harmonious designs (branding, backgrounds).

Tints, Shades & Tones

1. What it does: Produces luminosity/saturation variations (+20% tints, -20% shades).
2. Best for: Design systems needing consistent scales.

Compound

1. What it does: Blends complementary + analogous colors (4-6 colors).
2. Best for: Data viz, illustrations requiring depth.

3. Output Sections

Generated Palette

1. Content: Displays colors based on your settings.
2. Pro Tip: Click any swatch to copy its value.

Color Buttons

1. Function: Compact palette for quick design integration.
2. 
   

Gradient Generator

1. What it does: Creates CSS-ready gradients from your palette.
2. Usage: Copy/paste directly into Figma styles or CSS.

4. Advanced Features

Multilingual Support

1. English, Spanish, and Chinese localization.

Smart Copy

On click:

1. Shows "Copied!" confirmation
2. Auto-formats to selected color space

Professional Use Cases

1. UI Design: Build component libraries with perfect contrast ratios.
2. Branding: Test logo color combinations instantly.
3. Illustration: Find coherent shadow/light palettes.
4. Presentations: Create slide decks with harmonious schemes.

Sample Workflow

1. Set corporate blue (#2E86AB) as base color.
2. Select "Compound" harmony with 6 colors.
3. Copy the auto-generated gradient for hero banners.
4. Export HSL values for design documentation.

📋 Change Summary

🎭 Visual Improvements

1. Completely redesigned with vibrant gradients and glassmorphism effects
2. Smooth hover animations and transitions
3. Improved dark mode with better contrast and visual effects
4. Depth effects with dynamic shadows and backdrop blur
5. Responsive design optimized for mobile and tablets

⭐ 4 New Features

1. 🎯 WCAG Contrast Analyzer

1. Checks the accessibility of your colors
2. Compliant with WCAG AA/AAA standards
3. Real-time preview Ideal for text on backgrounds

2. 📤 Export in Multiple Formats

1. CSS Variables - For modern projects
2. SCSS Variables - For Sass/SCSS
3. Tailwind Config - Direct integration with Tailwind
4. JSON - For any use

3. 🖼️ Image Color Extractor

1. Upload any image
2. Automatically extracts the 8 dominant colors
3. Drag & drop or click to upload
4. Click on any extracted color to use it

4. 🎲 Random Theme Generator

8 preset themes:

1. 🌊 Ocean - Sea blues
2. 🌅 Sunset - Warm oranges
3. 🌲 Forest - Natural greens
4. ⚡ Neon - Vibrant colors
5. 📜 Vintage - Antique tones
6. 🍬 Pastel - Soft colors
7. 🍂 Autumn - Autumnal
8. ⚫ Monochrome - Grayscale

Completely random generator

🌍 Full Multilingual Support

1. All new elements translated
2. English, Spanish, and Chinese (中文)
3. Instant language switching

🎨 Enhanced Original Features

1. ✅ Palette generator with variations
2. ✅ 11 color harmonies
3. ✅ HEX, RGB, and HSL formats
4. ✅ Copy colors to clipboard
5. ✅ Automatic gradients
6. ✅ Color preview buttons