HSL Color Randomizer
Figma Plugin
ㅤ
Description
A 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 Features
- Randomize 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 For
- Quickly 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 Layers
- In 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 Plugin
- Open Plugins > HSL Color Randomizer.
- The UI appears with Hue, Saturation, and Lightness controls, plus toggles and action buttons.
ㅤ

➌ Set HSL Ranges
Use the dual sliders or numeric inputs to define ranges:
- Hue: 0–360
- Saturation: 0–100
- Lightness: 0–100
Tip: Click the small reset button in each panel to return to full range.
➍ Choose What To Randomize
- Randomize 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 Changes
- Use 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 Cancel
- Randomize — 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.
☻ Summary
This plugin gives you precise control over color randomization – letting you explore countless variations instantly while keeping your design relationships intact.
The live preview makes it effortless to experiment, and the group-by-color option ensures your palette structure stays consistent even as individual colors shift.
ㅤ
ㅤ