How to Add Hex Code in Procreate
StyleFrame Team7 min read
To add a hex code in Procreate, tap the Active Color circle in the top-right corner, open the Value tab, and type the six-character code into the Hexadecimal field. Confirm with Done (or Return), and the color updates in the sliders and the New Color swatch. Tap an empty slot in a palette to save it. If the field won't accept input, you are usually in the floating Color Companion, which doesn't allow hex editing, or you need to scroll the panel on a smaller iPad.
Step-by-step: enter a hex code in Procreate
Procreate keeps exact color entry in the Value tab of the Color panel. Once you've opened it, Procreate remembers that tab for next time.
- Open the Color panel. Tap the colored circle (Active Color) at the right end of the top bar.
- Switch to Value. Tap the Value tab at the bottom of the panel. You'll see HSB sliders, RGB sliders, and the Hexadecimal field.
- Tap the Hexadecimal field. Clear the existing value with backspace.
- Type or paste the code. Enter the six characters, for example
FF5A36. Press and hold the field to bring up Copy and Paste if the code is already on your clipboard. - Confirm. Tap Done or Return. The HSB and RGB sliders jump to match, and the new color appears in the swatch next to your current color.
- Start painting. Close the panel and the color is active on your brush.
The hex field is simply another view of the RGB values. If you nudge any slider afterward, the hex code rewrites itself to match, so you can also use the field to read a color you've mixed by eye.
Save the hex color to a palette
Typing a code each time is slow, so store brand colors in a palette.
- Open the Color panel and switch to the Palette tab.
- Create a new palette with the plus icon, or select an existing one.
- Enter your hex code in the Value tab as above.
- Return to the Palette tab and tap an empty swatch. The active color is saved there.
Repeat for each color in your set. For a brand or project palette, rename the palette so you can find it later and keep the swatches in a consistent order, such as primary, secondary, accent, background, text. Some designers keep illustration or pattern palettes small, around three to five colors.
Troubleshooting: when the hex field won't work
The causes of hex entry problems are usually simple.
You can't edit the field at all
The floating Color Companion shows hex values but doesn't let you edit them. Use the standard Color panel from the Active Color circle instead. Tap the circle, not the floating window.
You can't see the field
On smaller iPads, the Value tab scrolls. If you see sliders but no hex box, swipe up within the panel to reveal the Hexadecimal input. Larger iPad Pro models often show the whole panel without scrolling.
The color reverts after you press Done
Older versions of Procreate could reject input that included the # symbol. If your code snaps back to the previous color, retype it with only the six characters (000000, not #000000). Procreate will display the hash itself afterward. Newer versions tend to tolerate the hash, but pressing Return or Done is still what commits the value. If the problem persists, update Procreate and restart the iPad.
The code isn't six characters
Some design tools show three-character shorthand (#F80) or eight-character codes with alpha (#FF8800CC). Expand shorthand to six characters (FF8800) and drop the alpha pair, since Procreate's hex field only describes the color. Handle opacity with layer or brush settings instead.
The color looks different from the source
Typing the correct hex doesn't guarantee it looks identical everywhere. See the color management section below.
Read a hex code back out of Procreate
Sometimes you need the opposite: you painted a color you like and need its code for After Effects or a client brief.
- Use the Eyedropper (hold a finger on the canvas, or use the Eyedropper tool) to sample the color.
- Open the Color panel and the Value tab. The Hexadecimal field now shows the sampled color's code.
- Press and hold the field and choose Copy, then paste it into a note, message, or your project file.
Sharing a six-character code is more reliable than describing a color or sending a screenshot, because a screenshot can pick up display and compression differences.
Other ways to build a palette in Procreate
You don't always start with a hex code. Procreate offers several ways to arrive at exact colors.
- Color Harmony. In the Color panel, the Harmony tab suggests complementary and other color relationships based on a starting color. Add the results to a palette, then read the hex values off the Value tab.
- Palette from a photo. Import a reference image to a canvas, hold a finger on an area to sample it, and tap a palette slot to save it. This works well for pulling colors from a client mood board or a frame grab.
- Palette generators. Sites such as Coolors give you lists of hex codes you can type into Procreate one by one. They are useful when you want quick suggestions and then lock in exact values.
Keeping hex values consistent with After Effects
For motion work, the Procreate canvas is rarely the final destination. Artwork travels to After Effects, Premiere Pro, Cinema 4D, Blender, or Nuke, and a hex code can mean slightly different things depending on color management.
- Check your color settings. If the Procreate canvas and your compositing project use different color profiles or working spaces, the same numbers can look different.
- Verify in the comp. Sample the imported artwork with the eyedropper in your compositing app, and compare the sampled hex with your brand value.
- Export deliberately. Export an image file rather than a flattened screenshot.
- Spot-check at the end. Sample a few flat color areas in the comp. If the hex is off, fix the color settings rather than correcting by eye.
Hex is also a convenient way to move colors between tools, since you can copy a code from one app and type it into another without reinterpreting from sliders.
Where Procreate palettes fit in an AI-assisted motion workflow
Exact hex colors matter most when a look has to survive into animation. A common pattern is to design a styleframe or character sheet in Procreate with a locked palette, then move that look into motion.
This is where can sit beside Procreate. Styleframe is an AI video and motion tool, and the palette you built in Procreate can serve as a visual anchor for the references you bring into it.
A practical flow looks like this:
- Paint your key frames in Procreate using your saved hex palette.
- Bring those frames into your motion tool as references or keyframes, so the motion is guided by the looks you designed.
- Bring the results into your existing pipeline, where your compositing, color grading, and delivery steps stay as they are.
One caveat: any generative or style-transfer process can shift colors. Treat your hex palette as the target, sample the result in your compositing app, and correct with your usual tools, such as a color match or a Hue/Saturation adjustment, where needed. Procreate's role is to define the colors, and the compositor's role is to verify them.
Quick FAQ
Does Procreate accept hex codes with the # symbol? Newer versions generally do, but some older versions rejected it. If entry fails, type only the six characters and press Done.
Can I type hex codes in the Color Companion? No. The Color Companion displays the value but doesn't allow editing. Use the main Color panel's Value tab.
Why can't I see the Hexadecimal box? On smaller iPads, scroll down inside the Value tab to reveal it.
How do I save a hex color permanently? Enter the code, then tap an empty swatch in a palette. The color stays in that palette until you remove it.
How do I find the hex of a color I've already painted? Sample it with the Eyedropper, then open the Value tab and read the Hexadecimal field.
Do hex values look identical in After Effects? Only if the color profile and project color management agree. Sample the imported file in After Effects to confirm.