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.

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.

1. Select "Compound" harmony with 6 colors.
2. Copy the auto-generated gradient for hero banners.
3. Export HSL values for design documentation.