Color

The Opattern color palette is simple, adaptable, and easy on the eyes.

The default Opattern color palette is designed to:

  • Make sense: We want our colors to fit common user interface models and cultural mental models. In other words, it’s for humans.
  • Be seen: Colors need to be accessible to visually impaired readers (we use AA standard contrast ratios).
  • Stand out: We use color to add visual appeal and differentiate content.

Primary color

The primary color is the dominant color in our palette. Sometimes, we call this the “you color,” because it represents the user.

Click here!

Clickable elements, like text links, use the primary color to signal interactivity.

Use the primary color for data points that represent the user (it’s the “you” color).

1
2
3
4

We also use the primary color to highlight active items.

Have a single button? Use the primary color to invite users to take an action.

If using a set of buttons, make one stand out as the preferred action with the primary color.

Elements that are selectable, like radio and checkbox inputs, inherit the primary color.

Success color

We want to create a strong association between energy efficiency and success or achievement. To do this, we use the success color for efficient behaviors and actions.

In a chart, the success color represents efficiency.

Use the success color in illustrations to add contrast or draw attention to the main element.

The success color can represent activity, progress, or completed actions

Alert color

The alert color is loud, alarming, and attention-getting, so we use it infrequently. The alert color is useful for calling attention to an error or problem or to represent concepts like inefficiency, high costs, or unexpected situations.

Avoid using the alert color in situations when the user isn’t responsible for the situation, or has no control over the issue.

The alert color draws attention to a problem.

In charts, the alert color draws emphasis to unusual or undesirable data points.

Alert message

The alert color can also tell the user about a mistake or invalid input.

Text color

To maximize legibility and meet accessibility standards, we use a high contrast ratio so text stands out from background colors. Always use colors that are accessible to visually impaired users, as shown here.

$white / $primary-color
$darkest-gray / $success-color
$white / $alert-color
$darkest-gray / $primary-color-light
$darkest-gray / $success-color-light
$darkest-gray / $alert-color-light

Color reference

Color Variable Hex RGB CMYK
$primary-color #107CB2 0,125,193 85,45,0,0
$primary-color-light 30% of $primary-color
$primary-color-lighter 20% of $primary-color
$success-color #8DC63F 141,198,63 50,0,100,0
$success-color-light 30% of $success-color
$success-color-lighter 20% of $success-color
$alert-color #F15A29 241,90,41 0,80,95,0
$alert-color-light 30% of $alert-color
$alert-color-lighter 20% of $alert-color
$weather-color #990099 153,0,153 60,100,0,0
$attention-color #f9e500 249,229,0 10,20,100,0
$darkest-gray #1D1D1D 29,29,29 0,0,0,70
$dark-gray #666666 102,102,102 0,0,0,60
$medium-gray #C1C1C1 193,193,193 0,0,0,40
$light-gray #E1E1E1 225,225,225 0,0,0,20
$lightest-gray #F1F1F1 241,241,241 0,0,0,10