Colors

✨ New Color Palettes ~ic-palettes-tab~~ic-palettes-tab~ – With the 4.7.0 update, you can now create and import multiple Color Palettes in Vectornator on your iPad, and add or delete singular colors including gradients from your Color Palette. Additionally, you have the option to set a Primary Palette in the Color Picker menu.

You can set and change your color properties with the Color Widget Tool (1) and the Color Picker Tool (2) in Vectornator for iPad. The Color Widget Tool is located at the bottom of the Toolbar on the left screen side, whereas the Color Picker is accessible inside the Style tab to the right side of your screen.

The Style Sections

When you select an object in Vectornator, you can open the Style tab on the right side of your workspace. This Tab is divided into three sections, the Fill (1), Stroke (2), and Shadow (3) section. Each section allows you to alter different color properties of your selected object.

The name of each section signifies the feature that will be altered by its control options.

• The first section is labeled Fill (1) and controls the fill properties of your selected object.
• The second section is labeled Stroke ~ic-stroke-width~~ic-stroke-width~ (2) and here you can control the Stroke Width and change between Regular Mode and Brush Mode.
• The third section is labeled Shadow ~ic-shadow~~ic-shadow~ (3) and controls the shadow casting options of your selected object.

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

In Vectonator you can find the basic elements of the Color Menu inside the Style Tab, such as the Color Fill options, the Stroke options, the display of the HEX code, and the Eyedropper ~ic-eyedropper~~ic-eyedropper~.

A – This section shows the current Color Fill or Stroke Color of the selected element. By tapping it, you will open up the Color Picker. You have the option to fill your shape with a gradient or a solid color.

B – This section displays the HEX code for the selected color. Tap it to open the Keypad, which allows you to change it. Hold to copy or paste your value.

C –  This Tool is the Eyedropper ~ic-eyedropper~~ic-eyedropper~. It allows you to copy any color on your canvas.

D – This button allows you to Swap ~ic-swap-colors~~ic-swap-colors~ your fill and stroke colors, or alternatively your shadow and stroke colors.

E – This button ~ic-toggle-on~~ic-toggle-on~ will enable or disable the fill or the stroke of the selected object.

F – Tap this button, to collapse or expand the color section.

‍

Fill

Inside the Fill section of the Style Tab, you can access the Color Picker ~ic-color-picker~~ic-color-picker~ by tapping the Color Well (A) inside the first subsection. To change the color of your shape, you can either set the color value by using the HEX Color button (B) or by picking the color from the canvas by using the Eyedropper ~ic-eyedropper~~ic-eyedropper~ (C).

Changing the Opacity

To change the opacity of your Fill, open the Appearance section (1) and slide with your finger along the Opacity slider (A). Another option is to select the shape and then use the Opacity ~ic-opacity~~ic-opacity~ slider (B) inside the Quick Actions menu at the bottom of your selected shape.

Blur

Vectornator implemented the option to blur shapes. Select the shape and open the expandable menu Appearance ~ic-style-tab~~ic-style-tab~ (1) inside the Style Tab. Slide with your finger along the Blur slider (A) to control the intensity of the Blur effect. The Blur effect will affect the stroke outline and the fill content of your selected shape simultaneously.

Stroke

A stroke is a visible line you can draw along a path. Strokes vary in width, color, appearance, style, and alignment. The visibility of a stroke can be enabled or disabled for a drawn path, or shape, similar to the fill option.

Inside the Stroke Section of the Style Tab, you can change the color of your path, access the Color picker ~ic-color-picker~~ic-color-picker~, set the HEX color, control the Stroke Width ~ic-stroke-width~~ic-stroke-width~ of your path and its Alignment, switch between Regular Mode and Brush Mode, create a dashed path-line, edit the end segments and intersections of your selected path.

A - Here, you can change the color of your path, access the Color Picker ~ic-color-picker~~ic-color-picker~, set the HEX Color, or use the Eyedropper ~ic-eyedropper~~ic-eyedropper~.

