Skip to main content

Colors Schemes

Tokens

Main Colors

VariablesValueProperties
--ob-whitehsl(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l))
--ob-blackhsl(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l))
--ob-body-lighthsl(var(--ob-body-light-h), var(--ob-body-light-s), var(--ob-body-light-l))
--ob-body-darkhsl(var(--ob-body-dark-h), var(--ob-body-dark-s), var(--ob-body-dark-l))

Typography Colors

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

Base Colors

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

Feedback Colors

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

Elevations Colors

VariablesValueProperties
--ob-elevations-24dplinear-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)
--ob-elevations-16dplinear-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)
--ob-elevations-12dplinear-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)
--ob-elevations-9dplinear-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)
--ob-elevations-8dplinear-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)
--ob-elevations-6dplinear-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)
--ob-elevations-4dplinear-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)
--ob-elevations-3dplinear-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)
--ob-elevations-2dplinear-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)
--ob-elevations-1dplinear-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
--ob-white-trans-90hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.9)
--ob-white-trans-80hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.8)
--ob-white-trans-70hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.7)
--ob-white-trans-60hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.6)
--ob-white-trans-50hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.5)
--ob-white-trans-40hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.4)
--ob-white-trans-20hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.2)
--ob-white-trans-10hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.1)
--ob-white-trans-5hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.05)
--ob-white-trans-1hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.01)