HSL Color Adjustment
Figma 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
- Real-time Preview: See color changes instantly as you adjust the sliders
- Preview Toggle: Enable or disable live preview with a convenient checkbox
- HSL Controls: Adjust Hue (-180° to +180°), Saturation (-100% to +100%), and Lightness (-100% to +100%)
- Works on Multiple Objects: Select multiple layers and adjust them all at once
- Supports Gradients: Works with both solid fills and gradient fills/strokes
- Individual Reset Buttons: Each slider has its own reset button to quickly return to 0 (Or just right-click any slider)
- Direct Value Input: Type precise values directly into the number fields next to each slider
ㅤ
Using the Plugin
ㅤ
Select Your Objects
Select one or more objects in your Figma canvas that you want to adjust. The plugin works with:
- Shapes with solid fills
- Shapes with gradient fills
- Objects with strokes
- Multiple selected objects at once
Launch the Plugin
Open the plugin from the Figma menu:
- Go to Plugins → HSL Color Adjustment
- Or use the Quick Actions menu (Cmd/Ctrl + /)
- A plugin window will appear with multiple options:
ㅤ
Adjust the Sliders
Use the three sliders to modify your colors:
ㅤ
➊ Hue (-180° to +180°)
- Shifts colors around the color wheel
- Positive values shift clockwise (red → yellow → green → blue)
- Negative values shift counterclockwise
➋ Saturation (-100% to +100%)
- Adjusts color intensity
- Positive values make colors more vibrant
- Negative values make colors more gray/desaturated
➌ Lightness (-100% to +100%)
- Adjusts brightness
- Positive values make colors lighter
- Negative values make colors darker
➍ Control Preview
- Use the Preview checkbox to toggle real-time preview on or off
- When enabled, changes appear instantly as you adjust sliders
- When disabled, colors remain unchanged until you click Apply
➎ Apply or Cancel
- Click Apply to keep your changes
- Click Cancel to revert to the original colors
ㅤ
ㅤ
Tips
- Quick Reset: Right-click on any slider to instantly reset it to 0, or use the individual reset buttons (×) next to each slider
- Fine Control: Use the number input boxes next to each slider for precise values
- Toggle Preview: Turn off the Preview checkbox if you want to set all values before seeing the result
- Experiment Freely: The preview is non-destructive until you click Apply
- Combine Adjustments: Use multiple sliders together for complex color transformations
- Keyboard Input: Click the value fields and type exact numbers for pixel-perfect adjustments
ㅤ
ㅤ
That's all there is to it! With HSL Color Adjustment, you can quickly explore color variations and fine-tune your designs without manually editing each color.
The intuitive controls and real-time preview make color adjustments fast and effortless, helping you achieve the perfect look for your projects.
ㅤ
ㅤ