Working with colours is an essential part of using any digital painting software. Procreate offers a variety of ways to use and experiment with colours. In this chapter, you will learn how colour tools are organized in the Procreate app. These tools help you choose, edit, and save colours.
There are several types of colour interfaces to aid your unique style of working. Each of them has its own qualities and special functions, which will be introduced as you read further.
We’re going to cover the following broad topics in this chapter:
Before we dive into the interface, there are a few basic terms you should be familiar with that will help you navigate colour in a digital space. These terms are used to describe certain properties of colour and can be altered to create other colours. If you’re already an artist with some experience, you may be familiar with these terms. However, when starting out with digital art or art in general, it’s essential that you have a working knowledge of these words. These terms are hue, saturation, and value. Let’s look at them one by one.
Hue refers to the basic pigment making up the colour. For instance, the dark blue and light blue in the following figure both contain the same type of blue, hence their hue is the same:
Figure 10.1: Two colours of the same hue
However, when you look at the new pair of blues shown in the following figure, you’ll notice that the pigment differs between the two. In other words, their hues are different:
Figure 10.2: Two colours of different hues
Saturation pertains to the intensity of pigment in a colour. In informal terms, this is what we mean when using the terms “bright” or “dull” to describe colours.
The following figure shows two yellow colours of the same hue, but one has high saturation, while the other low:
Figure 10.3: Two colours of the same hue but different saturation
At the lowest saturation, every colour turns into a neutral gray with no associated hue. However, in the real world, there are hardly any colours with zero saturation, which gives rise to “warm” and “cool” grays. Warm hues (such as red, orange, and yellow) at low saturation produce warm grays, as shown in the following figure:
Figure 10.4: Warm grays
Similarly, cool colours (such as blue, violet, and green) produce cool grays, as shown in the following figure:
Figure 10.5: Cool grays
The lightness or darkness of a colour is called its value. The value of a colour can be changed by pushing it towards black or white.
When a hue at maximum saturation is pushed towards black, its value decreases, giving rise to darker colours. This is demonstrated in the following figure:
Figure 10.6: Values moving towards black
When a hue at maximum saturation is pushed towards white, its value increases, creating lighter colours, as shown in the following figure:
Figure 10.7: Values moving towards white
In the next section, we’ll jump right into the different tools Procreate offers you for working with colours.
When working with colours on Procreate, the interface plays a big role. This section will introduce the controls available to you that will allow you to explore the colour tools.
The Colours panel is the window where all colour tools are available. It can be invoked by tapping on the coloured circle in the top-right corner of the screen, called the colour button. It is shown in the following figure
Figure 10.8: The Colours panel
The Colours panel has the following tools:
Primary and secondary colours are useful when working with brushes that switch back and forth between the two. Learn more about using a secondary colour in brushes in Chapter 9, Brush Studio Settings – Editing and Combining Brushes.
Each new canvas comes with a clear history, but you can use the Clear button to get rid of it on your current canvas, too.
This section is available on iPad and iPad Pro models with a screen larger than 10.2 inches.
The Colours panel can be transformed into a floating window called Colour Companion. It is a feature that helps you keep the Colours panel within easy reach while you work. To invoke it, use the following steps:
Figure 10.9: Colour Companion
The next element of the Colours panel is the active colour.
The colour button in the top-right corner of the screen shows the active colour. It primarily has two functions:
Figure 10.10: ColourDrop
The next subsection will elaborate more on ColourDrop.
ColourDrop helps you flood fill areas of the canvas, such as colouring line art, filling in shapes, and creating mono-colour layers. This is done by dragging the active colour over to the desired area and releasing it to fill it in.
An important feature of this tool is ColourDrop Threshold. This dictates how much area will be filled by ColourDrop. At low threshold values, the colour fill will stay confined to smaller spaces. At higher values, it will spill over the edges and cover more area by breaking colour or transparency boundaries. To activate the ColourDrop threshold, follow these steps:
Figure 10.11: ColourDrop Threshold
The next feature of ColourDrop is also especially useful when used in conjunction with the threshold. It’s called Recolour, and it helps you fill colour multiple times in quick succession, without having to drag and drop the active colour over and over. To use Recolour, follow these steps:
Figure 10.12: Continue Filling with Recolour
Figure 10.13: Recolour in action
Figure 10.14: Flood slider
The next subsection will introduce SwatchDrop, which is a feature similar to ColourDrop.
SwatchDrop lets you fill colours directly from a palette into your canvas. It works the same way as ColourDrop. The only difference is that instead of dragging the active colour, you drag a colour from a palette.
To access the palettes, follow these steps:
Figure 10.15: Colour interface options
Figure 10.16: Palettes
SwatchDrop works exactly like ColourDrop, including Drop Threshold and Recolour, so the previous section has all the information you’ll need for this.
In the next subsection, you will learn how to sample colours from your artwork using the Eyedropper.
Pick a colour from any area of the canvas to make it your active colour, using the Eyedropper tool. There are several ways to use this tool.
The first way to invoke the Eyedropper is by tapping and holding. Touch the point on the canvas that you want to sample and hold it until a disc pops up there. The upper half of this disc shows the colour you are currently sampling, and the bottom half shows the last active colour, as in the following figure:
Figure 10.17: Eyedropper
You can sample colour throughout the canvas by just dragging your finger across the screen with Eyedropper activated. The disc will show you the picked colours in real time. In the center of the disc, you’ll see a zoomed-in section of the artwork from where you’re picking the colour.
The second way to use the Eyedropper is by using the Modify button. This is the square-shaped button found between the brush size and brush opacity sliders, shown in the following figure:
Figure 10.18: Modify button
The Modify button can be used to colour pick in either of these two ways:
You can edit how the Modify button behaves using Gesture Controls. To learn more about gestures, refer to Chapter 6, Using Gestures and Shortcuts.
In the next few sections, we will learn about the five different interfaces that let you pick colours using the Colours panel.
The color disc is a versatile way to choose colours, by giving you control of the hue and saturation separately. Tap on the active colour and choose Disc from the options at the bottom, which will show you the disc interface, shown in the following figure:
Figure 10.19: Disc
Let’s take a closer look at these controls.
The color disc allows you separate control over hue and saturation. The outer ring is a colour wheel from which you can choose a hue. The disc in the middle displays the saturation and value range for the chosen hue, from which you can pick your preferred colour.
The saturation disc is quite small, which may make it difficult to make finer adjustments. To remedy this, it can act as a separate unit when certain gestures are used.
These gestures help you use the saturation disc more conveniently:
Figure 10.20: Saturation disc
This makes the hue ring disappear and gives you a bigger area to work with. Once you close the Colours panel, the disc goes back to normal.
For experienced digital illustrators looking for a more traditional approach to colours, the Classic interface is ideal. Tap on the active colour and select Classic to switch to this style colour selection. It is shown in the following figure:
Figure 10.21: Classic
Let’s take a closer look at these controls.
The Classic interface has two major elements. The Classic colour window displays the saturation and value range of the selected hue, similar to the saturation disc in the previous section. It also has a reticle to let you choose colours.
Below that are three sliders pertaining to hue, saturation, and value. These sliders allow for finer control over all aspects of a chosen colour.
The next option is a great way to pick colours that work well with each other to create harmonious combinations. Tap on the active colour and choose Harmony to use this tool, as shown in the following figure:
Figure 10.22: Harmony
Let’s take a closer look at these controls.
The interface of Harmony consists of a hue and saturation disc, with a separate slider for value. Changing the value slider makes the colour disc uniformly darker and lighter.
The hue-saturation disc can have one or more reticles, depending on the harmony mode. These reticles rest on harmonious colour combinations. The larger reticle is called the primary, and the smaller ones are called the secondary reticles. When one is moved, the others move along with it, still maintaining their interrelationships.
Modes let you choose the type of colour relationships that will be selected by Harmony. Modes can be chosen from a menu in the top-left corner of the Colours panel, as shown here:
Figure 10.23: Harmony modes
There are the following types of harmony modes:
When Harmony is activated, you can switch between colours by simply tapping any of the reticles.
You can also save your favorite colour combinations into a blank palette for future use. To do so, select the colour you want to save, and then tap on an empty swatch in your current default palette. This will create a new swatch of that colour in the palette. We’ll learn more about palettes in the Palettes section later in this chapter.
Sometimes you may be working on a project that needs you to work with precise, accurate colours. Value is designed to help you with such requirements. It has precision sliders that help replicate colours and create exact shades. The interface of this tool is shown in the following figure:
Figure 10.24: Value
Let’s take a closer look at these controls.
The interface of Value consists of six sliders and one text input box, as follows:
The Hue slider can have values ranging from 0-360° since this slider is essentially the circular colour wheel straightened out into a line. It starts at red, becomes green at 180°, and ends in red again at 360°.
The Saturation slider has values ranging from 0-100%, where 0% means no saturation, and 100% means the highest saturation.
The Brightness slider works the same way, where 0% is black and 100% is the brightest point of the colour.
Turn up Red to 255 and the other sliders to 0 to get pure red. This works the same way for pure green and blue. The following table shows some combinations of red, green, and blue:
RGB Values |
Result | ||
Red: 255 |
Green: 255 |
Blue: 255 |
White |
Red: 255 |
Green: 0 |
Blue: 0 |
Red |
Red: 0 |
Green: 255 |
Blue: 0 |
Green |
Red: 0 |
Green: 0 |
Blue: 255 |
Blue |
Red: 255 |
Green: 255 |
Blue: 0 |
Yellow |
Red: 255 |
Green: 0 |
Blue: 255 |
Magenta |
Red: 0 |
Green: 255 |
Blue: 255 |
Cyan |
Red: 0 |
Green: 0 |
Blue: 0 |
Black |
Hexadecimal: Every digital colour has a unique six-character code that represents it. These codes are written after a # symbol and are called hexadecimal (hex) codes. Procreate lets you input the hex code of your required colour into this text input box. This will let you maintain consistent colour schemes when working on projects that have such requirements.
The last option in the Colours panel is Palettes. As the name suggests, this mode allows you to create and save colour schemes for ready use. Additionally, it also helps turn images into colour palettes. The interface of Palettes is shown in the following figure:
Figure 10.25: Palettes
Let’s look into the features of this colour tool in more detail.
Swatches are the building blocks of a palette. Each individual colour in a palette, represented as a coloured square, is called a swatch. There are two ways that swatches are represented in Procreate:
Figure 10.26: Compact view
Figure 10.27: Cards view
To rename a card, tap on the name to invoke the keyboard, and minimize it to commit.
Next, let’s introduce some actions you can perform with swatches:
Alternatively, you could even create a fresh palette to give yourself more space to make your own swatches. Find more information about creating a palette in the Palette library section later in this chapter.
Figure 10.28: Set swatch to current colour
Then, tap Set current colour.
In the next subsection, we will discuss the palette library, which is where all your palettes are stored.
The palette library houses and displays all your palettes. This is essentially the interface you see when you select Palettes. From here, you can create, edit, import, and share palettes.
We will discuss the features of the palette library as follows:
Figure 10.29: New palette menu
To set a palette as your default, tap on the three dots icon in the top-right corner of the palette. The following menu appears:
Figure 10.30: Palette menu
Select Set as default.
Important Note
From Palettes, simply select a swatch from any palette to automatically set said palette as the default.
The following subsection will introduce Palette Capture, a handy way to convert images into palettes.
Palette Capture is an extremely useful feature that allows you to extract colour palettes from images as well as the camera.
There are two types of Palette Capture:
To use it, follow these steps:
Figure 10.31: Palette Capture using the camera
Visual and Indexed are two modes that process the camera’s visual information in two different ways.
Visual considers only the section of the image right behind the floating palette in the center while creating a palette. This gives you a more limited set of swatches, as you can point the box at a specific place that you’d like to pick colours from.
Indexed considers the full field of the camera’s view and provides palettes sampled from all parts of the visible scene.
To use it, follow these steps:
To use it, follow these steps:
Important Note
For a quicker import, simply drag and drop an image into the Palettes window to instantly create a new palette from the image.
In the next subsection, we will look at importing and sharing palettes.
Procreate saves palettes with the .swatches extension. In this section, we’ll learn about the different ways in which you can import pre-existing palettes into your workspaces, as well as how to share your colour schemes to external locations.
To import a palette, follow these steps:
Procreate palettes also support file extensions such as .ASE (Adobe® Swatch Exchange) and .ACO (Adobe® Colour).
Alternatively, you can also drag and drop a .swatches file from Files into Palettes.
To share a palette as a .swatches file, follow these steps:
Figure 10.32: Palette menu
Just like importing, you can also share a palette by dragging and dropping it into any compatible location (such as Files). Select multiple palettes to export them in bulk.
This chapter has covered all the colour tools available on Procreate. We can now summarize our knowledge.
Colours play a significant part in digital painting, and Procreate offers a range of useful tools to facilitate working with them. In this chapter, we’ve learned about the technical terms associated with colours. Then we detailed the app’s colour tools interface and gestures such as ColourDrop and SwatchDrop.
We learned about the Colours panel, which is the interface essential to working with all the different colour selection tools, namely Disc, Classic, Harmony, Value, and Palettes. This chapter discussed how each of these interfaces has a unique way of handling colour, and how to use them to suit your needs.
This chapter should help you explore digital colours further, and apply your knowledge to your own workflow.
In the next chapter, we’ll learn about the Adjustments menu, a handy set of image editing tools on Procreate.