Skip to main content

Background Color

Typography

Utilities for controlling an element's background color.

ClassPropertiesValue
ob-bg-inheritbackground-color: inherit
ob-bg-currentbackground-color: currentColor
ob-bg-transparentbackground-color: transparent
ob-bg-whitebackground-color: var(--ob-white)
ob-bg-blackbackground-color: var(--ob-black)
ob-bg-body-lightbackground-color: var(--ob-body-light)
ob-bg-body-darkbackground-color: var(--ob-body-dark)
ob-bg-white-emph-highbackground-color: var(--ob-white-emph-high)
ob-bg-white-emph-mediumbackground-color: var(--ob-white-emph-medium)
ob-bg-white-emph-lowbackground-color: var(--ob-white-emph-low)
ob-bg-black-emph-highbackground-color: var(--ob-black-emph-high)
ob-bg-black-emph-mediumbackground-color: var(--ob-black-emph-medium)
ob-bg-black-emph-lowbackground-color: var(--ob-black-emph-low)
ob-bg-primary-50background-color: var(--ob-primary-50)
ob-bg-primary-100background-color: var(--ob-primary-100)
ob-bg-primary-200background-color: var(--ob-primary-200)
ob-bg-primary-300background-color: var(--ob-primary-300)
ob-bg-primary-400background-color: var(--ob-primary-400)
ob-bg-primary-500background-color: var(--ob-primary-500)
ob-bg-primary-600background-color: var(--ob-primary-600)
ob-bg-primary-700background-color: var(--ob-primary-700)
ob-bg-primary-800background-color: var(--ob-primary-800)
ob-bg-primary-900background-color: var(--ob-primary-900)
ob-bg-secondary-50background-color: var(--ob-secondary-50)
ob-bg-secondary-100background-color: var(--ob-secondary-100)
ob-bg-secondary-200background-color: var(--ob-secondary-200)
ob-bg-secondary-300background-color: var(--ob-secondary-300)
ob-bg-secondary-400background-color: var(--ob-secondary-400)
ob-bg-secondary-500background-color: var(--ob-secondary-500)
ob-bg-secondary-600background-color: var(--ob-secondary-600)
ob-bg-secondary-700background-color: var(--ob-secondary-700)
ob-bg-secondary-800background-color: var(--ob-secondary-800)
ob-bg-secondary-900background-color: var(--ob-secondary-900)
ob-bg-tertiary-50background-color: var(--ob-tertiary-50)
ob-bg-tertiary-100background-color: var(--ob-tertiary-100)
ob-bg-tertiary-200background-color: var(--ob-tertiary-200)
ob-bg-tertiary-300background-color: var(--ob-tertiary-300)
ob-bg-tertiary-400background-color: var(--ob-tertiary-400)
ob-bg-tertiary-500background-color: var(--ob-tertiary-500)
ob-bg-tertiary-600background-color: var(--ob-tertiary-600)
ob-bg-tertiary-700background-color: var(--ob-tertiary-700)
ob-bg-tertiary-800background-color: var(--ob-tertiary-800)
ob-bg-tertiary-900background-color: var(--ob-tertiary-900)
ob-bg-neutral-50background-color: var(--ob-neutral-50)
ob-bg-neutral-100background-color: var(--ob-neutral-100)
ob-bg-neutral-200background-color: var(--ob-neutral-200)
ob-bg-neutral-300background-color: var(--ob-neutral-300)
ob-bg-neutral-400background-color: var(--ob-neutral-400)
ob-bg-neutral-500background-color: var(--ob-neutral-500)
ob-bg-neutral-600background-color: var(--ob-neutral-600)
ob-bg-neutral-700background-color: var(--ob-neutral-700)
ob-bg-neutral-800background-color: var(--ob-neutral-800)
ob-bg-neutral-900background-color: var(--ob-neutral-900)
ob-bg-accent-50background-color: var(--ob-accent-50)
ob-bg-accent-100background-color: var(--ob-accent-100)
ob-bg-accent-200background-color: var(--ob-accent-200)
ob-bg-accent-300background-color: var(--ob-accent-300)
ob-bg-accent-400background-color: var(--ob-accent-400)
ob-bg-accent-500background-color: var(--ob-accent-500)
ob-bg-accent-600background-color: var(--ob-accent-600)
ob-bg-accent-700background-color: var(--ob-accent-700)
ob-bg-accent-800background-color: var(--ob-accent-800)
ob-bg-accent-900background-color: var(--ob-accent-900)
ob-bg-informative-50background-color: var(--ob-informative-50)
ob-bg-informative-100background-color: var(--ob-informative-100)
ob-bg-informative-200background-color: var(--ob-informative-200)
ob-bg-informative-300background-color: var(--ob-informative-300)
ob-bg-informative-400background-color: var(--ob-informative-400)
ob-bg-informative-500background-color: var(--ob-informative-500)
ob-bg-informative-600background-color: var(--ob-informative-600)
ob-bg-informative-700background-color: var(--ob-informative-700)
ob-bg-informative-800background-color: var(--ob-informative-800)
ob-bg-informative-900background-color: var(--ob-informative-900)
ob-bg-success-50background-color: var(--ob-success-50)
ob-bg-success-100background-color: var(--ob-success-100)
ob-bg-success-200background-color: var(--ob-success-200)
ob-bg-success-300background-color: var(--ob-success-300)
ob-bg-success-400background-color: var(--ob-success-400)
ob-bg-success-500background-color: var(--ob-success-500)
ob-bg-success-600background-color: var(--ob-success-600)
ob-bg-success-700background-color: var(--ob-success-700)
ob-bg-success-800background-color: var(--ob-success-800)
ob-bg-success-900background-color: var(--ob-success-900)
ob-bg-warning-50background-color: var(--ob-warning-50)
ob-bg-warning-100background-color: var(--ob-warning-100)
ob-bg-warning-200background-color: var(--ob-warning-200)
ob-bg-warning-300background-color: var(--ob-warning-300)
ob-bg-warning-400background-color: var(--ob-warning-400)
ob-bg-warning-500background-color: var(--ob-warning-500)
ob-bg-warning-600background-color: var(--ob-warning-600)
ob-bg-warning-700background-color: var(--ob-warning-700)
ob-bg-warning-800background-color: var(--ob-warning-800)
ob-bg-warning-900background-color: var(--ob-warning-900)
ob-bg-error-50background-color: var(--ob-error-50)
ob-bg-error-100background-color: var(--ob-error-100)
ob-bg-error-200background-color: var(--ob-error-200)
ob-bg-error-300background-color: var(--ob-error-300)
ob-bg-error-400background-color: var(--ob-error-400)
ob-bg-error-500background-color: var(--ob-error-500)
ob-bg-error-600background-color: var(--ob-error-600)
ob-bg-error-700background-color: var(--ob-error-700)
ob-bg-error-800background-color: var(--ob-error-800)
ob-bg-error-900background-color: var(--ob-error-900)
ob-bg-elevations-24dpbackground: var(--ob-elevations-24dp)
ob-bg-elevations-16dpbackground: var(--ob-elevations-16dp)
ob-bg-elevations-12dpbackground: var(--ob-elevations-12dp)
ob-bg-elevations-9dpbackground: var(--ob-elevations-9dp)
ob-bg-elevations-8dpbackground: var(--ob-elevations-8dp)
ob-bg-elevations-6dpbackground: var(--ob-elevations-6dp)
ob-bg-elevations-4dpbackground: var(--ob-elevations-4dp)
ob-bg-elevations-3dpbackground: var(--ob-elevations-3dp)
ob-bg-elevations-2dpbackground: var(--ob-elevations-2dp)
ob-bg-elevations-1dpbackground: var(--ob-elevations-1dp)
ob-bg-white-trans-90background-color: var(--ob-white-trans-90)
ob-bg-white-trans-80background-color: var(--ob-white-trans-80)
ob-bg-white-trans-70background-color: var(--ob-white-trans-70)
ob-bg-white-trans-60background-color: var(--ob-white-trans-60)
ob-bg-white-trans-50background-color: var(--ob-white-trans-50)
ob-bg-white-trans-40background-color: var(--ob-white-trans-40)
ob-bg-white-trans-20background-color: var(--ob-white-trans-20)
ob-bg-white-trans-10background-color: var(--ob-white-trans-10)
ob-bg-white-trans-5background-color: var(--ob-white-trans-5)
ob-bg-white-trans-1background-color: var(--ob-white-trans-1)