Static editor · Change color · 1 min read

Recolor the background

Match the backdrop of your mockup to your brand with a hex color, and reset it with one click.

Open Change color

With your mockup open in Static, look at the Change color section in the right panel. It has one row for each color you can edit. In this scene, the row is the background and reads E4E4E4.

The Change color section with a gray swatch and the hex value E4E4E4The Change color section with a gray swatch and the hex value E4E4E4
The swatch shows the current background color.

Click the swatch

Click the color swatch. The picker opens with Solid selected, a color field, a hue slider, an opacity slider, an eyedropper, a hex field and an opacity percentage.

The color picker with the Solid option, hue slider, eyedropper, hex field E4E4E4 and 100 percent opacityThe color picker with the Solid option, hue slider, eyedropper, hex field E4E4E4 and 100 percent opacity
The picker opens next to the panel.

Enter your hex color

Click the hex field, type your brand color, for example F2C4B8, and press Enter. The background changes right away. You can also drag in the color field or use the eyedropper.

The picker with the hex F2C4B8 and a pink background behind the laptopThe picker with the hex F2C4B8 and a pink background behind the laptop
The canvas follows the picker as you type.

Review the result

Click outside the picker to close it. The row now shows your color, and a reset icon appears next to the Change color title.

The full editor with a pink background and the reset icon next to Change colorThe full editor with a pink background and the reset icon next to Change color
The whole scene now sits on your color.

Reset the color

Not happy with it? Click the reset icon next to the Change color title. The row goes back to E4E4E4.

The Change color section back at the gray E4E4E4 swatchThe Change color section back at the gray E4E4E4 swatch
One click restores the original background.

Questions

How do I set an exact brand color?

Click the color swatch, click the hex field, type your color, for example F2C4B8, and press Enter. The background changes right away.

Are there other ways to pick a color?

Yes. You can drag in the color field or use the eyedropper in the picker.

Can I make the color see-through?

Yes. The field next to the hex value sets the opacity of the color.

How do I go back to the original background?

Click the reset icon next to the Change color title. The row goes back to its original color, E4E4E4 in this scene.

Try it in the Static mockup editor

Photo mockups in the browser: drop a design in, export a picture.

Open editor