Skip to main content

Text Color

Typography
Dark ModeColors Schemes

Utilities for controlling the text color of an element.

ClassPropertiesValue
ob-text-inheritcolor: inherit
Aa
ob-text-currentcolor: currentColor
Aa
ob-text-transparentcolor: transparent
Aa
ob-text-whitecolor: var(--ob-white)
Aa
ob-text-blackcolor: var(--ob-black)
Aa
ob-text-body-lightcolor: var(--ob-body-light)
Aa
ob-text-body-darkcolor: var(--ob-body-dark)
Aa
ob-text-white-emph-highcolor: var(--ob-white-emph-high)
Aa
ob-text-white-emph-mediumcolor: var(--ob-white-emph-medium)
Aa
ob-text-white-emph-lowcolor: var(--ob-white-emph-low)
Aa
ob-text-black-emph-highcolor: var(--ob-black-emph-high)
Aa
ob-text-black-emph-mediumcolor: var(--ob-black-emph-medium)
Aa
ob-text-black-emph-lowcolor: var(--ob-black-emph-low)
Aa
ob-text-primary-50color: var(--ob-primary-50)
Aa
ob-text-primary-100color: var(--ob-primary-100)
Aa
ob-text-primary-200color: var(--ob-primary-200)
Aa
ob-text-primary-300color: var(--ob-primary-300)
Aa
ob-text-primary-400color: var(--ob-primary-400)
Aa
ob-text-primary-500color: var(--ob-primary-500)
Aa
ob-text-primary-600color: var(--ob-primary-600)
Aa
ob-text-primary-700color: var(--ob-primary-700)
Aa
ob-text-primary-800color: var(--ob-primary-800)
Aa
ob-text-primary-900color: var(--ob-primary-900)
Aa
ob-text-secondary-50color: var(--ob-secondary-50)
Aa
ob-text-secondary-100color: var(--ob-secondary-100)
Aa
ob-text-secondary-200color: var(--ob-secondary-200)
Aa
ob-text-secondary-300color: var(--ob-secondary-300)
Aa
ob-text-secondary-400color: var(--ob-secondary-400)
Aa
ob-text-secondary-500color: var(--ob-secondary-500)
Aa
ob-text-secondary-600color: var(--ob-secondary-600)
Aa
ob-text-secondary-700color: var(--ob-secondary-700)
Aa
ob-text-secondary-800color: var(--ob-secondary-800)
Aa
ob-text-secondary-900color: var(--ob-secondary-900)
Aa
ob-text-tertiary-50color: var(--ob-tertiary-50)
Aa
ob-text-tertiary-100color: var(--ob-tertiary-100)
Aa
ob-text-tertiary-200color: var(--ob-tertiary-200)
Aa
ob-text-tertiary-300color: var(--ob-tertiary-300)
Aa
ob-text-tertiary-400color: var(--ob-tertiary-400)
Aa
ob-text-tertiary-500color: var(--ob-tertiary-500)
Aa
ob-text-tertiary-600color: var(--ob-tertiary-600)
Aa
ob-text-tertiary-700color: var(--ob-tertiary-700)
Aa
ob-text-tertiary-800color: var(--ob-tertiary-800)
Aa
ob-text-tertiary-900color: var(--ob-tertiary-900)
Aa
ob-text-neutral-50color: var(--ob-neutral-50)
Aa
ob-text-neutral-100color: var(--ob-neutral-100)
Aa
ob-text-neutral-200color: var(--ob-neutral-200)
Aa
ob-text-neutral-300color: var(--ob-neutral-300)
Aa
ob-text-neutral-400color: var(--ob-neutral-400)
Aa
ob-text-neutral-500color: var(--ob-neutral-500)
Aa
ob-text-neutral-600color: var(--ob-neutral-600)
Aa
ob-text-neutral-700color: var(--ob-neutral-700)
Aa
ob-text-neutral-800color: var(--ob-neutral-800)
Aa
ob-text-neutral-900color: var(--ob-neutral-900)
Aa
ob-text-accent-50color: var(--ob-accent-50)
Aa
ob-text-accent-100color: var(--ob-accent-100)
Aa
ob-text-accent-200color: var(--ob-accent-200)
Aa
ob-text-accent-300color: var(--ob-accent-300)
Aa
ob-text-accent-400color: var(--ob-accent-400)
Aa
ob-text-accent-500color: var(--ob-accent-500)
Aa
ob-text-accent-600color: var(--ob-accent-600)
Aa
ob-text-accent-700color: var(--ob-accent-700)
Aa
ob-text-accent-800color: var(--ob-accent-800)
Aa
ob-text-accent-900color: var(--ob-accent-900)
Aa
ob-text-informative-50color: var(--ob-informative-50)
Aa
ob-text-informative-100color: var(--ob-informative-100)
Aa
ob-text-informative-200color: var(--ob-informative-200)
Aa
ob-text-informative-300color: var(--ob-informative-300)
Aa
ob-text-informative-400color: var(--ob-informative-400)
Aa
ob-text-informative-500color: var(--ob-informative-500)
Aa
ob-text-informative-600color: var(--ob-informative-600)
Aa
ob-text-informative-700color: var(--ob-informative-700)
Aa
ob-text-informative-800color: var(--ob-informative-800)
Aa
ob-text-informative-900color: var(--ob-informative-900)
Aa
ob-text-success-50color: var(--ob-success-50)
Aa
ob-text-success-100color: var(--ob-success-100)
Aa
ob-text-success-200color: var(--ob-success-200)
Aa
ob-text-success-300color: var(--ob-success-300)
Aa
ob-text-success-400color: var(--ob-success-400)
Aa
ob-text-success-500color: var(--ob-success-500)
Aa
ob-text-success-600color: var(--ob-success-600)
Aa
ob-text-success-700color: var(--ob-success-700)
Aa
ob-text-success-800color: var(--ob-success-800)
Aa
ob-text-success-900color: var(--ob-success-900)
Aa
ob-text-warning-50color: var(--ob-warning-50)
Aa
ob-text-warning-100color: var(--ob-warning-100)
Aa
ob-text-warning-200color: var(--ob-warning-200)
Aa
ob-text-warning-300color: var(--ob-warning-300)
Aa
ob-text-warning-400color: var(--ob-warning-400)
Aa
ob-text-warning-500color: var(--ob-warning-500)
Aa
ob-text-warning-600color: var(--ob-warning-600)
Aa
ob-text-warning-700color: var(--ob-warning-700)
Aa
ob-text-warning-800color: var(--ob-warning-800)
Aa
ob-text-warning-900color: var(--ob-warning-900)
Aa
ob-text-error-50color: var(--ob-error-50)
Aa
ob-text-error-100color: var(--ob-error-100)
Aa
ob-text-error-200color: var(--ob-error-200)
Aa
ob-text-error-300color: var(--ob-error-300)
Aa
ob-text-error-400color: var(--ob-error-400)
Aa
ob-text-error-500color: var(--ob-error-500)
Aa
ob-text-error-600color: var(--ob-error-600)
Aa
ob-text-error-700color: var(--ob-error-700)
Aa
ob-text-error-800color: var(--ob-error-800)
Aa
ob-text-error-900color: var(--ob-error-900)
Aa
ob-text-white-trans-90color: var(--ob-white-trans-90)
Aa
ob-text-white-trans-80color: var(--ob-white-trans-80)
Aa
ob-text-white-trans-70color: var(--ob-white-trans-70)
Aa
ob-text-white-trans-60color: var(--ob-white-trans-60)
Aa
ob-text-white-trans-50color: var(--ob-white-trans-50)
Aa
ob-text-white-trans-40color: var(--ob-white-trans-40)
Aa
ob-text-white-trans-20color: var(--ob-white-trans-20)
Aa
ob-text-white-trans-10color: var(--ob-white-trans-10)
Aa
ob-text-white-trans-5color: var(--ob-white-trans-5)
Aa
ob-text-white-trans-1color: var(--ob-white-trans-1)
Aa