Procreate Handbook

Version 5X


Replicate exact colors using precision sliders with Hue / Saturation / Brightness, Red / Green / Blue, and Hexadecimal numerical inputs.

Choose a Color

Some projects require precise color matching. This is where Procreate’s Value tab comes in.

1 2 3 4

On the right hand side of the top menu, you’ll see the Color Button. Tap on it to open the Color Picker, then tap the Value tab at the bottom. Procreate will remember your preference in future.

Use sliders or numerical inputs to select colours based on their HSB [Hue / Saturation / Brightness] or RGB [Red / Green / Blue] values, or enter a color’s unique Hexadecimal [Web-safe color] code to match your shade perfectly every time.


Hue / Saturation / Brightness

Using the HSB sliders, you can adjust the hue, saturation, and brightness of your chosen color.

Alternatively, you can enter exact numerical values in the text boxes provided, and the sliders will shift to match.

The Hue slider is an ‘unwrapped’ version of the circular colour wheel. Values range from 0 degrees up to 360 degrees, starting and ending on pure red, and encompassing every color on the wheel in between. You can enter a numerical value for a colour down to one decimal place.

The Saturation slider changes the intensity of your colour. This intensity is expressed as a percentage. 0% gives you zero saturation, leaving you with a colourless shade - black, white, or grey, depending on the position of the Brightness slider below. A saturation of 100% gives you the most brilliant, vibrant version of your chosen hue.

The Brightness slider adjusts the light/dark balance of your color by percentage. 0% gives you the darkest possible black, and 100% gives you the lightest possible version of your color.


Red / Green / Blue

In digital art, each color is created as a mixture of red, green, and blue.

The RGB sliders encompass a range from 0 (no color) up to 255 (the maximum possible amount of color). By mixing these amounts you can create over 16 million unique shades.

You can also manually enter numerical color values - the sliders will adjust themselves to match.

Pro Tip

Setting all three sliders to zero will give you pure black. For pure white, set all three sliders to 255. You can achieve pure red, green, or blue by setting the slider of the color you want to 255, and leaving the other two sliders set to 0. Or, create secondary shades like purple by setting two of the sliders (red and blue) to maximum, and leaving the green slider at minimum. Experimenting with RGB sliders is a great way to gain insight into digital color mixing.



These simple six-character codes are another way to express RGB colors, ideal for matching and recording colors for use on the web and in programming.

If you know the hexadecimal code of the color you want to use, type it into the Hexadecimal input box. The sliders above will adjust to match.

Alternately, as you adjust colors using RGB or HSB values, the code in the Hexadecimal input box will automatically change to match the color selected.

Pro Tip

This is a great way to share a particular shade of color with someone: send them the Hexadecimal code.


Finishing Up

The rectangles top right above the value panel display your active and secondary colors.

Once you’re happy with your chosen color, tap anywhere outside the Color Panel to close it.