HSL Color Randomizer

About this 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

1. Randomize fills, strokes, and image fills independently.
2. Control exact HSL ranges via dual-knob sliders and numeric inputs.
3. Live preview toggle to audition changes before applying.
4. Group-by-original-color option for consistent color mapping across identical source colors.
5. Reset buttons for each range (Hue 0–360, Saturation 0–100, Lightness 0–100).
6. Saves your settings between sessions.

What It’s Great For

1. Quickly exploring color variations on complex selections.
2. Creating palette diversity while keeping structural color relationships.
3. Randomizing image fills to generate playful variants.

Using the Plugin

ㅤ

➊ Select Layers

1. 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.
2. If nothing is selected, the plugin shows an error and won’t apply changes.

ㅤ

➋ Launch the Plugin

1. Open Plugins > HSL Color Randomizer.
2. The UI appears with Hue, Saturation, and Lightness controls, plus toggles and action buttons.

ㅤ

➌ Set HSL Ranges

1. Use the dual sliders or numeric inputs to define ranges:
2. Hue: 0–360
3. Saturation: 0–100
4. Lightness: 0–100
5. Click the small reset button in each panel to return to full range.

ㅤ

➍ Choose What To Randomize

1. Randomize Fill Color — affects solid fills.
2. Randomize Stroke Color — affects solid strokes.
3. Randomize Image Fills — randomizes pixels of image fills within your HSL ranges.

ㅤ

➎ Keep Color Relationships (Optional)

1. 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

1. Use the preview toggle button at the top to turn live preview on/off.
2. With preview on, changes apply immediately as you adjust ranges and toggles.
3. Turning preview off restores all original colors for the current selection.

ㅤ

➐ Apply or Cancel

1. Randomize — applies changes without closing the dialog.
2. Apply — applies changes and closes the dialog.
3. 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.

ㅤ

ㅤ