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.
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).
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.
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 | 16,124,178 | 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 | #D8400F | 216,64,15 | 0/70/93/15 | |
$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/8 | |
