Create a custom color theme for Mapbox Standard

This tutorial walks you through creating and applying a custom color theme to the Mapbox Standard style in Studio. By the end, you’ll have transformed the look and feel of your map style using a “Look-up Table” (LUT) created in Photoshop or a similar graphic editor.

Prerequisites​

You’ll need the following to complete this tutorial:

• Mapbox account. Sign up for a free account on Mapbox.
• Graphic editing software. Use Photoshop, GIMP, or another editor to make adjustments.
• A default “look-up table” file. Download the neutral.png file using the button below. This file serves as the default LUT.

Create a new style and capture screenshots​

These screenshots will serve as the basis for applying adjustments in a graphic editor.

1. Log in to your Mapbox account and go to the Styles page.
2. Click the New style button.
3. Move the map to areas you want to experiment with and take screenshots at different zoom levels.
   • You’ll use these screenshots to test the color adjustments that affect the entire map, so select areas that are of particular importance to your use case.
   • You can also take screenshots with different light presets to compare how the color theme alters the style under different light conditions

Determine your color and tonal adjustments​

Now, you’ll work in a graphic editor to experiment with different adjustment layers on top of your screenshots to see how those modifications affect the map.

1. Open the screenshots you created earlier and combine them into a single file in your graphic editor.
2. Apply your desired adjustments, such as color grading or brightness changes, using adjustment layers.
   • If using Photoshop, you can find these options under Layer > New Adjustment Layer.

Apply adjustments to the neutral.png LUT​

Next, check that your data has loaded correctly by following these steps:

1. Open the neutral.png file in your graphic editor.

If you haven't already, download neutral.png by clicking the download button:

2. Apply the same adjustments you made to the map screenshots.
   • If using Photoshop, you can copy and paste adjustment layers between files.
3. Save the edited LUT as a new file, such as custom-theme.png.

Apply your custom LUT to a style​

Let's return to Mapbox Studio in the browser.

1. In the bottom left corner of the style editor, click on the Standard basemap dropdown in the Imports section.
2. Under Color, click on the Color theme dropdown, select Custom and upload your new custom-theme.png LUT file
3. Check how the new color theme affects the map style. Make additional changes in Step 3 as needed to achieve your desired look and feel.

Publish your changes​

When you have finished editing your new map style, you will publish your changes, so you can use them with other mapbox products, such as Mapbox GL JS, the Mapbox Mobile SDKs, etc.

1. Click the Publish button in the upper right side of the screen to open the publishing menu.
   • When you click the publish button, a window will display the original style (or the previous version) and current version containing the edits you made in a side by side comparison.
2. If you're happy with the edits you made, click the Publish button at the bottom of the window.
3. Click the okay button.
4. If you'd like to share your map, click the Share button in the top toolbar to see all the share options.
   • Your style will now be available to share from a variety of tools and applications.

What's Next?​

Congratulations, you’ve applied a custom color theme! Experiment with additional adjustments to create unique map designs and refine your style.

What we covered​

Related learning​

You might also be interested in:

• Learning more about Map design and styles in our dive deeper guide.
• Creating a custom style tutorial.
• Learning how to add 3D buildings to a map by following our 3D buildings tutorial.
• Learning how to add precipitation to the map with our snow and rain examples.