Color

Promote strong brand recognition by using a distinct and reduced color palette, featuring only two hues (orange and yellow) and subtle shades of gray.

The primary brand color is dcp-orange . It's the color of the "NYC" in our logo, and it can be used for large blocks of color. The slightly darker a11y-orange increases accessibility by adding more contrast, and is the default color for linked text and button backgrounds.

The secondary brand color is dcp-yellow . Use it in small amounts as an accent and for secondary UI elements. The lighter a11y-yellow increases accessibility and can be used for linked text on darker backgrounds.

Orange implies clickability in our products. Do not use orange to highlight or emphasize words.
Be sure to use the Color Contrast Checker to choose accessible colors.
Do not overuse color. Color should not cover the majority of the page.
Avoid dark UIs. Instead, keep products light and inviting, using subtle grays to create visual hierarchy—the default background color of the <body> element is off-white .

Brand colors

Grayscale colors

Avoid pure black #000 and white #fff, as text/background color combinations with too high of a contrast can decrease legibility and cause eye strain.

Data viz colors

Our data viz color palette has been optimized to increase the visual distinction of 12 hues in varying saturation and lightness, with consideration for APA's Land-Based Classification Standards. Learn more about choosing colors in the Color Accessibility section.

Red

Orange

Gold

Yellow

Chartreuse

Green

Teal

Aqua

Blue

Indigo

Purple

Fuchsia

Land Use colors

lu-peach
lu-yellow
lu-magenta
lu-red
lu-orange
lu-pink
lu-green
lu-blue
lu-lavendar
lu-silver
lu-gray

Color classes

Text colors

Use the .text-[color] classes to set the text color of an element.

<p class="text-green-dark">This whole paragraph is dark green.</p>
<p>This one is black with a <span class="text-purple">purple</span> word.</p>

This whole paragraph is dark green.

This one is black with a purple word.

Background colors

Use the .bg-[color] classes to set an element's background color and its default text color (defaulting to black or white, depending on which is more accessible). Text color classes override the default text color set by background color classes.

<p class="bg-yellow">This element has a yellow background, which defaults to black text.</p>
<p class="bg-blue-dark">This element has a dark blue background, which defaults to white text.</p>
<p class="bg-chartreuse-light text-green-dark">This element has a light chartreuse background and dark green text (which overrides its default black text).</p>

This element has a yellow background, which defaults to black text.

This element has a dark blue background, which defaults to white text.

This element has a light chartreuse background and dark green text (which overrides its default black text).

Color accessibility

For those with low vision, typographic contrast is important. In accordance with Web Content Accessibility Guidelines (WCAG) 2.0 requirements, please use the Color Contrast Checker to make sure that all text and background color combinations pass AA contrast requirements.

Do not set light type on light backgrounds
Do not set dark type on dark backgrounds
Do not relying purely on color for visual cues

This isn't readable for those with low vision.

Badges & Labels

Badges and Labels are convenient ways to add color and shape to UI elements.

The .badge class is useful for indicating out number of items. Note: Badges are not good for large numbers, as the circle stretches to an oval: 525,600

<strong aria-describedby="messageCount">Unread Messages</strong>
<span class="badge" id="messageCount">1</span>

Unread Messages 1

The .label class is a useful inline style that's useful for calling out metadata such as tags or when something was updated.

<p> Tags:
  <span class="label">cookies</span>
  <span class="label">42</span>
  <span class="label">bicycle</span>
</p>

Tags: cookies 42 bicycle

Use color classes to change the color of badges and labels. Be sure to check the contrast when choosing colors. Be mindful not to make them look clickable if they aren't — remember, orange implies clickable

<span class="badge bg-yellow-light a11y-orange">1</span>
<span class="badge bg-chartreuse-dark">2</span>
<span class="badge bg-silver black">3</span>
<span class="badge bg-fuchsia">45</span>

2 3 45

<span class="label">Updated 7/23/19</span>
<span class="label bg-chartreuse-light text-chartreuse-dark">cookies</span>
<span class="label bg-chartreuse-dark">42</span>
<span class="label bg-fuchsia">bicycle</span>

Updated 7/23/19 cookies 42 bicycle