Bootstrap 5.3
The Bootstrap 5.3 color system — gray-100..900 plus ten named accents (blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan) and the eight theme colors (primary, secondary, success, info, warning, danger, light, dark). Includes the full set of derived per-theme emphasis/bg-subtle/border-subtle values for both light and dark modes. Light mode is the default theme that ships when you load `bootstrap.css`; dark mode is activated by setting `data-bs-theme="dark"` on the root and overrides body bg, body color, secondary/tertiary surfaces, link color, and every theme-color emphasis triplet.
87 swatches 20 light roles 20 dark roles
Swatches
misc
white
#FFFFFF
black
#000000
blue
#0D6EFD
indigo
#6610F2
purple
#6F42C1
pink
#D63384
red
#DC3545
orange
#FD7E14
yellow
#FFC107
green
#198754
teal
#20C997
cyan
#0DCAF0
light-primary-text-emphasis
#052C65
light-secondary-text-emphasis
#2B2F32
light-success-text-emphasis
#0A3622
light-info-text-emphasis
#055160
light-warning-text-emphasis
#664D03
light-danger-text-emphasis
#58151C
light-light-text-emphasis
#495057
light-dark-text-emphasis
#495057
light-primary-bg-subtle
#CFE2FF
light-secondary-bg-subtle
#E2E3E5
light-success-bg-subtle
#D1E7DD
light-info-bg-subtle
#CFF4FC
light-warning-bg-subtle
#FFF3CD
light-danger-bg-subtle
#F8D7DA
light-light-bg-subtle
#FCFCFD
light-dark-bg-subtle
#CED4DA
light-primary-border-subtle
#9EC5FE
light-secondary-border-subtle
#C4C8CB
light-success-border-subtle
#A3CFBB
light-info-border-subtle
#9EEAF9
light-warning-border-subtle
#FFE69C
light-danger-border-subtle
#F1AEB5
light-light-border-subtle
#E9ECEF
light-dark-border-subtle
#ADB5BD
light-body-bg
#FFFFFF
light-body-color
#212529
light-secondary-bg
#E9ECEF
light-tertiary-bg
#F8F9FA
light-border-color
#DEE2E6
light-link-color
#0D6EFD
light-link-hover
#0A58CA
light-code-color
#D63384
light-highlight-bg
#FFF3CD
dark-primary-text-emphasis
#6EA8FE
dark-secondary-text-emphasis
#A7ACB1
dark-success-text-emphasis
#75B798
dark-info-text-emphasis
#6EDFF6
dark-warning-text-emphasis
#FFDA6A
dark-danger-text-emphasis
#EA868F
dark-light-text-emphasis
#F8F9FA
dark-dark-text-emphasis
#DEE2E6
dark-primary-bg-subtle
#031633
dark-secondary-bg-subtle
#161719
dark-success-bg-subtle
#051B11
dark-info-bg-subtle
#032830
dark-warning-bg-subtle
#332701
dark-danger-bg-subtle
#2C0B0E
dark-light-bg-subtle
#343A40
dark-dark-bg-subtle
#1A1D20
dark-primary-border-subtle
#084298
dark-secondary-border-subtle
#41464B
dark-success-border-subtle
#0F5132
dark-info-border-subtle
#087990
dark-warning-border-subtle
#997404
dark-danger-border-subtle
#842029
dark-light-border-subtle
#495057
dark-dark-border-subtle
#343A40
dark-body-bg
#212529
dark-body-color
#DEE2E6
dark-secondary-bg
#343A40
dark-tertiary-bg
#2B3035
dark-border-color
#495057
dark-link-color
#6EA8FE
dark-link-hover
#8BB9FE
dark-code-color
#E685B5
dark-highlight-bg
#664D03
gray
gray-100
#F8F9FA
gray-200
#E9ECEF
gray-300
#DEE2E6
gray-400
#CED4DA
gray-500
#ADB5BD
gray-600
#6C757D
gray-700
#495057
gray-800
#343A40
gray-900
#212529
Mode role mappings
Light mode (20 roles)
accent
→ indigo accent-hover
→ purple background
→ light-body-bg bg-subtle
→ light-primary-bg-subtle border
→ light-border-color code
→ light-code-color error
→ red info
→ cyan link
→ light-link-color primary
→ blue primary-hover
→ light-link-hover success
→ green surface
→ light-tertiary-bg surface-elevated
→ light-body-bg text-emphasis
→ light-primary-text-emphasis text-primary
→ light-body-color text-secondary
→ gray-700 text-tertiary
→ gray-600 warning
→ yellow warning-hover
→ orange Dark mode (20 roles)
accent
→ dark-info-text-emphasis accent-hover
→ cyan background
→ dark-body-bg bg-subtle
→ dark-primary-bg-subtle border
→ dark-border-color code
→ dark-code-color error
→ dark-danger-text-emphasis info
→ dark-info-text-emphasis link
→ dark-link-color primary
→ dark-primary-text-emphasis primary-hover
→ dark-link-hover success
→ dark-success-text-emphasis surface
→ dark-tertiary-bg surface-elevated
→ dark-secondary-bg text-emphasis
→ dark-primary-text-emphasis text-primary
→ dark-body-color text-secondary
→ gray-400 text-tertiary
→ gray-500 warning
→ dark-warning-text-emphasis warning-hover
→ yellow Provenance
- Source
- https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
- License
MIT- Attribution
- Bootstrap, Copyright (c) 2011-2025 The Bootstrap Authors, licensed under MIT. Light theme values from scss/_variables.scss; dark theme overrides from scss/_variables-dark.scss. Hex values cross-checked against the compiled dist/css/bootstrap.css.
- Imported
-
2026-05-17(upstream version [email protected])