Color palette
OUDS Web’s color palette is the summary of all the existing and useable colors.
On this page
Palette
This section exposes all the existing colors inside the OUDS Web palette. These variables aren’t meant to be used, it’s only an exposure of the available raw colors. Be aware that none of the variables presented here depend on the theme.
#a885d8$core-ouds-color-functional-amethyst-400
#5b2f98$core-ouds-color-functional-amethyst-600
#000$core-ouds-color-functional-black
#fff$core-ouds-color-functional-white
#f0faff$core-ouds-color-functional-dodger-blue-100
#bde7ff$core-ouds-color-functional-dodger-blue-200
#8ad5ff$core-ouds-color-functional-dodger-blue-300
#57c3ff$core-ouds-color-functional-dodger-blue-400
#26b2ff$core-ouds-color-functional-dodger-blue-500
#009bf0$core-ouds-color-functional-dodger-blue-600
#007abd$core-ouds-color-functional-dodger-blue-700
#00598a$core-ouds-color-functional-dodger-blue-800
#003857$core-ouds-color-functional-dodger-blue-900
#7a7a7a$core-ouds-color-functional-gray-dark-80
#707070$core-ouds-color-functional-gray-dark-160
#666$core-ouds-color-functional-gray-dark-240
#5c5c5c$core-ouds-color-functional-gray-dark-320
#555$core-ouds-color-functional-gray-dark-400
#444$core-ouds-color-functional-gray-dark-480
#3d3d3d$core-ouds-color-functional-gray-dark-560
#333$core-ouds-color-functional-gray-dark-640
#272727$core-ouds-color-functional-gray-dark-720
#1f1f1f$core-ouds-color-functional-gray-dark-800
#141414$core-ouds-color-functional-gray-dark-880
#0a0a0a$core-ouds-color-functional-gray-dark-960
#f4f4f4$core-ouds-color-functional-gray-light-80
#eee$core-ouds-color-functional-gray-light-160
#e0e0e0$core-ouds-color-functional-gray-light-240
#d6d6d6$core-ouds-color-functional-gray-light-320
#ccc$core-ouds-color-functional-gray-light-400
#c2c2c2$core-ouds-color-functional-gray-light-480
#bbb$core-ouds-color-functional-gray-light-560
#adadad$core-ouds-color-functional-gray-light-640
#a3a3a3$core-ouds-color-functional-gray-light-720
#999$core-ouds-color-functional-gray-light-800
#8f8f8f$core-ouds-color-functional-gray-light-880
#858585$core-ouds-color-functional-gray-light-960
#edfcf0$core-ouds-color-functional-malachite-100
#c1f6ca$core-ouds-color-functional-malachite-200
#94f0a4$core-ouds-color-functional-malachite-300
#67e97e$core-ouds-color-functional-malachite-400
#3de35a$core-ouds-color-functional-malachite-500
#1ecd3c$core-ouds-color-functional-malachite-600
#17a02f$core-ouds-color-functional-malachite-700
#0e621d$core-ouds-color-functional-malachite-800
#0a4715$core-ouds-color-functional-malachite-900
#ffe5e6$core-ouds-color-functional-scarlet-100
#ffb2b3$core-ouds-color-functional-scarlet-200
#ff8081$core-ouds-color-functional-scarlet-300
#ff4d4e$core-ouds-color-functional-scarlet-400
#ff1a1b$core-ouds-color-functional-scarlet-500
#db0002$core-ouds-color-functional-scarlet-600
#b20002$core-ouds-color-functional-scarlet-700
#800001$core-ouds-color-functional-scarlet-800
#4d0001$core-ouds-color-functional-scarlet-900
#fff7d6$core-ouds-color-functional-sun-100
#ffed99$core-ouds-color-functional-sun-200
#ffe270$core-ouds-color-functional-sun-300
#ffd73d$core-ouds-color-functional-sun-400
#ffd000$core-ouds-color-functional-sun-500
#d6aa00$core-ouds-color-functional-sun-600
#a38200$core-ouds-color-functional-sun-700
#665100$core-ouds-color-functional-sun-800
#3d3100$core-ouds-color-functional-sun-900
rgba(0, 0, 0, 0)$core-ouds-color-opacity-black-0
rgba(0, 0, 0, 0.04)$core-ouds-color-opacity-black-40
rgba(0, 0, 0, 0.08)$core-ouds-color-opacity-black-80
rgba(0, 0, 0, 0.12)$core-ouds-color-opacity-black-120
rgba(0, 0, 0, 0.16)$core-ouds-color-opacity-black-160
rgba(0, 0, 0, 0.2)$core-ouds-color-opacity-black-200
rgba(0, 0, 0, 0.24)$core-ouds-color-opacity-black-240
rgba(0, 0, 0, 0.28)$core-ouds-color-opacity-black-280
rgba(0, 0, 0, 0.32)$core-ouds-color-opacity-black-320
rgba(0, 0, 0, 0.36)$core-ouds-color-opacity-black-360
rgba(0, 0, 0, 0.4)$core-ouds-color-opacity-black-400
rgba(0, 0, 0, 0.44)$core-ouds-color-opacity-black-440
rgba(0, 0, 0, 0.48)$core-ouds-color-opacity-black-480
rgba(0, 0, 0, 0.52)$core-ouds-color-opacity-black-520
rgba(0, 0, 0, 0.56)$core-ouds-color-opacity-black-560
rgba(0, 0, 0, 0.6)$core-ouds-color-opacity-black-600
rgba(0, 0, 0, 0.64)$core-ouds-color-opacity-black-640
rgba(0, 0, 0, 0.68)$core-ouds-color-opacity-black-680
rgba(0, 0, 0, 0.72)$core-ouds-color-opacity-black-720
rgba(0, 0, 0, 0.76)$core-ouds-color-opacity-black-760
rgba(0, 0, 0, 0.8)$core-ouds-color-opacity-black-800
rgba(0, 0, 0, 0.84)$core-ouds-color-opacity-black-840
rgba(0, 0, 0, 0.88)$core-ouds-color-opacity-black-880
rgba(0, 0, 0, 0.92)$core-ouds-color-opacity-black-920
rgba(0, 0, 0, 0.96)$core-ouds-color-opacity-black-960
rgba(38, 178, 255, 0.08)$core-ouds-color-opacity-dodger-blue
rgba(61, 227, 90, 0.12)$core-ouds-color-opacity-malachite
rgba(234, 3, 5, 0.08)$core-ouds-color-opacity-scarlet
rgba(255, 208, 0, 0.16)$core-ouds-color-opacity-sun
rgba(213, 32, 78, 0.1)$core-sosh-color-opacity-magenta
rgba(255, 255, 255, 0)$core-ouds-color-opacity-white-0
rgba(255, 255, 255, 0.04)$core-ouds-color-opacity-white-40
rgba(255, 255, 255, 0.08)$core-ouds-color-opacity-white-80
rgba(255, 255, 255, 0.12)$core-ouds-color-opacity-white-120
rgba(255, 255, 255, 0.16)$core-ouds-color-opacity-white-160
rgba(255, 255, 255, 0.2)$core-ouds-color-opacity-white-200
rgba(255, 255, 255, 0.24)$core-ouds-color-opacity-white-240
rgba(255, 255, 255, 0.28)$core-ouds-color-opacity-white-280
rgba(255, 255, 255, 0.32)$core-ouds-color-opacity-white-320
rgba(255, 255, 255, 0.36)$core-ouds-color-opacity-white-360
rgba(255, 255, 255, 0.4)$core-ouds-color-opacity-white-400
rgba(255, 255, 255, 0.44)$core-ouds-color-opacity-white-440
rgba(255, 255, 255, 0.48)$core-ouds-color-opacity-white-480
rgba(255, 255, 255, 0.52)$core-ouds-color-opacity-white-520
rgba(255, 255, 255, 0.56)$core-ouds-color-opacity-white-560
rgba(255, 255, 255, 0.6)$core-ouds-color-opacity-white-600
rgba(255, 255, 255, 0.64)$core-ouds-color-opacity-white-640
rgba(255, 255, 255, 0.68)$core-ouds-color-opacity-white-680
rgba(255, 255, 255, 0.72)$core-ouds-color-opacity-white-720
rgba(255, 255, 255, 0.76)$core-ouds-color-opacity-white-760
rgba(255, 255, 255, 0.8)$core-ouds-color-opacity-white-800
rgba(255, 255, 255, 0.84)$core-ouds-color-opacity-white-840
rgba(255, 255, 255, 0.88)$core-ouds-color-opacity-white-880
rgba(255, 255, 255, 0.92)$core-ouds-color-opacity-white-920
rgba(255, 255, 255, 0.96)$core-ouds-color-opacity-white-960
#33b1c1$core-sosh-color-blue-duck-dark-80
#2fa3b1$core-sosh-color-blue-duck-dark-160
#2b94a1$core-sosh-color-blue-duck-dark-240
#26828e$core-sosh-color-blue-duck-dark-320
#247a85$core-sosh-color-blue-duck-dark-400
#1e6771$core-sosh-color-blue-duck-dark-480
#1a5961$core-sosh-color-blue-duck-dark-560
#154a51$core-sosh-color-blue-duck-dark-640
#113b40$core-sosh-color-blue-duck-dark-720
#0e2f34$core-sosh-color-blue-duck-dark-800
#0b2428$core-sosh-color-blue-duck-dark-880
#061618$core-sosh-color-blue-duck-dark-960
#f0f7fa$core-sosh-color-blue-duck-light-80
#dff4f6$core-sosh-color-blue-duck-light-160
#cfeef2$core-sosh-color-blue-duck-light-240
#bfe8ee$core-sosh-color-blue-duck-light-320
#aee3ea$core-sosh-color-blue-duck-light-400
#9edde5$core-sosh-color-blue-duck-light-480
#8ed8e1$core-sosh-color-blue-duck-light-560
#7ed2dd$core-sosh-color-blue-duck-light-640
#6eccd8$core-sosh-color-blue-duck-light-720
#5ec7d4$core-sosh-color-blue-duck-light-800
#4ec1d0$core-sosh-color-blue-duck-light-880
#3ebbcc$core-sosh-color-blue-duck-light-960
#f6f5ee$core-sosh-color-citrine-50
#fff6cc$core-sosh-color-citrine-100
#ffec99$core-sosh-color-citrine-200
#ffe366$core-sosh-color-citrine-300
#ffd92e$core-sosh-color-citrine-400
#fbcd00$core-sosh-color-citrine-500
#c7a200$core-sosh-color-citrine-600
#997d00$core-sosh-color-citrine-700
#665300$core-sosh-color-citrine-800
#332a00$core-sosh-color-citrine-900
#241d00$core-sosh-color-citrine-950
#191500$core-sosh-color-citrine-1000
#fce9ee$core-sosh-color-magenta-50
#f8d3dc$core-sosh-color-magenta-100
#f2a6b9$core-sosh-color-magenta-200
#eb7a96$core-sosh-color-magenta-300
#e55277$core-sosh-color-magenta-400
#d5204e$core-sosh-color-magenta-500
#b61b42$core-sosh-color-magenta-600
#851430$core-sosh-color-magenta-700
#590d20$core-sosh-color-magenta-800
#2c0710$core-sosh-color-magenta-900
#160308$core-sosh-color-magenta-950
Bootstrap’s palette
Bootstrap defines a color palette on its own. We worked on a mapping between Orange Unified Design System’s colors and Bootstrap’s ones in cases where users will use Bootstrap-based plugins or libraries so that, when used with OUDS Web CSS, provides an acceptable automatic rendering.
You’re encouraged to use Orange semantic color tokens (using CSS variables is even better) when it comes to custom code.
Bootstrap
$enable-bootstrap-compatibility: true
This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more
about Bootstrap compatibility.
All colors
Some of the colors below do not belong to the Orange Unified Design System specifications.
Please refer to our color palette section and to the Color guidelines on the Orange Unified Design System website.
All OUDS Web colors are available as Sass variables and a Sass map in scss/_variables.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.
Please note that in the OUDS Web colors, the indigo colors are the same as the purple ones.
Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
blue#26b2ff
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
indigo#a885d8
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
purple#a885d8
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
pink#ffb4e6
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
red#db0002
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
orange#f15e00
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
yellow#ffd000
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
green#3de35a
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
teal#50be87
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
cyan#4ab4e6
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
$gray-500 #555
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$black #000
$white #fff
Notes on Sass
Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We then map all the created variables to one of our raw color tokens that are coming from the design directly.
Example
Here’s how you should use these in your Sass:
.alpha { color: var(--bs-color-action-visited); } // And not `$ouds-color-decorative-amethyst-600` or `$ouds-color-action-visited-light` directly
.beta {
color: $ouds-color-decorative-sun-100; // Because we don’t have any CSS variable but prefer avoid the raw variables
background-color: var(--bs-color-bg-primary); // No hex code, no Sass variable
}
Color and Background utility classes are also available for setting color and background-color.