Choose a color
When designing a theme or creating content with ArcGIS StoryMaps, you often need to choose a color for a text, a background area, a chart element, map symbols, a button, or another visual element. The color picker helps you quickly choose colors in the ArcGIS StoryMaps builders and verify that your selection meets color contrast guidelines for accessibility.
You can select a color by choosing a color swatch or a custom color.
Choose a color swatch
The color picker include sets of color swatches to select a color. Color sets may include the following:
To choose a color, click one of the colors on the Swatches tab and close the color picker.
Theme colors
Colors from the current theme are presented in the Theme colors section of the color picker.
Important:
When you select a swatch from the theme color set, you are not selecting a specific color; rather, you are selecting a named color from the theme (for example, accent color 1 or heading color). If you later change the theme, the color will change to the color that occupies that named color's position in the new theme.
Theme colors appear in the following order:
Accent color 1
Accent color 2
Accent color 3
Heading text color
Paragraph text color
Caption text color
Background color
For more information about theme colors, see Create and configure a theme and Theme reference.
Basic colors
In theme builder, you may see a Basic colors set with light, medium, and dark tones for each main hue from the color spectrum. Colors from this set can be used across a wide range of text, background, and accent colors.
Color palettes
In places such as the chart editor and the categorized map tour symbol color selector, you will see a Color palettes section with one or more sets of color from the Esri color ramps. These palettes facilitate choosing sets of contrasting colors that work well together.
Recent colors
Custom colors you have used during your current browser tab session are saved in the Recent colors section of the color picker.
Choose a custom color
To choose a custom color, click the Custom tab and use one of the following methods:
Use the color field and spectrum.
Move the knob to the desired location in the color field.
Move the second knob to the desired location on the hue spectrum.
Use a hex code.
- Paste or type a hex code into the color input field.
Use the eyedropper tool.
- Click the eyedropper tool and click a color anywhere on your screen.
Important:
The eyedropper is not supported on all browsers.
Understand color contrast requirements
The color picker provides feedback about whether your selected color meets standard color contrast guidelines.
At the top of the color picker, a feedback box reports whether the selected color makes text legible in relation to other colors around it. Expand the contrast checker to see which colors are being compared and view the calculated contrast ratios.
For more information, see Color choices.
Caution:
The contrast checker is unavailable when the background color is not a solid color, such as when text is placed directly over an image or gradient. In these cases, you must independently verify that the selected color meets contrast guidelines.