HSL Color Adjustment

About this plugin

Description

A Figma plugin that allows you to adjust the Hue, Saturation, and Lightness of selected vector objects in real-time. Perfect for quickly exploring color variations, creating color schemes, or fine-tuning your designs.

ㅤ

ㅤ

Features

1. Real-time Preview: See color changes instantly as you adjust the sliders
2. HSL Controls: Adjust Hue (-180° to +180°), Saturation (-100% to +100%), and Lightness (-100% to +100%)
3. Works on Multiple Objects: Select multiple layers and adjust them all at once
4. Supports Gradients: Works with both solid fills and gradient fills/strokes
5. Right-click Reset: Right-click any slider to instantly reset it to 0

ㅤ

ㅤ

How to Use

ㅤ

➊ Select Your Objects

Select one or more objects in your Figma canvas that you want to adjust. The plugin works with:

1. Shapes with solid fills
2. Shapes with gradient fills
3. Objects with strokes
4. Image fills
5. Multiple selected objects at once

ㅤ

ㅤ

➋ Launch the Plugin

Open the plugin from the Figma menu:

1. Go to Plugins → HSL Color Adjustment
2. Or use the Quick Actions menu (Cmd/Ctrl + /)

ㅤ

ㅤ

➌ Adjust the Sliders

Use the three sliders to modify your colors:

Hue (-180° to +180°)

1. Shifts colors around the color wheel
2. Positive values shift clockwise (red → yellow → green → blue)
3. Negative values shift counterclockwise
4. Saturation (-100% to +100%)

Adjusts color intensity

1. Positive values make colors more vibrant
2. Negative values make colors more gray/desaturated
3. Lightness (-100% to +100%)

Adjusts brightness

1. Positive values make colors lighter
2. Negative values make colors darker

ㅤ

ㅤ

➍ Apply or Cancel

1. Click Apply to keep your changes
2. Click Cancel to revert to the original colors
3. Changes preview in real-time as you adjust the sliders

ㅤ

ㅤ

☻ Tips

1. Quick Reset: Right-click on any slider to instantly reset it to 0
2. Fine Control: Use the number input boxes next to each slider for precise values
3. Experiment Freely: The preview is non-destructive until you click Apply
4. Combine Adjustments: Use multiple sliders together for complex color transformations

ㅤ

ㅤ

For more design tools, visit Samolevsky.com