Beta
Learning Hub
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path d="M12.223 21c3.782 0 6.307-1.386 6.307-3.451 0-1.781-1.383-2.139-1.383-3.167 0-1.413 4.853-1.615 4.853-5.305C22 5.414 18.325 3 12.847 3 5.764 3 1 6.708 1 12.133 1 17.448 5.523 21 12.223 21zm.892-12.327c-.794 0-1.454-.661-1.454-1.487s.66-1.487 1.454-1.487c.803 0 1.445.661 1.445 1.487s-.642 1.487-1.445 1.487zm-4.657 1.432c-.99 0-1.793-.808-1.793-1.836 0-1.019.803-1.817 1.793-1.817.981 0 1.784.808 1.784 1.817 0 1.028-.803 1.836-1.784 1.836zm8.814-.688c-.66 0-1.186-.532-1.186-1.212 0-.661.526-1.202 1.186-1.202.642 0 1.16.569 1.16 1.202 0 .652-.517 1.212-1.16 1.212zM5.086 13.271c-.785 0-1.427-.679-1.427-1.487 0-.789.669-1.46 1.427-1.46.794 0 1.427.652 1.427 1.46s-.633 1.487-1.427 1.487zm7.039 4.333c-1.329 0-2.409-1.12-2.409-2.497 0-1.368 1.079-2.497 2.409-2.497 1.338 0 2.427 1.129 2.427 2.497 0 1.404-1.044 2.497-2.427 2.497z" fill="currentColor"/></svg>
Colors

Colors

Color is one of the most crucial elements of illustration and graphic design. In Vectornator, any path, shape or image can be edited inside the Inspector, allowing you to alter its color and style.

The Style Sections

When you select an object in Vectornator, the Style tab will open on the right side of your workspace. There are three main sections under the Style tab, which allow you to control the Fill (1), Stroke (2), and Shadow (3) properties of the selected object.

Each of these sections will show different context-aware options depending on which object you've selected.

Each of the three main sections under the Style tab begins with a name (1), telling you which features that section can control. Each of these main sections share some similar controls. The first section, labeled Fill, controls the interior color of your selected element.

(A) This shows the current Color Fill or Stroke Color of the selected element. By tapping it, you will open up the Color Picker.

(B) This is the Eyedropper. It allows you to copy a color on your canvas. Just tap the Eyedropper icon, then tap on the color you want to copy. Please note that the Fill eyedropper will only set this new color for the Fill section.

(C) This displays the HEX code for the selected color. Tap it to open the Keypad, which allows you change it.

(D) This button allows you to Switch your fill and stroke colors, or your shadow and stroke colors.

(E) This button will Hide or Display the fill or the stroke of the selected object.

How to Switch Fill & Stroke

This button allows you to switch your fill and stroke colors, or your shadow and stroke colors in just one tap. It easily helps you to fill a path using the same color of its stroke.

Fill

Inside the Fill section of the Style Tab, you can:

(2) change the Corner Radius of your shape

(3) change your shape's Opacity

(4) switch between different Blend Modes

(5) adjust the amount of Blur on your shape

You can always access the Color Picker by tapping the Color Well within the first subsection, or simply change your shape's HEX Color by tapping on it.

Changing the Opacity

Along with Blending modes, you can change a Fill’s opacity to combine and show two or more filled paths.

In Vectornator, you can change the Opacity using:

  • the Opacity Slider inside the Inspector
  • the Opacity Slider inside the Quick Actions

Stroke

Inside the Stroke section of the Style Tab, you can:

(2) set the Stroke Width of your selected path or shape

(3) change the Arrows at the ends of your selected path

(4) create a Dashed Line along your selected path (you can specify the length of the dashes and the number of gaps between dashes)

(5) edit the Cap and Join intersections of your selected path or shape

Just as in the Fill section, you can access the Color Picker by tapping on the Color Well.

Arrows

In the Arrows (3) section, you can change the ends of your selected path. Just tap on an arrowhead to change the ends of the path. You can select two different line ends if you wish.

Tap the Swap button in the top right of the panel to swap your selected ends to the other end of the selected line.

Shadow

Inside the Shadow section of the Style Tab, you can:

(2) visualize your shadow's Rotation and change its Angle with a tap

(3) view a Live Preview of how your shadow will look on a model object

(4) edit your shadow's Blur effect

(5) change the Offset of your shadow

The Color Picker

The Color Picker allows you to change the color of your selected object's Fill, Stroke or Shadow inside the corresponding section within the Style Tab.

To open the Color Picker, simply tap the Color Well of the aspect you want to change. Then, pick your new color from the palette or insert a specific HEX code. To close the Color Picker, simply swipe it down.

You can also move your cursor around inside the Color Palette to show a live preview of the new color within your selected object.

Inside the Color Picker, there are two different tabs which allow you to change the color.

In the first tab, you can simply move your cursor around the Color Palette (1) or insert a specific color HEX code (2).

In the second tab, you'll find a series of sliders allowing you more fine control over your color's RGB values.

Tapping the button below the sliders will take you to the HSB color controls. Tap again to switch back.

The Eyedropper

The Eyedropper allows you to pick & copy a color from your any image or vector path you have on your canvas. Just tap the Eyedropper icon, then tap on the color you want to copy.

You can quickly access it in the Style Tab or by pressing the <key>I<key> key on your keyboard.

Personal Color Palette

You can tap the + sign to add a new color to your personal color palette.

Tap and hold on a saved color to Delete it.

Tapping a saved color to a selected shape on your canvas will fill the shape with that color.

Color Blending

Underneath the Color Picker, you'll find the Color Blending controls.

If you're selecting multiple objects with different colors, you can use these buttons to blend the selected objects' colors horizontally, vertically, or from back to front.

Read our blog on How to Create a Color Palette in Vectornator using the Color Blending Options ➞

Color Adjustments

Beneath the Color Blending controls, you'll find the Color Adjustment controls. These two buttons allow you to Desaturate or Invert your selected object's colors.

The Gradient Editor

There are two gradient options available for an object in Vectornator, Linear and Radial.

Linear gradients are usually the most common, where two colors appear at opposite ends of an object and blend into each other.

Radial gradients begin at the center of the object, and blend outwards from that point.

Linear & Radial Gradients

After selecting your shape, tap the Color Well in the Fill section of the Style Tab to open the Color Palette.

There are three gradient options at the top of the Color Palette window.

From left to right, they are: No Gradient, Linear Gradient, and Radial Gradient. Tap one of them to apply that type of gradient to your selected shape.

Editing Gradients

Each of the colors in your gradient is represented by a Color Slider on the Gradient Bar.

A Color Slider looks like a teardrop with a circle in it. Your selected Color Slider will appear slightly larger than the others.

You can tap on a Color Slider to set its color via the Color Picker. Updating the color of a Color Slider will immediately update the gradient live in your selected shape.

You can tap and drag the Color Sliders along the Gradient Bar to move them and change the gradient's smoothness.

Add a new Color to your Gradient

Tapping on the Gradient Bar between two Color Sliders will create a new Color Slider.

Double tap in the middle of the Gradient Bar to distribute the Color Sliders evenly.

Swipe either direction along the Gradient Bar to flip the color points.

TIP: Updating one of these Color Sliders will immediately update the gradient of your shape.

Removing a Color from a Gradient

Tap and drag a Color Slider down off of the Gradient Bar to delete it.

Change the Direction Angle of a Gradient

You can tap and drag on the gradient handles on the canvas to change the position and angle of the gradient.

Download
Download the PDF version here.
Last Updated on Jun 08, 2021
Was this useful?