Adjusting hue, lightness, saturation, and stroke width using Color Gestures
Mouse gestures are a way of accomplishing certain tasks simply by moving or dragging your mouse in a certain manner, and are often employed in applications and games to improve the user experience. Inkscape comes with mouse gestures available in the style indicator at the bottom-left of the screen. This is where the dragging to change hue, lightness, or saturation begins.
Most often we will want to change the lightness and saturation of a color. Website color palettes often include several colors that vary only slightly in lightness or saturation, and in illustrations we often add highlights and shadows that use the same base color with modified lightness.
Color Gestures offer a way to do this interactively so we see the changes in real time on screen. It's much easier to hit the correct shades this way, unburdened with numbers and only relying on visual feedback.
In this recipe we will go through several gestured color changes on the same object to see what it feels like to use the gestures in an ordinary workflow.
Getting ready
Color boxes in the Fill and Stroke dialogue also update in real time with Color Gestures so open it (Shift + Ctrl + F) and take notice while making the gestures. Seeing the indicators move as you gesture across the screen can be a very direct and simple method of understanding how the program is interpreting the motion of the pointer.
Generally speaking, Web designers and pixel artists prefer to use RGB for compatibility reasons, while photographers and printing industry professionals tend to work exclusively in the CMYK color space. However, many computer artists prefer using the HSL (Hue Saturation Lightness) color space, striking a good balance between computational speed and perceptual relevance. We will use it in this recipe, so make sure you select it in the Fill and Stroke dialogue.
How to do it...
The following steps will show you how to use Color Gestures:
- Select the Rectangle tool (F4) and draw a rectangle.
- Color its fill Red (#FF0000) and stroke (#A02C2C).
- Click and hold the fill box in the Style indicator, and drag away towards the middle of the window under the angle of approximately 45°.
- Still not releasing the mouse move it slowly towards the top left corner of the window and back towards the bottom right corner. Keep an eye on the Fill and Stroke dialogue as you drag.
- Release the mouse when over green area of the H box in the Fill and Stroke dialogue window, this will turn the object fill to lime green.
- Hold Ctrl while dragging on the fill box, move it away towards the window center and move back and forth like in Step 4, keeping an eye on the Fill and Stroke dialogue.
- Release the mouse when in the lower part of the window to change the fill color to a dark green.
- Switch to the Stroke paint tab in the Fill and Stroke dialogue window.
- Hold Shift while dragging the stroke box, move it away towards the window center, and move back and forth like in Step 4, while keeping an eye on the Fill and Stroke dialogue.
- Release the mouse when in the top part of the window to change the stroke color to dark red.
- Click and drag away from the stroke width box in the Style indicator, move it slowly towards the top-left corner of the window and back towards the bottom-right corner to see the stroke width change.
- Release the mouse when in the top part of the window to make the stroke width larger.
Here is a screenshot of some of the steps from this recipe:
How it works...
There is an imaginary line that goes from the Style indicator towards the canvas under the angle of 45°. Moving the mouse above that line increases the property value and moving it below decreases it.
With no modifier key hue is adjusted, Ctrl changes the lightness, Shift changes the saturation, and clicking on the stroke width box changes the stroke width.
There's more...
It isn't necessary to stop between different value changes. Try dragging the mouse diagonally from top-left to bottom-right while interchangeably releasing and holding the Ctrl and Shift keys.
Hold Alt while dragging to freeze the changes for a moment so you can reposition the mouse to a better spot. This is especially useful when encountering the window border while dragging.
You might be wondering about the opacity box in the Style indicator since this is the only option we haven't mentioned. This box doesn't react to click-dragging but you can put your mouse wheel to use here. Hover over the box with the mouse pointer and scroll the wheel up or down to change opacity.