Skip to main content

Colors Schemes

Main Colors

VariablesValueProperties
hsl(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l))
hsl(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l))
hsl(var(--ob-body-light-h), var(--ob-body-light-s), var(--ob-body-light-l))
hsl(var(--ob-body-dark-h), var(--ob-body-dark-s), var(--ob-body-dark-l))

Typography Colors

VariablesValueProperties
hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 1)
hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 0.75)
hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 0.55)
hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 1)
hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 0.6)
hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 0.55)

Base Colors

Primary
VariablesValueProperties
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-50))
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-100))
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-200))
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-300))
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-400))
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-500))
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-600))
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-700))
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-800))
hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-900))
Secondary
VariablesValueProperties
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-50))
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-100))
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-200))
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-300))
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-400))
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-500))
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-600))
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-700))
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-800))
hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-900))
Tertiary
VariablesValueProperties
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-50))
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-100))
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-200))
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-300))
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-400))
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-500))
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-600))
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-700))
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-800))
hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-900))
Neutral
VariablesValueProperties
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-50))
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-100))
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-200))
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-300))
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-400))
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-500))
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-600))
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-700))
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-800))
hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-900))
Accent
VariablesValueProperties
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-50))
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-100))
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-200))
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-300))
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-400))
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-500))
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-600))
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-700))
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-800))
hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-900))

Feedback Colors

Informative
VariablesValueProperties
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-50))
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-100))
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-200))
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-300))
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-400))
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-500))
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-600))
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-700))
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-800))
hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-900))
Success
VariablesValueProperties
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-50))
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-100))
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-200))
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-300))
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-400))
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-500))
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-600))
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-700))
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-800))
hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-900))
Warning
VariablesValueProperties
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-50))
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-100))
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-200))
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-300))
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-400))
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-500))
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-600))
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-700))
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-800))
hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-900))
Error
VariablesValueProperties
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-50))
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-100))
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-200))
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-300))
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-400))
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-500))
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-600))
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-700))
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-800))
hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-900))

Elevations Colors

VariablesValueProperties
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.16), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.16)), var(--ob-body-dark)
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.15), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.15)), var(--ob-body-dark)
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.14), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.14)), var(--ob-body-dark)
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.12), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.12)), var(--ob-body-dark)
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.11), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.11)), var(--ob-body-dark)
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.09), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.09)), var(--ob-body-dark)
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.08), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.08)), var(--ob-body-dark)
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.07), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.07)), var(--ob-body-dark)
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.05), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.05)), var(--ob-body-dark)
linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.01), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-secondary-l), 0.01)), var(--ob-body-dark)

White Opacity Colors

VariablesValueProperties
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.9)
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.8)
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.7)
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.6)
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.5)
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.4)
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.2)
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.1)
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.05)
hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.01)