ColorSync by Blader

About this plugin

Plugin DescriptionColorSync 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 Breakdown1. Core ControlsColor PickerFunction: Sets the base color for all harmonies.Usage: Click to select any hue or manually enter HEX values.Color QuantityFunction: Controls palette size (1-20 colors).Pro Tip: Use 3-5 colors for minimalism, 10+ for complex systems.Color FormatOptions: HEX, RGB, HSL.Function: Toggles value display (e.g., #FF5733 → rgb(255, 87, 51) → hsl(12, 100%, 60%)).Dark/Light ModeFunction: Optimizes UI for low-light or bright environments.2. Harmony TypesEach option uses color theory principles:ComplementaryWhat it does: Creates 2 opposing colors (180° apart).Best for: Maximum contrast (CTAs, alerts).AnalogousWhat it does: Generates 3-5 adjacent colors (30° increments).Best for: Harmonious designs (branding, backgrounds).Tints, Shades & TonesWhat it does: Produces luminosity/saturation variations (+20% tints, -20% shades).Best for: Design systems needing consistent scales.CompoundWhat it does: Blends complementary + analogous colors (4-6 colors).Best for: Data viz, illustrations requiring depth.3. Output SectionsGenerated PaletteContent: Displays colors based on your settings.Pro Tip: Click any swatch to copy its value.Color ButtonsFunction: Compact palette for quick design integration.Gradient GeneratorWhat it does: Creates CSS-ready gradients from your palette.Usage: Copy/paste directly into Figma styles or CSS.4. Advanced FeaturesMultilingual SupportEnglish, Spanish, and Chinese localization.Smart CopyOn click:Shows "Copied!" confirmationAuto-formats to selected color spaceProfessional Use CasesUI Design: Build component libraries with perfect contrast ratios.Branding: Test logo color combinations instantly.Illustration: Find coherent shadow/light palettes.Presentations: Create slide decks with harmonious schemes.Sample WorkflowSet corporate blue (#2E86AB) as base color.Select "Compound" harmony with 6 colors.Copy the auto-generated gradient for hero banners.Export HSL values for design documentation.📋 Change Summary🎭 Visual ImprovementsCompletely redesigned with vibrant gradients and glassmorphism effectsSmooth hover animations and transitionsImproved dark mode with better contrast and visual effectsDepth effects with dynamic shadows and backdrop blurResponsive design optimized for mobile and tablets⭐ 4 New Features1. 🎯 WCAG Contrast AnalyzerChecks the accessibility of your colorsCompliant with WCAG AA/AAA standardsReal-time preview Ideal for text on backgrounds2. 📤 Export in Multiple FormatsCSS Variables - For modern projectsSCSS Variables - For Sass/SCSSTailwind Config - Direct integration with TailwindJSON - For any use3. 🖼️ Image Color ExtractorUpload any imageAutomatically extracts the 8 dominant colorsDrag & drop or click to uploadClick on any extracted color to use it4. 🎲 Random Theme Generator8 preset themes:🌊 Ocean - Sea blues🌅 Sunset - Warm oranges🌲 Forest - Natural greens⚡ Neon - Vibrant colors📜 Vintage - Antique tones🍬 Pastel - Soft colors🍂 Autumn - Autumnal⚫ Monochrome - GrayscaleCompletely random generator🌍 Full Multilingual SupportAll new elements translatedEnglish, Spanish, and Chinese (中文)Instant language switching🎨 Enhanced Original Features✅ Palette generator with variations✅ 11 color harmonies✅ HEX, RGB, and HSL formats✅ Copy colors to clipboard✅ Automatic gradients✅ Color preview buttons