These are the default colors used across the ServiceNow platform. These colors are used for various UI elements, backgrounds, icons, etc. All of the colors are defined at their base as a Sass variable, such as $color-darkest. This variable is then used to color other aspects of the UI. For example, $color-darkest is used to color the titles in a header. This is achieved by defining a variable to target the header text color ($header-text-color) and assigning the $color-darkest variable to it. In the future if any changes are made to $color-darkest, those changes will be reflected by $header-text-color.
Developers are strongly encouraged to use the Sass variables for the colors instead of the hex values.
$color-darkest
$color-darker
$color-dark
$color-light
$color-lighter
$color-lightest
$color-accent
$color-accent-light
$color-black
$color-gray
$color-white
$color-white
$color-lightest
$color-black
$color-darker
$color-dark
$color-accent
$color-accent-light
Adding additional colors to an application is acceptable at times, but any colors used outside of the base palette should be used in moderation. Careful consideration should be made as to why they are being used. Red and green are examples of colors that typically have a meaning when used for a button as being a positive or negative action.
$color-positive
$color-warning
$color-negative
$color-purple
$color-purple-light
$color-purple-lighter
$color-blue
$color-blue-light
$color-blue-lighter
$color-cyan
$color-cyan-light
$color-cyan-lighter
$color-green
$color-green-light
$color-green-lighter
$color-yellow
$color-yellow-light
$color-yellow-lighter
$color-orange
$color-orange-light
$color-orange-lighter
$color-red
$color-red-light
$color-red-lighter
$color-pink
$color-pink-light
$color-pink-lighter
These colors should be used to define the series of a chart. Each series should be colored in the order listed below. The reason for maintaining this order is to keep each series as distinguishable as possible and try not to have too many similar close colors together. Teams should get their colors from the default palette. If a team needs to build a chart that follows the default palette, they must work with one of the designers to pick what colors are allowed for their specificuse case.
Chart colors should not be implemented by hard coding specific colors.
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
$color-chart
Chart Colors should be used to define the series of a chart. Chart colors should not be implemented by hard coding specific colors. The platform allows users to configure chart colors.