Colors
Customizing Esri's Vector Basemaps: Part 2

This is the second of five Story Maps looking at methods of customizing Esri Vector Basemaps. In this section I'm going to take a look at adjusting color by working directly or indirectly with the JSON style document. I'll be using the current version of the ArcGIS Vector Tile Style Editor ('Vector Style Editor'). For all of these exercises I'm using the combined Light Gray Canvas layer as a starting point. It has a relatively small level of content, and the neutral palette makes it good for demonstrating changes.
For a fuller introduction to this and the basics of Vector Basemaps, go to Part 1
The Color Environment
The native color system for working with these maps, as with most HTML work, is HEX (Short for hexadecimal). You can learn more about this here .
If you have never worked with HEX before it can be a bit confusing, but the value can be generated very easily from RGB in most modern graphics applications. Failing that, there are a number of online resources that will make the conversion for you.
Adjusting Color Values
If you know your HEX value in advance you can add it directly. The map will reflect the change immediately. You can add an outline color to a polygon in the same way, but this will be a hairline - the width is not adjustable.

Tip: It's always useful to have a graphics program open as you work, to try out color combinations and to generate HEX values. This doesn’t need to be anything fancy. If you use Adobe Creative Suite, Corel or similar you’re in great shape, but there are plenty of simpler apps available that will do the job.
If you don't have a HEX value ready, clicking on the color bar will open a color picker:
JSON Code: Color information is held within the 'Paint' section of each item. Look for "fill-color", "line-color" or "text-color" (depending on the nature of the symbol) and adjust the HEX value. Again, remember that more than one feature may be involved. There is a 'Find and Replace' (Ctrl 'F') function available that will help you find items with the same HEX color value.
At the bottom right of the color picker is a short cut to the next option, which is also available in the sidebar:
Edit by Color
Some features may be represented by multiple items. Parks are a good example of this, with one color represented in five or more items depending on the original basemap.
The 'Edit by Color' option helps you: Choose a swatch, and it will list all of the layers containing that color. These can be all replaced at the same time.
Be careful! Most of the colors that we build are exclusive to one feature, but not all, so check the layer list to make sure that you are not changing something else unexpected. If you find something, switch it off before you make the adjustment.
Using Opacity
'Opacity' is the equivalent of 'Transparency' in ArcGIS Pro (Rather it is the reverse of 'Transparency' - the lower the 'Opacity' value, the higher the 'Transparency'). It is available on most, if not all, of your map symbols - fill, line and label.
We use it a lot on our basemaps, particularly if a symbol interacts with hillshade. Here, 'forest or park' in the Topographic Basemap is shown in green with a 0.18 degree of opacity (This is the equivalent of 82% Transparency in ArGIS Pro). Note that the actual color value applied is much darker than it appears on the map, to compensate for the opacity setting.
JSON Code: Working with code, the line item is "fill-opacity" (or "line-opacity"/"text-opacity" if relevant), in the "paint" section.
Sprites
If a pattern is indicated (no fill, and a 'Pattern' entry in the Vector Style Editor, or 'fill pattern" instead of "fill color" in the json code), then the layer uses Sprites. For more information on working with sprites, go to Part 5 of this sequence.
Stops
The 'stops' option is a way of adjusting symbols with scale. It is available for most of the symbol controls we have in the Vector Style Editor (look to the top right of the control), including color, line width, opacity and label size. Occasionally we use it with color in our basemaps - to make adjustments as more features interact with a particular symbol. The effect should be very subtle - ideally the user should not be aware of the transition.
This example is from the Accessible Basemap. Urban areas are full strength at Zoom 10 then fade out by Zoom 12 where the street pattern takes over. Note that the color changes progressively between stops, so there is no need to define Zoom 11.
JSON Code: Above Right is how the stops for this item appear in the code.
Consequences
Be warned that making one adjustment to a style can have a knock-on effect. Change one symbol, particularly color, and the probability is that the relationship with everything else in the map changes. Depending on how picky you are, you may find a simple color switch becomes a complete redesign!
Remember also that this is a multi-scale map. Not all features appear at all scales, and you will need to zoom through them all to be sure of catching everything.
There is no fixed way of managing this other than to be methodical. I usually start at small scale, then zoom in and adjust colors as I go, but you could equally start at large scale and zoom out, or you may want to adjust one feature at all scales before moving on.
In this map derived from the Light Gray Basemap, I have worked at Level 4 only:
Colors have been adjusted for land, water, boundaries and country labels, and at this scale it looks complete. But zoom in, and notice how quickly it starts to break down as other, unadjusted, features appear.
Look for urban areas, second-order administrative boundaries, and parks.
In particular notice that the subtle green used for parks on the original Light Gray Map is ineffective against these colors (they look like urban areas).
Much more work is needed!
More on Customizing Esri's Vector Basemaps
The next three parts of this in-depth look are:
If you want to review some of the introductory information,
Pt 1: Basemap Basics can be found here.
The Vector Tile Style Editor can be found here.