Skip to content
HSL Color Adjustment

HSL Color Adjustment

by Samolevsky

Adjust the Hue, Saturation, and Lightness of selected vector objects in real-time

FreeFigma

Installs

200

Likes

16

Users

1,338

Views

511

Preview

HSL Color Adjustment preview

About this plugin

DescriptionA 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.ㅤㅤFeaturesReal-time Preview: See color changes instantly as you adjust the slidersHSL 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 onceSupports Gradients: Works with both solid fills and gradient fills/strokesRight-click Reset: Right-click any slider to instantly reset it to 0ㅤㅤHow to Useㅤ➊ Select Your ObjectsSelect one or more objects in your Figma canvas that you want to adjust. The plugin works with:

Shapes with solid fillsShapes with gradient fillsObjects with strokesImage fillsMultiple selected objects at onceㅤㅤ➋ Launch the PluginOpen the plugin from the Figma menu:

Go to Plugins → HSL Color AdjustmentOr use the Quick Actions menu (Cmd/Ctrl + /)ㅤㅤ➌ Adjust the SlidersUse the three sliders to modify your colors:

Hue (-180° to +180°)Shifts colors around the color wheelPositive values shift clockwise (red → yellow → green → blue)Negative values shift counterclockwiseSaturation (-100% to +100%)Adjusts color intensityPositive values make colors more vibrantNegative values make colors more gray/desaturatedLightness (-100% to +100%)Adjusts brightnessPositive values make colors lighterNegative values make colors darkerㅤㅤ➍ Apply or CancelClick Apply to keep your changesClick Cancel to revert to the original colorsChanges preview in real-time as you adjust the slidersㅤㅤ☻ TipsQuick Reset: Right-click on any slider to instantly reset it to 0Fine Control: Use the number input boxes next to each slider for precise valuesExperiment Freely: The preview is non-destructive until you click ApplyCombine Adjustments: Use multiple sliders together for complex color transformationsㅤㅤFor more design tools, visit Samolevsky.com

More editing & effects plugins plugins

View all