B – You can set your selected path's Stroke Width ~ic-stroke-width~~ic-stroke-width~.

C – Switch between Regular and Brush Mode.

D – Change the Arrows at the end segments of your selected path.

E – Set the Stroke Alignment to Center, Inside, Outside. (This option is available only with closed paths, paths that do not contain arrow end segments, and no brush strokes.)

F – Edit the Caps ~ic-round-caps~~ic-round-caps~ and Joints ~ic-mitter-joint~~ic-mitter-joint~ of your selected path or shape.

G – Create a Dashed Line along your selected path (you can specify the length of the dashes and the number of gaps between dashes.

Stroke and Fill Memory

With the 4.10.5 update, Vectornator now remembers the last stroke and fill status of your tools. That means you don’t have to manually reset the color properties every time you change tools. This speeds up your workflow and helps to keep designs consistent.

Inner, Outer, and Centered Strokes

By default, the stroke is centered on the shape's boundary: half of the stroke is inside the shape, and half is outside. This means the shape's visible width is the shape's width plus half of the stroke's width. (The outer half of the stroke width is added to the shape's width. The inner half of the stroke width is already contained inside the shape.)

When your path is closed, you have the option to set the alignment of your stroke. If the stroke has arrows, this option is not applicable.

With the current version of Vectornator, you have the following three options for your stroke alignment available:

%table(1,3)%

Center option ~ic-center-stroke~~ic-center-stroke~ | Aligns the stroke with being centered along its path.

Inside option ~ic-inner-stroke~~ic-inner-stroke~ | Creates an inner stroke. The entire stroke is contained inside the shape.

Outside option ~ic-outer-stroke~~ic-outer-stroke~ | Creates an outer stroke. The stroke as a whole is put outside the shape.

%table%

Note – In the current version of Vectornator, the Align Stroke To Center option is set by default.

Cap & Join Options

A cap is the final segment of an open stroke. A join is the part of a path where a straight line turns a corner and changes direction.

You can change the caps and joins of a line in the Stroke section of the Style Tab. In Vectornator, you can choose between the following cap options:

%table(1,3)%

Butt Cap ~ic-butt-caps~~ic-butt-caps~ | Creates paths with square-shaped end segments.

Round Cap ~ic-round-caps~~ic-round-caps~ | Creates paths with semicircular-shaped end segments.

Projecting Cap ~ic-projecting-caps~~ic-projecting-caps~ | Creates paths with square-shaped end segments. The square end segments extend beyond half the line width of the path equally in all directions.

%table%

%table(1,3)%

Miter Join ~ic-mitter-joint~~ic-mitter-joint~ | Creates stroked lines with pointed corners.

Round Join ~ic-round-joint~~ic-round-joint~ | Creates stroked lines with rounded corners.

Bevel Join ~ic-bevel-joint~~ic-bevel-joint~ | Creates stroked lines with beveled corners.

%table%

Dashed Strokes and How to Customize Your Stroke

You can create a dotted or dashed line by editing the stroke attributes using the two wheels at the bottom of the Stroke section:

• Dash allows you to set the length of the dashes of your path.
• Gap sets the distance between dashes.

To turn your regular path into a dashed one, draw a path using any drawing tools (Pen, Pencil, Shape) and toggle only the Stroke on. Then select the vector path.

In the Stroke section, tap & drag upward on the Gap wheel. Your path will immediately convert into a Dashed Line.

Note – If the Dash & Gap options aren’t visible, you’re currently in Brush Mode. In Vectornator, only Regular strokes can be turned into dashed lines.

How to Customize Your Stroke

When your dashes are rounded, the Cap option of your stroke is set to the Round Cap ~ic-round-caps~~ic-round-caps~. If you want to create a dashed line with squared dashes, you can select the Butt or Miter Cap options.

📹 Watch our short Instagram Reel on how to create a dotted line ->

Arrows

In the Arrows menu, you can change the appearance of the end segments of your path. Now, you can see a list of the available Arrow options. By tapping the Arrow button to the left, you will change the left end segment of your selected path; by tapping the Arrow button to the right, you will change the end segment on the right side of your selected path. You can choose two different arrow end segments for one single path.

Select your path and tap the Swap (1) button at the top right of your panel to easily swap the left and right arrowheads of your path end segments.

Shadow

At the bottom of your Style Tab, you can find the Shadow ~ic-shadow~~ic-shadow~ controls as follows:

You can change the Angle of your shadow drop via the Shadow Rotation Wheel (2). To the right of the Shadow Rotation Wheel, you will see a Live Preview (3) of the changes you have made. In the Blur Effect Slider below (4) you can adjust with your finger the intensity of the Blur Effect on your shadows. You can adjust the Shadow Offset of your shadow by using the Offset Slider (5) at the bottom of the Style Menu.

💬 Vectornator currently supports only the Drop Shadow option. Upvote it here.

The Color Picker

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

To open the Color Picker, simply tap the Color Well (1) for any Fill, Stroke, or Shadow you want to change.

• ‍The Fill Options – At the very top of the Popover menu,  you can switch between Solid (A) and  Gradient (B) to change the fill of your selected shape.‍
• The Preview – It shows the final result (C) of your color settings. On the right side (D) it will preview the previous color you used.‍
• The Color Picker ~ic-color-picker~~ic-color-picker~ (E) –  Drag the point around to pick your color. If you move from left to right you can change the color’s saturation, and up or down can change its brightness. It uses the HSB (hue, saturation, brightness) Color Model. If you have an object selected, the new color will change immediately as soon as you release your finger/pencil from the picker.
  If you tap the color picker point inside the Color Picker Window, you will get a numeric display of the RGBA  values of your sampled color at the bottom of the Color Picker Window. The RGB numbers signify the separate color ID and value of the channels R (red), G (green), and Blue (B) of your currently selected color. The number A signifies the current opacity value (Alpha channel) of your currently selected color.‍
• The Color Slider ~ic-color-sliders~~ic-color-sliders~ (F) – The Color Sliders control the color hue of your selected shape.‍
• The Alpha Slider (G) – The Alpha Slider controls the opacity (the Alpha Channel) of your color. The lower the value is, the more transparent the fill of your shape will be.‍
• The Hex Field (H) – The Hex Field displays the Hex Value of your selected color. You can copy and paste the Hex Number from this box to save the color information for later use, or manually set a Hex number with the keyboard to change the current color value.‍
• Color History (I) – Below the Alpha Slider, you can see a palette of six small boxes that display the last six colors that you have used previously.‍
• Color Palette ~ic-palettes-tab~~ic-palettes-tab~ (J) – You can pick a color while drawing and save it to your customizable color palette as a color or as a gradient.

⚠️ When you enter a color’s HEX code in the field, its Alpha value will return to 100%.

To close the Color Picker, simply swipe the popover down.

Color Picker & Color Slider Space

The Color Picker Popover contains two different tabs which allow you to choose a color depending on the Color Space you prefer to use.

In the first tab (1), you can simply move your cursor around the Color Picker (A) or use the Color Sliders (B) at the bottom.

In the second tab (2), you have the option to manually set a specific color using the RGB** (red, green, blue) Color Space and Alpha values. Alternatively, you can also use the sliders. Tapping the RGB label (C) below the sliders will take you to the HSB (hue, saturation, brightness) color controls. Tap again to switch back.

The Eyedropper

The Eyedropper ~ic-eyedropper~~ic-eyedropper~ allows you to pick & copy a color from any image or vector path you have on your canvas. Just tap the Eyedropper icon (1) in the Style Tab, which you can find close to the Fill, Stroke, or Shadow Well. A magnifying circle (2) will appear on top of your artwork. Hold and move it around until you find the color you want to sample.

If you have an object already selected, simply tap on the color you want to copy and the eyedropper will apply automatically the chosen color to the selected object.

Color Palettes

With the 4.7.0 update, you can now create and save multiple Color Palettes in Vectornator, and add or delete singular colors including gradients from your Color Palette. Additionally, you have the option to set a Primary Palette in the Color Picker menu.

You have two options available to import a Color Palette, you can either select swatches and ASE files from your folders or just drag and drop the Swatches directly from Procreate into Vectornator.

⚠️ Only users who have iOS 14 installed will be able to access this new feature.

The Default Color Palettes

When you install the 4.8.2 version of Vectornator, you will get twelve brand new additional Default Color Palettes: Essentials, Rainbow Power, Cotton Candy, Tokyo Neons, Lost in Space, Mother Nature, Sunset Burn, Ocean Blue, Hot Desert, Vintage Dream, Berlin Grays, and Skin Deep.

You can find them in the Palettes Tab ~ic-palettes-tab~~ic-palettes-tab~ . Once you delete the default palettes, you can’t restore them from the Vectornator App.

How to Create a Color Palette

To add a new Color Palette in Vectornator, move to the Palettes Tab by tapping the button Palettes ~ic-palettes-tab~~ic-palettes-tab~ (1) at the bottom of the Color Widget. At the top right corner of this window, you will find a + button (2) that allows you to either Create (A) or Import (B) a new Color Palette.

[1] To create a new Color Palette in Vectornator, tap the ~ic-create-doc~~ic-create-doc~ button and then tap Create. A new empty, greyed-out Color Palette appears at the bottom of the Palettes Tab.

[2] To add new colors to your empty Color Palette, go back to the Color Picker ~ic-color-picker~~ic-color-picker~ or Sliders ~ic-color-sliders~~ic-color-sliders~ to choose the first swatch of your palette. Now, go back to the Palettes Tab and tap the + button inside the empty palette you just created. A new Color swatch will appear automatically inside the palette.

Repeat the process to add more colors to your Color Palette.

‍

Pro Tip – If you want to add a gradient to your Color Palette, repeat the steps above but set a gradient with the Gradient Slider menu instead of picking a monochromatic color.

How to Create a Custom Color Palette from a Photo

Since the 4.8.2 update, you can create a custom Color Palette by extracting colors from images in the Photos App.

Open the Color Panel, and in the Palettes Tab ~ic-palettes-tab~~ic-palettes-tab~, you can see your Palettes. Tap the ~ic-create-doc~~ic-create-doc~ symbol in the top right corner and select the option From Photo.

As soon as you tap From Photo, you’ll be able to navigate to the Photos App, where you can see all your saved images. Tap on an image to extract a palette from the colors contained within the image.

Vectornator will extract six random color swatches from the image and add a new custom-made palette with the 📷  icon as its title. You can rename the palette by tapping on the palette title.

‍

How to Set your Primary Palette

To optimize your workflow, you can set your new Palette as the Primary Palette. That way the colors will be directly displayed at the bottom of your Color Picker Tab.

To set a Color Palette as the Primary Palette, tap on the ~key~...~key~ button in the Palettes Tab and choose the option Set as Primary. A "star” ~ic-set-primary~~ic-set-primary~ icon will appear to the right of the palette’s name so that you can immediately recognize which one is your Primary palette.

In this menu, you can also rename or delete the Color Palette. In order to do so, tap the  ~key~...~key~ button in the Palettes Tab once more and choose Rename and/or Delete.

The Color Palettes will be displayed simultaneously in the Color Widget to the left side of your screen and in the Color Picker menu to the right side of the screen.

‍

How to Import a Color Palette

With the 4.7.0 update, you can now import Color Palettes in swatches and ASE formats.

To import a Color Palette in Vectornator, tap the + button at the top right corner of the Palettes Tab and then choose Import. Select the Procreate swatches file or the Adobe ASE file and tap on it and the palette will be automatically displayed in the Color Picker menu.

‍

🎨 Want to get started with beautiful palettes right away?
    Download the 4.7 Welcome Pack ↓ we prepared for you.

How to Drag & Drop a Palette from Procreate

To drag & drop a Color Palette from Procreate to Vectornator, open Vectornator first.

In the next step, open Procreate and select the Color Palette you wish to import into Vectornator from the Palettes Tab of Procreate.

Select the Color Palette in Procreate and hold and drag it while simultaneously bringing Vectornator to the screen foreground and drop the Palette directly into the Palettes Tab of Vectornator.

Another option is to open Vectornator and Procreate simultaneously on iPad in Split View Mode and then repeat the steps as described above.

That’s it! You have imported your Color Palette from Procreate to Vectornator with the simple drag & drop technique.

‍

Learn more – If you want to know more about how to export Swatches from Procreate, you can go over to their Handbook.

Search for Color Palettes

You can now search for specific Palettes within the Palettes Tab menu, thanks to our new Search Box. Just tap on the bar and type the name of the Palette you are searching for.

Video Recap | Color Palettes

4.7.0 is all about Colors! We prepared an Academy Video to collect a few major things that came out with this update. Now, you can create, rename, import, save, and delete as many palettes as you like inside Vectornator. And there’s no limit to the number of color swatches and gradients you can save inside a single palette.

Play the video below for a walk-through on Color Palettes.

‍

Color Blending

In the Color Effects Tab, you'll find the Color Blending controls.

If you select multiple objects with different colors, you can use these buttons to blend the colors of your selected objects horizontally, vertically, or from the back to the front.

If you would like to get more information about the different Blend Modes in Vectornator and their influence on the Hue, Saturation, and Color Value of your object, go to the section Images / Blend Modes ->

How to create a Color Palette by using Color Blending

In Vectornator, you can use Color Blending to create with just one tap on a button a beautiful color palette.

To do so, create a circle shape with fill, and then duplicate it by activating the Duplicate Mode ~ic-duplicate~~ic-duplicate~ (If you’re using the Magic Keyboard, or any external keyboard with your iPad, you can also use the shortcut ~key~ALT~key~ to duplicate the shape). Duplicate the circle shape at least 5 times.

Select the first circle and set a color in the Color Picker. Repeat the previous operation with the fifth circle. Then set the colors of the first and fifth shapes, they can be opposite, complementary, monochrome, black, white, whatever you choose, as long as the colors reflect your design concept.

Select all five shapes and open the Color Effects Tab in the Color Blending section. In the last step, tap the Blend Horizontally button.

Voila! You have created a Color Palette with Color Blending in Vectornator! You can now save and name your Color Palette in Vectornator.

‍

You may ask: How do you go about creating color palettes?

We have a super easy way for you to do it. And it goes by the name of Color Blending. What happens in this operation, is that the beginning and end colors for a horizontal, vertical, or stack distribution define the spectrum of hues for all the shapes in between. It’s really the easiest way to create fresh color palettes that are unique and harmonious. How does it work?

Watch our Academy Video to find out!

‍

📹  You can watch our YouTube video How to Create a Unique Color Palette with the talented artist Soodabeh (@sooodesign) to learn more about color theory, contrasts, color balance, and where to find inspiration.

Color Adjustments

Beneath the Color Blending controls, you can find the Color Adjustment controls. These two buttons allow you to Desaturate (A) or Invert (B) the colors of your selected object.

Desaturate

This feature (A) comes in handy if you want to convert your artwork into black & white in just one step. By using the Desaturate command, you can convert all of the colors on the active layer to corresponding shades of gray. This differs from converting the image to grayscale in two respects. First, it only operates on the active layer and second, the colors on the layer are still RGB values with three components.

Color Inversion

The Invert button (B) allows you to easily check the contrast levels and can help those with impaired vision.

Color inversion traces its roots to analog photography. Inverting a traditional black-and-white film negative turns the dark areas light, transforming the negative into a recognizable image. With digital art, color inversion is now mainly used to generate a new color palette or a new version of your original artwork. White becomes black, red areas appears as cyan, green to magenta, orange becomes blue, and so on. A way to think of it is to pick a point on the color wheel, draw a line from it going through the center of the wheel, and extending the same distance from the center into the opposite direction. And that’s your complimentary chromaticity.

Video Recap | Color Adjustments

Enough theory, no? We prepared a short Academy video to understand how Color Saturation and Inversion work.

‍

The Gradient Editor

In Vectonator you have two gradient options available to fill an object. You can either select a Linear or a Radial Gradient.

Linear gradients are the most commonly used gradients. In this case, two colors appear at opposite ends of the color spectrum and blend into each other.

Radial gradients blend radially from the central point of an object outwards.

Linear & Radial Gradients

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

You can here either choose a Solid Fill option by tapping the left button or choose the Gradient fill option by tapping the button to the right.

If you tap the Gradient button, below two Gradient Style options will be available to you. If you tap the left button (A) you will choose the Linear Gradient fill option, if you choose the right button (B) you will choose the Radial Gradient fill option.

Tap on one of these options to choose the type of gradient that you wish to apply 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 deselected ones.

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.

Pro Tip – You can apply gradients to stroke paths that were previously converted into shapes using the Outline feature. Watch this video to learn how to do it →

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.

If you want to reverse the direction of your gradient, simply drag the color sliders to their opposite side.

‍

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.

‍

The Color Widget

Located at the bottom of your Toolbar on the left side of your screen, the Color Widget allows you to change fast and easily the color properties of your selected shape.

With Version 4.7.0, the Color Widget has now newly integrated features available such as:

• The Color Picker and the History Panel.
• All the sliders from the Color Panel.
• The Color Palette functions.
• The adjustable Effect options.

These two new additional buttons below the Toolbar allow you to select and change easily and fast the Fill (1) and the Stroke (2) colors of your Vector Paths without the need to open the Inspector menu.

Tap the Stroke widget to open the Color Picker. The Stroke Widget can be used exactly the same way as the Color Picker in the Style Tab. The functions and properties are identical to the Color Picker.

Tap the Fill Widget to open the Color Picker. Here you can choose between a Solid and a Gradient Fill.

You can find the Eyedropper ~ic-eyedropper~~ic-eyedropper~ at the top left corner of the Color Picker which allows you to pick any color from the canvas. When the Eyedropper is active, a magnifying circle will appear on top of your artwork. Hold and move it around until you find the color you want to sample.

‍

By long-pressing on the widget, a context menu will appear from which we can:

A – Open the Color Picker,

B – Use the Eyedropper ~ic-eyedropper~~ic-eyedropper~,

C – Swap between Fill and Stroke options.

D – Disable the stroke/fill color. When disabled, the circle will appear with a diagonal red line on top.

When the Stroke Color or the Fill Color is disabled in the Color Widget, a diagonal red line will appear on the corresponding circle to show its deactivation.

‍

Video Recap | The Color Picker

Mastering color is something that many might consider a privilege reserved for advanced creators. But with Vectornator's Color Picker and Color Widget Tool it's easier to become a color Jedi than you think.

By using the Color Widget tool, you can quickly modify the hue of an object by selecting it, then tapping one of the two new buttons below the Toolbar. You can also access more options in the Color Picker, like interacting with the newly-redesigned Eyedropper ~ic-eyedropper~~ic-eyedropper~ or swapping the Fill and the Stroke.

Watch the video below for a full recap on how the Color Picker and Widget tool work on the Vectornator iPad App.

‍

If you are a Mac user and wish to get additional info on how to use the aforementioned Tools on your Mac device, please go over to our Mac manual for additional information.