Attribute-driven color in symbology

You can customize feature symbols by leveraging data attributes as symbol property values. When you work with color properties in symbols, there are some additional considerations because there are many ways to dynamically define colors.

When customizing a color property, you must supply a string field or an Arcade expression that returns a string. The string must conform to color definitions as outlined in the CSS Color Module Level 3 specification or any color model that is supported in ArcGIS AllSource.

See the following syntax guidelines for each color model:

• #RGB, #RRGGBB, #RRGGBBAA
• rgb(r, g, b), rgba(r, g, b, a)
  • Use decimal values between 0 and 255 for the red (R), green (G), and blue (B) values.
  • Use a decimal value between 0 and 1 for the alpha (A) value.
• rgb(r%, g%, b%), rgba(r%, g%, b%, a)
  • Use decimal values between 0 and 255 for the red (R), green (G), and blue (B) values.
  • Use a decimal value between 0 and 1 for the alpha (A) value.
  • If the % sign is not present, the number will be interpreted as the color value.
• hsl(h, s%, l%), hsla(h, s%, l%, a)
  • Use decimal values between 0 and 360 for hue (H) values.
  • Use decimal values between 0 and 100 for the saturation (S) and lightness (L) values.
  • The % sign is not required in most situations. However, when you author vector tiles, you must use the % sign to match the color seen in the feature layer. In vector tiles, the value is interpolated between 0 and 1, so when the % sign is missing, values greater than or equal to 1 are treated as 100%.
• hsv(h, s%, v%), hsva(h, s%, v%, a)
  • Use decimal values between 0 and 360 for hue (H) values.
  • Use decimal values between 0 and 100 for the saturation (S) and value (V) values.
  • The % sign is not required.
• cmyk(c, m, y, k), cmyka(c, m, y, k, a)
  • Use decimal values between 0 and 100 for the cyan (C), magenta (M), yellow (Y), and black (K) values.
  • Use a decimal value between 0 and 1 for the alpha (A) value.
  • The % sign is not required.
• Lab(l, a, b), Laba(l, a, b, a)
  • Use decimal values between 0 and 100 for the lightness (L) value.
  • Use decimal values between -128 and 127 for the green-red (a) and blue-yellow (b) values.
  • Use a decimal value between 0 and 1 for the alpha (a) value.
• Gray(g), Graya(g, a), Grey(g), Greya(g, a)
  • Use decimal values between 0 and 255 for the gray (g) value.
  • Use decimal values between 0 and 255 for the red (R), green (G), and blue (B) values.
• Named web colors
  • Defined as color keywords as specified by the extended color keyword specification.

Transparency values must be converted to opacity values and specified as the alpha value in the color definition. For example, to obtain 40% transparency, set the alpha value to 0.6.

Values are not case sensitive, but they must be comma delimited. Values that are out of range are substituted with the nearest color values. For example, rgb(265, 55, -1) is interpreted as rgb(255, 55, 0). An exception to this is when a color model calls for a hue component. Hue is measured in degrees and has no bounds. Values above 360 degrees or below 0 degrees are interpreted by their relative position on the color wheel. For example, hue of -5° is interpreted as 355°. Null values or values that have an invalid color syntax are not rendered. The symbol property is colored based on the default color specified in the symbol.