Skip to main content

Color

The diversity of color and the range of saturations is a reflection of the contrasts that make San Francisco a unique place. The color palette is a useful tool that helps construct an experience that is both accessible and distinctly San Francisco.

Primary colors

These are the primary brand colors, often used for backgrounds or for general content. Blue does not have an L3 because there are a variety of different blues in use. Black is a very dark gray to subtly soften the extreme contrast.

Primary color palette

Text colors

Text is typically:

  • Slate L4 #002B48 for most body text and headlines
  • Slate L2 #5A7A92 for additional information or subheads
  • White #fff for most body text and headlines on darker fields; contrast permitting.

Action color

Use Action blue #495ED4 for most links, buttons, and other actionable UI (such as accordions and form elements).

Secondary colors

The broader secondary palette is used for highlighting and differentiating content:

  • Use L1 and L2 for blocks separating content areas.
  • The L3 color is the base shade of each color. Use it for focusing attention, such as on a header.
  • Use L4 sparingly for hover states or when a darker color must contrast with the L3 color.

Secondary color palette

Depending on contrast ratios, different colors are recommended for plain text and for links on each background color.

Text​

Most text is either Slate L4 #002B48 or White #fff, depending on the background color. On white backgrounds, Slate L2 #5A7A92 can also be used for creating hierarchy or denoting inactive text elements.

Action blue is used for links on White or L1 colors. On darker colors, Action Blue #495ED4 has insufficient contrast and only Slate L4 #002B48 or White #fff is available to use. Because this has no differentiation between link and plain text color, it is especially important to underline the link text.

Contrast ratios

WCAG 2 requires a color ratio of 3:1 or higher for AA and 4.5:1 for AAA for large text.

We strive for a contrast ratio of 7:1 or higher. Except for where noted, the recommended combinations achieve this goal.

Text on L3 backgrounds​

While our recommended text colors on L3 shades have contrast ratios ranging from 4.53:1 to 16.16:1, we recommend avoiding body copy on L3 backgrounds. Large headlines and other bold text are acceptable as the size and thickness will increase readability.

The Action blue link color passes WCAG 2 requirements for 4.51 for AA large text, and in large text cases also passes AAA.

Action Blue #495ED4 on L2 backgrounds passes WCAG 2 AA large text requirements. However it is just barely passing, and we do not recommend using it. In this case, it is better to use Slate (which meets our goal of 7:1) and distinguish links using an underline.

Colors for charts and maps

Our palette for maps and charts was created and tested to work best when combined to display data.

It is recommended that you stick to using these colors when displaying data in the many inventive and exciting ways you can do and not in general interface settings. Try to stick with the colors from the primary palette for that.

This palette was tested for contrast compliance and support across a range of color vision abilities.

Note: "Charts and Maps" is a general catch-all phrase for times when data is displayed graphically.

Qualitative​

The qualitative color palette could also be considered the primary color palette for charts and maps. More specifically, the qualitative palette is best used for instances where the data is about comparing categories. (e.x. Adoption rates of dogs, cats, and iguanas placed on a line chart.) The first two colors, dark blue and orange, are the preferred color palette for the polygons/shapes in two-color data projects. The four remaining colors can be used when a more extensive palette is needed, and they are in no particular order of preference.

Qualitative color palette

Sequential​

Creating a visualization where the data is numeric and goes from low to high is where the sequential palette shines. An excellent example of the use of the sequential palette would be to show population density.

Keep in mind that color has meaning, so when assigning the colors at either end of the palette, make sure that the values that they represent make sense. Using a bluer color for the cold end of a temperature range and the yellow-ish color at the warmer end of the temperature range would be an example of this.

The sequential palettes should always be used together and not individually in other settings.

Sequential color palette

Divergent​

When the numeric variable has a meaningful central value, like zero, then you can use the diverging palette.

Divergent color palette

Label colors​

Colors for use when labeling the charts and maps are the two listed. The darker of the two, Black #212123, will be the primary color for use when display text, titles, labels, etc. Reserve the lighter Secondary text color #59595c for secondary information.

Label color palette

Usage​

Here we will have examples of color for charts and map usage.