HSL Color Adjustment

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