This page lists all the colors available in OUDS Web and their usage, organized by their category. All colors are displayed in both light and dark modes for reference. However, they should be applied semantically using their respective utility classes or custom properties to ensure dynamic adaptation to the color mode .
Background
These colors are used for whole pages and structurally meaningful sections backgrounds.
These colors can be used with our background utilities .
ouds/color/bg/
Light mode
Dark mode
Usage
inverse-high
#141414
#eee
.bg-inverse-high
inverse-low
#141414
#333
.bg-inverse-low
primary
#fff
#141414
.bg-primary
secondary
#f4f4f4
#1f1f1f
.bg-secondary
tertiary
#f9f5f0
#23211a
.bg-tertiary
Surface
These colors should be used as background for elements that are on another background.
These colors can be used with our background utilities . Some of these surface colors have an opacity value and are designed to come on top of another color, we explain how to achieve surface color superposition here .
ouds/color/surface/
Light mode
Dark mode
Usage
inverse-high
#272727
#eee
.bg-surface-inverse-high
inverse-low
#272727
rgba(255, 255, 255, 0.12)
.bg-surface-inverse-low
primary
#fff
rgba(255, 255, 255, 0.04)
.bg-surface-primary
secondary
rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.08)
.bg-surface-secondary
tertiary
rgba(189, 121, 60, 0.08)
rgba(104, 93, 80, 0.4)
.bg-surface-tertiary
ouds/color/surface/brand/
Light mode
Dark mode
Usage
primary
#ff7900
#ff7900
.bg-surface-brand-primary
Status
These surface colors are used specifically to indicate a status.
Like other surface colors, they can be used with our background utilities .
ouds/color/surface/status/positive/
Light mode
Dark mode
Usage
emphasized
#138126
#94f0a4
.bg-surface-status-positive-emphasized
muted
rgba(61, 227, 90, 0.12)
rgba(14, 98, 29, 0.64)
.bg-surface-status-positive-muted
ouds/color/surface/status/info/
Light mode
Dark mode
Usage
emphasized
#0073b2
#8ad5ff
.bg-surface-status-info-emphasized
muted
rgba(38, 178, 255, 0.08)
rgba(0, 89, 138, 0.52)
.bg-surface-status-info-muted
ouds/color/surface/status/warning/
Light mode
Dark mode
Usage
emphasized
#ffd000
#ffe270
.bg-surface-status-warning-emphasized
muted
rgba(255, 208, 0, 0.16)
rgba(102, 81, 0, 0.48)
.bg-surface-status-warning-muted
ouds/color/surface/status/negative/
Light mode
Dark mode
Usage
emphasized
#db0002
#ff8081
.bg-surface-status-negative-emphasized
muted
rgba(219, 0, 2, 0.08)
rgba(219, 0, 2, 0.32)
.bg-surface-status-negative-muted
ouds/color/surface/status/accent/
Light mode
Dark mode
Usage
emphasized
#ff7900
#ff7900
.bg-surface-status-accent-emphasized
muted
rgba(189, 121, 60, 0.08)
rgba(104, 93, 80, 0.4)
.bg-surface-status-accent-muted
Content
These colors are used for informative but non-interactive content such as texts and icons.
These colors can be used with our text color utilities .
ouds/color/content/
Light mode
Dark mode
Usage
brand-primary
#f15e00
#ff7900
.text-brand-primary
default
#000
#eee
.text-default
disabled
rgba(0, 0, 0, 0.2)
rgba(255, 255, 255, 0.2)
.text-disabled
inverse
#fff
#000
.text-inverse
muted
rgba(0, 0, 0, 0.68)
rgba(255, 255, 255, 0.64)
.text-muted
ouds/color/content/status/
Light mode
Dark mode
Usage
accent
#ff7900
#ff7900
.text-status-accent
info
#0073b2
#8ad5ff
.text-status-info
inverse-info
#8ad5ff
#0073b2
.text-status-inverse-info
inverse-negative
#ff8081
#db0002
.text-status-inverse-negative
inverse-positive
#94f0a4
#138126
.text-status-inverse-positive
inverse-warning
#ffe270
#856a00
.text-status-inverse-warning
negative
#db0002
#ff8081
.text-status-negative
positive
#138126
#94f0a4
.text-status-positive
warning
#856a00
#ffe270
.text-status-warning
Content on other colors
These content colors are used to guarantee maximum legibility for contents displayed on a background or surface color.
Note
In the following lists we display an icon with the content color on their target background color.
ouds/color/content/on/brand/
Light mode
Dark mode
Usage
primary
#000
#000
.text-on-brand-primary
ouds/color/content/on/status/positive/
Light mode
Dark mode
Usage
emphasized
#fff
#000
.text-on-status-positive-emphasized
muted
#000
#eee
.text-on-status-positive-muted
ouds/color/content/on/status/info/
Light mode
Dark mode
Usage
emphasized
#fff
#000
.text-on-status-info-emphasized
muted
#000
#eee
.text-on-status-info-muted
ouds/color/content/on/status/warning/
Light mode
Dark mode
Usage
emphasized
#000
#000
.text-on-status-warning-emphasized
muted
#000
#eee
.text-on-status-warning-muted
ouds/color/content/on/status/negative/
Light mode
Dark mode
Usage
emphasized
#fff
#000
.text-on-status-negative-emphasized
muted
#000
#eee
.text-on-status-negative-muted
ouds/color/content/on/status/accent/
Light mode
Dark mode
Usage
emphasized
#000
#000
.text-on-status-accent-emphasized
muted
#000
#eee
.text-on-status-accent-muted
Note
The following content colors are highly specific and should only be used with direction from a designer or within the context of a custom component.
ouds/color/content/on/action/
Light mode
Dark mode
Usage
disabled
#fff
#000
var(--bs-color-content-on-action-disabled)
enabled
#fff
#000
var(--bs-color-content-on-action-enabled)
focus
#fff
#000
var(--bs-color-content-on-action-focus)
highlighted
#fff
#000
var(--bs-color-content-on-action-highlighted)
hover
#fff
#000
var(--bs-color-content-on-action-hover)
loading
#fff
#000
var(--bs-color-content-on-action-loading)
pressed
#fff
#000
var(--bs-color-content-on-action-pressed)
selected
#fff
#000
var(--bs-color-content-on-action-selected)
Action
These colors are used for interactive elements and actions' states.
Heads up!
These colors should only be used for custom components development, this is why no utilities are provided, please use directly the custom properties in your CSS.
ouds/color/action/
Light mode
Dark mode
Usage
disabled
rgba(0, 0, 0, 0.2)
rgba(255, 255, 255, 0.2)
var(--bs-color-action-disabled)
enabled
#000
#eee
var(--bs-color-action-enabled)
focus
rgba(0, 0, 0, 0.68)
rgba(255, 255, 255, 0.64)
var(--bs-color-action-focus)
highlighted
#000
#eee
var(--bs-color-action-highlighted)
hover
rgba(0, 0, 0, 0.68)
rgba(255, 255, 255, 0.64)
var(--bs-color-action-hover)
loading
#f15e00
#ff7900
var(--bs-color-action-loading)
pressed
#f15e00
#ff7900
var(--bs-color-action-pressed)
read-only-primary
rgba(0, 0, 0, 0.68)
rgba(255, 255, 255, 0.64)
var(--bs-color-action-read-only-primary)
read-only-secondary
rgba(0, 0, 0, 0.2)
rgba(255, 255, 255, 0.2)
var(--bs-color-action-read-only-secondary)
selected
#f15e00
#ff7900
var(--bs-color-action-selected)
visited
#5b2f98
#a885d8
var(--bs-color-action-visited)
ouds/color/action/support/
Light mode
Dark mode
Usage
disabled
rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.04)
var(--bs-color-action-support-disabled)
enabled
rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.04)
var(--bs-color-action-support-enabled)
focus
rgba(0, 0, 0, 0.08)
rgba(255, 255, 255, 0.08)
var(--bs-color-action-support-focus)
hover
rgba(0, 0, 0, 0.08)
rgba(255, 255, 255, 0.08)
var(--bs-color-action-support-hover)
loading
rgba(0, 0, 0, 0.12)
rgba(255, 255, 255, 0.12)
var(--bs-color-action-support-loading)
pressed
rgba(0, 0, 0, 0.12)
rgba(255, 255, 255, 0.12)
var(--bs-color-action-support-pressed)
ouds/color/action/negative/
Light mode
Dark mode
Usage
enabled
#db0002
#ff8081
var(--bs-color-action-negative-enabled)
focus
#b20002
#ffb2b3
var(--bs-color-action-negative-focus)
hover
#b20002
#ffb2b3
var(--bs-color-action-negative-hover)
loading
#800001
#ffe5e6
var(--bs-color-action-negative-loading)
pressed
#800001
#ffe5e6
var(--bs-color-action-negative-pressed)
Border
These colors are used for borders and dividers.
These colors can be used with our border utilities .
ouds/color/border/
Light mode
Dark mode
Usage
brand-primary
#f15e00
#ff7900
.border-brand-primary
default
rgba(0, 0, 0, 0.2)
rgba(255, 255, 255, 0.2)
.border-default
emphasized
#000
#eee
.border-emphasized
minimal
rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.04)
.border-minimal
muted
rgba(0, 0, 0, 0.12)
rgba(255, 255, 255, 0.12)
.border-muted
ouds/color/border/status/
Light mode
Dark mode
Usage
accent
#ff7900
#ff7900
.border-status-accent
info
#0073b2
#8ad5ff
.border-status-info
negative
#db0002
#ff8081
.border-status-negative
positive
#138126
#94f0a4
.border-status-positive
warning
#ffd000
#ffe270
.border-status-warning
Note
The following border colors do not have utilities because they are used only in a Sass mixin to create focus rings.
ouds/color/border/
Light mode
Dark mode
Usage
focus-inset
#fff
#141414
var(--bs-color-border-focus-inset)
focus
#000
#eee
var(--bs-color-border-focus)
Border on other colors
These border colors will guarantee an acceptable contrast on a specific background or surface color.
ouds/color/border/on/brand/
Light mode
Dark mode
Usage
primary
#000
#000
.border-on-brand-primary
Overlay
These colors are used for overlay elements like dropdown, modals and tooltips to create depth and emphasis.
Heads up!
These colors should only be used for custom components development, this is why no utilities are provided, please use directly the custom properties in your CSS.
ouds/color/overlay/
Light mode
Dark mode
Usage
backdrop
rgba(0, 0, 0, 0.68)
rgba(0, 0, 0, 0.68)
var(--bs-color-overlay-backdrop)
drag
rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.08)
var(--bs-color-overlay-drag)
dropdown
#fff
#3b3b3b
var(--bs-color-overlay-dropdown)
floating
#fff
#3b3b3b
var(--bs-color-overlay-floating)
modal-sheet
#fff
#272727
var(--bs-color-overlay-modal-sheet)
tooltip
#272727
#3b3b3b
var(--bs-color-overlay-tooltip)
Always
These colors are invariant, they will stay the same on every brand, modes or contexts.
These colors can be used with our background utilities , our text utilities or our border utilities .
ouds/color/always/
All modes
Usage
black
#000
var(--bs-color-always-black)
on-black
#eee
var(--bs-color-always-on-black)
on-white
#000
var(--bs-color-always-on-white)
white
#fff
var(--bs-color-always-white)
Opacity
These colors only define opacities levels, they are used to tweak visibility, hierarchy or emphasis of elements.
These colors can be used with our opacity utilities .
ouds/opacity/
All modes
Usage
disabled
0.2
.opacity-disabled
invisible
0
.opacity-invisible
medium
0.56
.opacity-medium
opaque
1
.opacity-opaque
strong
0.64
.opacity-strong
weak
0.32
.opacity-weak
weaker
0.16
.opacity-weaker
weakest
0.04
.opacity-weakest
Decorative
For design only
Decorative colors are used for coloring illustrations only and should not be needed in OUDS Web. Please contact us if you need to use them in your project.