Skip to main content

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.

What is a look-up table (LUT)?

A LUT is an image file that maps color adjustments to specific values, allowing you to change the colors and tones of your map. By editing the LUT, you can create a unique color theme for your map style.

Note that the color theme will apply to the entirety of the map like a filter, including under different light presets. Think of this as an efficient way to adjust the entire map’s look and feel, as opposed to modifying the colors of individual layers or features.

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.
arrow-downDownload PNG

Step 1: 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

Step 2: 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.
Tips

Here are some examples of adjustments you could try:

  • Hue/Saturation: Change the color palette by adjusting the hue, saturation, or lightness of specific color ranges. For example, shift blues to teals for a more modern aesthetic.
  • Color Balance: Adjust the mix of red, green, and blue tones to give the map a warmer or cooler feel.
  • Brightness/Contrast: Enhance visibility by increasing contrast or create a subdued effect by reducing brightness and contrast.
  • Vibrance: Boost the intensity of muted colors without exaggerating already bright areas.
  • Desaturation: Create a grayscale or muted effect for a classic or vintage appearance.

Step 3: 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.
  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.

Step 4: 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.

Step 4: 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.
To learn more about publishing

Take a look at the Publish style section of the Mapbox Studio Manual to find out more information about publishing with Mapbox Studio.

What's Next?

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

Was this page helpful?