AAtomic CSS

background-color

Sets element background color. Supports 6-digit HEX and RGBA. hover- prefix enables hover background change.

HEX Format

Specify 6-digit HEX color with bg{HEX6}.

ClassCSSPreview
bg000000background-color: #000000
bgFFFFFFbackground-color: #FFFFFF
bg6366F1background-color: #6366F1
bg34D399background-color: #34D399
bgF43F5Ebackground-color: #F43F5E
bgFBBF24background-color: #FBBF24
bg18181Bbackground-color: #18181B
bg27272Abackground-color: #27272A

RGBA Format

Specify color with opacity using bg{R}-{G}-{B}-{A}. A is 0~100 (0.0~1.0).

ClassCSSPreview
bg0-0-0-50background-color: rgba(0,0,0,0.5)
bg0-0-0-30background-color: rgba(0,0,0,0.3)
bg255-255-255-10background-color: rgba(255,255,255,0.1)
bg99-102-241-20background-color: rgba(99,102,241,0.2)

Hover Background Color

Change background on hover with hover-bg{HEX6}.

<!-- Change background color on hover -->
<button class="bg6366F1 hover-bg4F46E5 cFFFFFF py12px px2rem br8px bn cp tall200msease">
  Hover me
</button>

<!-- Card hover effect -->
<div class="bg18181B hover-bg27272A p2rem br8px cp tall200msease">
  Card Content
</div>
hover-bg6366F1
hover-bg34D399
hover-bgF43F5E

Common Colors

bg000000

Black

bgFFFFFF

White

bg6366F1

Indigo

bg34D399

Emerald

bgF43F5E

Rose

bgFBBF24

Amber

bg3B82F6

Blue

bg8B5CF6

Violet

Usage Examples

<!-- Dark card -->
<div class="bg18181B p2rem br8px">
  <h3 class="cFAFAFA">Title</h3>
  <p class="c71717A">Description</p>
</div>

<!-- Semi-transparent overlay -->
<div class="bg0-0-0-50 pf t0 l0 w100p h100vh df jcc aic">
  <div class="bgFFFFFF p3-2rem br12px">Modal Content</div>
</div>

<!-- Hover button -->
<button class="bg6366F1 hover-bg4F46E5 cFFFFFF py8px px16px br8px bn cp">
  Button
</button>
colorborder-coloropacitybackground