Invert Colors

About this plugin

DescriptionInvert Colors is a Figma plugin designed to help designers quickly experiment with color inversions in their designs. Whether you're exploring dark mode alternatives, creating visual effects, or simply need to invert colors for accessibility testing, this plugin makes the process effortless.Key FeaturesReal-time Preview: See color inversions instantly before applying changesBatch Processing: Invert colors for multiple selected items at onceSmart Color Handling: Works with solid colors, gradients, and imagesNon-destructive Workflow: Preview changes before committingWhat Gets InvertedSolid Colors: RGB values are inverted (e.g., black becomes white)Gradients: All gradient stops are inverted while maintaining the gradient structureImages: True inversion for image fills by processing pixel data.Strokes: Both fills and strokes are processedㅤㅤUser Guide➊ Select Your ElementsOpen your Figma fileSelect one or more elements you want to invert:Shapes (rectangles, circles, polygons, etc.)Text layersFrames or groupsComponents or instancesTip: You can select multiple items at once to batch process them.ㅤㅤ➋ Launch the PluginWith your elements selected, open the plugin:Go to Plugins → Invert ColorsOr use the Quick Actions menu (Cmd/Ctrl + /) and search for "Invert Colors"ㅤㅤ➌ Preview Your ChangesThe plugin window will open with a Preview checkbox enabled by defaultYour selected elements will immediately show the inverted colorsToggle the Preview checkbox on/off to compare before and after:Checked: See the inverted colors in real-timeUnchecked: Return to original colorsNote: Preview is non-destructive - your original colors are preserved until you click Apply.ㅤㅤ➍ Apply or CancelOnce you're satisfied with the preview:Click "Apply": Permanently apply the color inversion to your selected elementsClick "Cancel": Close the plugin and revert to original colorsㅤㅤ➎ Undo if NeededIf you applied the changes and want to revert:Use Figma's undo function (Cmd/Ctrl + Z)Your original colors will be restoredㅤㅤ☻ Usage ExamplesCreating Dark Mode VariantsDuplicate your light mode designSelect all elements in the duplicateRun Invert Colors to quickly generate a dark mode starting pointFine-tune as neededAccessibility TestingSelect UI elementsUse Invert Colors to test contrast and readabilityIdentify potential accessibility issuesCreative EffectsSelect specific design elementsInvert colors for artistic or dramatic effectsCombine with other Figma features for unique resultsㅤㅤNeed more design tools? Visit Samolevsky.com to discover more plugins and resources.