Backgrounds

Background Color

Utilities for sets background color.


Class

classcss
bg-transparentbackground-color: transparent
bg-whitebackground-color: #fff
bg-charcoal-100background-color: #222c35
bg-charcoal-200background-color: #1f2831
bg-charcoal-300background-color: #1c252c
bg-charcoal-400background-color: #192127
bg-charcoal-500background-color: #161d22
bg-charcoal-600background-color: #13181d
bg-charcoal-700background-color: #101419
bg-charcoal-800background-color: #0d1014
bg-charcoal-900background-color: #0a0c0f
bg-gray-100background-color: #f7fafc
bg-gray-200background-color: #edf2f7
bg-gray-300background-color: #e2e8f0
bg-gray-400background-color: #cbd5e0
bg-gray-500background-color: #a0aec0
bg-gray-600background-color: #718096
bg-gray-700background-color: #4a5568
bg-gray-800background-color: #2d3748
bg-gray-900background-color: #1a202c
bg-red-100background-color: #fff5f5
bg-red-200background-color: #fed7d7
bg-red-300background-color: #feb2b2
bg-red-400background-color: #fc8181
bg-red-500background-color: #f56565
bg-red-600background-color: #e53e3e
bg-red-700background-color: #c53030
bg-red-800background-color: #9b2c2c
bg-red-900background-color: #742a2a
bg-orange-100background-color: #fffaf0
bg-orange-200background-color: #feebc8
bg-orange-300background-color: #fbd38d
bg-orange-400background-color: #f6ad55
bg-orange-500background-color: #ed8936
bg-orange-600background-color: #dd6b20
bg-orange-700background-color: #c05621
bg-orange-800background-color: #9c4221
bg-orange-900background-color: #7b341e
bg-green-100background-color: #f0fff4
bg-green-200background-color: #c6f6d5
bg-green-300background-color: #9ae6b4
bg-green-400background-color: #68d391
bg-green-500background-color: #48bb78
bg-green-600background-color: #38a169
bg-green-700background-color: #2f855a
bg-green-800background-color: #276749
bg-green-900background-color: #22543d
bg-teal-100background-color: #e6fffa
bg-teal-200background-color: #b2f5ea
bg-teal-300background-color: #81e6d9
bg-teal-400background-color: #4fd1c5
bg-teal-500background-color: #38b2ac
bg-teal-600background-color: #319795
bg-teal-700background-color: #2c7a7b
bg-teal-800background-color: #285e61
bg-teal-900background-color: #234e52
bg-blue-100background-color: #ebf8ff
bg-blue-200background-color: #bee3f8
bg-blue-300background-color: #90cdf4
bg-blue-400background-color: #63b3ed
bg-blue-500background-color: #4299e1
bg-blue-600background-color: #3182ce
bg-blue-700background-color: #2b6cb0
bg-blue-800background-color: #2c5282
bg-blue-900background-color: #2a4365
bg-indigo-100background-color: #ebf4ff
bg-indigo-200background-color: #c3dafe
bg-indigo-300background-color: #a3bffa
bg-indigo-400background-color: #7f9cf5
bg-indigo-500background-color: #667eea
bg-indigo-600background-color: #5a67d8
bg-indigo-700background-color: #4c51bf
bg-indigo-800background-color: #434190
bg-indigo-900background-color: #3c366b
bg-purple-100background-color: #faf5ff
bg-purple-200background-color: #e9d8fd
bg-purple-300background-color: #d6bcfa
bg-purple-400background-color: #b794f4
bg-purple-500background-color: #9f7aea
bg-purple-600background-color: #805ad5
bg-purple-700background-color: #6b46c1
bg-purple-800background-color: #553c9a
bg-purple-900background-color: #44337a
bg-pink-100background-color: #fff5f7
bg-pink-200background-color: #fed7e2
bg-pink-300background-color: #fbb6ce
bg-pink-400background-color: #f687b3
bg-pink-500background-color: #ed64a6
bg-pink-600background-color: #d53f8c
bg-pink-700background-color: #b83280
bg-pink-800background-color: #97266d
bg-pink-900background-color: #702459
bg-khaki-100background-color: #f9f7f4
bg-khaki-200background-color: #f0ebe4
bg-khaki-300background-color: #e7dfd3
bg-khaki-400background-color: #d5c8b2
bg-khaki-500background-color: #c3b091
bg-khaki-600background-color: #b09e83
bg-khaki-700background-color: #756a57
bg-khaki-800background-color: #584f41
bg-khaki-900background-color: #3b352c
bg-amber-100background-color: #fff9e6
bg-amber-200background-color: #fff0bf
bg-amber-300background-color: #ffe799
bg-amber-400background-color: #ffd54d
bg-amber-500background-color: #ffc300
bg-amber-600background-color: #e6b000
bg-amber-700background-color: #997500
bg-amber-800background-color: #735800
bg-amber-900background-color: #4d3b00
bg-nero-100background-color: #e9e9e9
bg-nero-200background-color: #c7c8c9
bg-nero-300background-color: #a6a7a8
bg-nero-400background-color: #636466
bg-nero-500background-color: #202225
bg-nero-600background-color: #1d1f21
bg-nero-700background-color: #131416
bg-nero-800background-color: #0e0f11
bg-nero-900background-color: #0a0a0b

Usage

Set basic background color to an element.

<!-- Example -->
<y class="bg-amber-400 ... h-32 w-32">
...
</y>

Set default background color to <body> tag.

<!-- Example -->
<body class="bg-amber-400">
...
</body>

v1.1.0 Set auto dark theme enabled to an element with added (dark) prefix.

<!-- Example -->
<y class="bg-gray-200 (dark)bg-charcoal-100">
...
</y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'bg-new-color',
//variant: 'responsive',
property: 'background-color',
modifier: (
'100': '#...',
'200': '#...'
//...
)
)
)

Variant

VariantEnabledResponsive
DefaultYes
Dark ThemeYes
hoverYes
group-hoverYes
focusYes
focus-withinYes
activeYes
visitedYes
checked
disabled