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

Stacking Alpha

The same indigo base with black overlays that differ only in alpha. The alpha part of a class name is an integer from 0 to 100, so 50 means 0.5.

bg0-0-0-30
bg0-0-0-50
bg0-0-0-70
bg0-0-0-80

The higher the alpha, the less the color underneath shows through. Overlays, dimming, and subtle surface tints all use this same mechanic.

Covering with a translucent background

Text on the overlay

Only the background color is translucent. Text placed on top stays fully crisp.

The element without an overlay

The same text

For contrast: opacity would fade the background and the text together. For dimming, use a translucent background color.

Per-class Detail

bg6366F1background-color: #6366F1

Takes a 6-digit HEX value straight into the class name for an opaque background. Pick one letter case and stay consistent rather than mixing.

When to use

Use it wherever the color is decided: buttons, badges, card surfaces. If you have design tokens, copy their values directly into the class names.

<!-- Solid surfaces built from the HEX pattern -->
<div class="bg09090B p2rem">
  <div class="bg18181B b1pxsolid27272A br12px p2rem">
    <span class="bg6366F1 cFFFFFF py4px px8px br4px fs12px">Primary</span>
  </div>
</div>

bg0-0-0-50background-color: rgba(0,0,0,0.5)

Joins R, G, B, and A with hyphens for a translucent background. A is an integer from 0 to 100 and reads like a percentage.

When to use

Use it where the background underneath must show through: dim layers behind modals, caption bars over images, slightly lighter rows on a dark surface.

<!-- Alpha values carry the A as 0 to 100 -->
<div class="pf t0 l0 w100p h100vh bg0-0-0-50 df jcc aic">
  <div class="bg0F0F17 b1pxsolid27272A br12px p3-2rem">Modal</div>
</div>

<!-- Subtle tint on top of a dark surface -->
<div class="bg255-255-255-10 br8px p16px cFAFAFA">Raised row</div>

hover-bg27272Abackground-color on hover

Sets the background color applied on hover. It only makes sense together with a base background color class.

When to use

Use it for feedback on buttons and clickable rows. Pair it with a transition class so the color does not snap.

<!-- Base color plus the hover variant, with a transition -->
<button class="bg18181B hover-bg27272A cFAFAFA py8px px16px br8px bn cp tall200msease">
  Secondary action
</button>

Usage Examples

The basic forms for cards, overlays, and buttons.

<!-- 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>

Status banners: translucent tints for surfaces and solid colors for badges, keeping the contrast readable.

<!-- Status banners: surface tint, solid badge, readable text -->
<div class="df fdc gap12px">

  <div class="bg99-102-241-20 b1pxsolid27272A br8px p16px df aic gap12px">
    <span class="bg6366F1 cFFFFFF py2px px8px br4px fs12px fw600">Info</span>
    <p class="fs14px cFAFAFA">A new version is available.</p>
  </div>

  <div class="bg255-255-255-10 b1pxsolid27272A br8px p16px df aic gap12px">
    <span class="bg34D399 c000000 py2px px8px br4px fs12px fw600">Done</span>
    <p class="fs14px cFAFAFA">Your export finished.</p>
  </div>

  <div class="bg255-255-255-10 b1pxsolid27272A br8px p16px df aic gap12px">
    <span class="bgF43F5E cFFFFFF py2px px8px br4px fs12px fw600">Error</span>
    <p class="fs14px cFAFAFA">We could not reach the server.</p>
  </div>
</div>

Tips & Notes

The background shorthand overwrites the color

The background shorthand resets every background related value you do not list. Combined with background images or gradients in the wrong order, your background color can silently disappear.

Alpha runs from 0 to 100

CSS writes 0.5, but the class name uses the integer 50, as in bg0-0-0-50. A decimal point in the class name produces no rule at all.

Do not confuse it with opacity

opacity fades the element and every child inside it. When only the background should be translucent while the text stays crisp, a translucent background color is the only correct tool.

Check the contrast

Text over a translucent background changes contrast with whatever sits underneath. If that is a photo or video, choose the alpha for the worst case and keep body text at a contrast ratio of at least 4.5 to 1.

colorborder-coloropacitybackgroundcolor-schemebox-shadow