Colors Schemes

Tokens

Main Colors

Variables	Value	Properties
--ob-white		hsl(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l))
--ob-black		hsl(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l))
--ob-body-light		hsl(var(--ob-body-light-h), var(--ob-body-light-s), var(--ob-body-light-l))
--ob-body-dark		hsl(var(--ob-body-dark-h), var(--ob-body-dark-s), var(--ob-body-dark-l))

Typography Colors

Variables	Value	Properties
--ob-white-emph-high		hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 1)
--ob-white-emph-medium		hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 0.75)
--ob-white-emph-low		hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 0.55)
--ob-black-emph-high		hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 1)
--ob-black-emph-medium		hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 0.6)
--ob-black-emph-low		hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 0.55)

Base Colors

Primary

Variables	Value	Properties
--ob-primary-50		hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-50))
--ob-primary-100		hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-100))
--ob-primary-200		hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-200))
--ob-primary-300		hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-300))
--ob-primary-400		hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-400))
--ob-primary-500		hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-500))
--ob-primary-600		hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-600))
--ob-primary-700		hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-700))
--ob-primary-800		hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-800))
--ob-primary-900		hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-900))

Secondary

Variables	Value	Properties
--ob-secondary-50		hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-50))
--ob-secondary-100		hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-100))
--ob-secondary-200		hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-200))
--ob-secondary-300		hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-300))
--ob-secondary-400		hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-400))
--ob-secondary-500		hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-500))
--ob-secondary-600		hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-600))
--ob-secondary-700		hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-700))
--ob-secondary-800		hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-800))
--ob-secondary-900		hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-900))

Tertiary

Variables	Value	Properties
--ob-tertiary-50		hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-50))
--ob-tertiary-100		hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-100))
--ob-tertiary-200		hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-200))
--ob-tertiary-300		hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-300))
--ob-tertiary-400		hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-400))
--ob-tertiary-500		hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-500))
--ob-tertiary-600		hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-600))
--ob-tertiary-700		hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-700))
--ob-tertiary-800		hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-800))
--ob-tertiary-900		hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-900))

Neutral

Variables	Value	Properties
--ob-neutral-50		hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-50))
--ob-neutral-100		hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-100))
--ob-neutral-200		hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-200))
--ob-neutral-300		hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-300))
--ob-neutral-400		hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-400))
--ob-neutral-500		hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-500))
--ob-neutral-600		hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-600))
--ob-neutral-700		hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-700))
--ob-neutral-800		hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-800))
--ob-neutral-900		hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-900))

Accent

Variables	Value	Properties
--ob-accent-50		hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-50))
--ob-accent-100		hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-100))
--ob-accent-200		hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-200))
--ob-accent-300		hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-300))
--ob-accent-400		hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-400))
--ob-accent-500		hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-500))
--ob-accent-600		hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-600))
--ob-accent-700		hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-700))
--ob-accent-800		hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-800))
--ob-accent-900		hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-900))

Feedback Colors

Informative

Variables	Value	Properties
--ob-informative-50		hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-50))
--ob-informative-100		hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-100))
--ob-informative-200		hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-200))
--ob-informative-300		hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-300))
--ob-informative-400		hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-400))
--ob-informative-500		hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-500))
--ob-informative-600		hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-600))
--ob-informative-700		hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-700))
--ob-informative-800		hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-800))
--ob-informative-900		hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-900))

Success

Variables	Value	Properties
--ob-success-50		hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-50))
--ob-success-100		hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-100))
--ob-success-200		hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-200))
--ob-success-300		hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-300))
--ob-success-400		hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-400))
--ob-success-500		hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-500))
--ob-success-600		hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-600))
--ob-success-700		hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-700))
--ob-success-800		hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-800))
--ob-success-900		hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-900))

Warning

Variables	Value	Properties
--ob-warning-50		hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-50))
--ob-warning-100		hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-100))
--ob-warning-200		hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-200))
--ob-warning-300		hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-300))
--ob-warning-400		hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-400))
--ob-warning-500		hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-500))
--ob-warning-600		hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-600))
--ob-warning-700		hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-700))
--ob-warning-800		hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-800))
--ob-warning-900		hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-900))

Error

Variables	Value	Properties
--ob-error-50		hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-50))
--ob-error-100		hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-100))
--ob-error-200		hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-200))
--ob-error-300		hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-300))
--ob-error-400		hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-400))
--ob-error-500		hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-500))
--ob-error-600		hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-600))
--ob-error-700		hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-700))
--ob-error-800		hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-800))
--ob-error-900		hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-900))

Elevations Colors

Variables	Value	Properties
--ob-elevations-24dp		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)
--ob-elevations-16dp		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)
--ob-elevations-12dp		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)
--ob-elevations-9dp		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)
--ob-elevations-8dp		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)
--ob-elevations-6dp		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)
--ob-elevations-4dp		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)
--ob-elevations-3dp		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)
--ob-elevations-2dp		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)
--ob-elevations-1dp		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

Variables	Value	Properties
--ob-white-trans-90		hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.9)
--ob-white-trans-80		hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.8)
--ob-white-trans-70		hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.7)
--ob-white-trans-60		hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.6)
--ob-white-trans-50		hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.5)
--ob-white-trans-40		hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.4)
--ob-white-trans-20		hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.2)
--ob-white-trans-10		hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.1)
--ob-white-trans-5		hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.05)
--ob-white-trans-1		hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.01)