HSL Color Randomizer

About this plugin

DescriptionA lightweight, fast Figma plugin that randomizes the colors of selected layers using HSL (Hue, Saturation, Lightness) ranges. It supports fills, strokes, and image fills, live preview, and an optional “group by original color” mode to keep identical source colors mapped to the same randomized color across your selection.Key FeaturesRandomize fills, strokes, and image fills independently.Control exact HSL ranges via dual-knob sliders and numeric inputs.Live preview toggle to audition changes before applying.Group-by-original-color option for consistent color mapping across identical source colors.Reset buttons for each range (Hue 0–360, Saturation 0–100, Lightness 0–100).Saves your settings between sessions.What It’s Great ForQuickly exploring color variations on complex selections.Creating palette diversity while keeping structural color relationships.Randomizing image fills to generate playful variants.Using the Plugin ㅤ➊ Select LayersIn your Figma file, select the layers you want to randomize. This can include shapes, frames, vectors, text, and any nodes with fills or strokes. Image fills are also supported.If nothing is selected, the plugin shows an error and won’t apply changes.ㅤ➋ Launch the PluginOpen Plugins > HSL Color Randomizer.The UI appears with Hue, Saturation, and Lightness controls, plus toggles and action buttons.ㅤ➌ Set HSL RangesUse the dual sliders or numeric inputs to define ranges:Hue: 0–360Saturation: 0–100Lightness: 0–100Click the small reset button in each panel to return to full range.ㅤ➍ Choose What To RandomizeRandomize Fill Color — affects solid fills.Randomize Stroke Color — affects solid strokes.Randomize Image Fills — randomizes pixels of image fills within your HSL ranges.ㅤ➎ Keep Color Relationships (Optional)Toggle Group by Original Color to ensure identical source colors map to the same randomized color. This is useful for maintaining palette structure while adding variation.ㅤ➏ Preview ChangesUse the preview toggle button at the top to turn live preview on/off.With preview on, changes apply immediately as you adjust ranges and toggles.Turning preview off restores all original colors for the current selection.ㅤ➐ Apply or CancelRandomize — applies changes without closing the dialog.Apply — applies changes and closes the dialog.Cancel — restores the original colors (if preview was active) and closes the dialog.ㅤㅤNeed more design tools? Visit Samolevsky.com to discover more plugins and resources.ㅤㅤ