AAtomic CSS

background-color

요소의 배경색을 설정합니다. HEX 6자리와 RGBA 형식을 지원하며, hover- 프리픽스로 호버 시 배경색 변경도 가능합니다.

HEX 형식

bg{HEX6} 패턴으로 6자리 HEX 색상을 지정합니다.

클래스CSS미리보기
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 형식

bg{R}-{G}-{B}-{A} 패턴으로 투명도를 포함한 색상을 지정합니다. A는 0~100 (0.0~1.0).

클래스CSS미리보기
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-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

자주 쓰는 색상

bg000000

Black

bgFFFFFF

White

bg6366F1

Indigo

bg34D399

Emerald

bgF43F5E

Rose

bgFBBF24

Amber

bg3B82F6

Blue

bg8B5CF6

Violet

투명도 겹치기

같은 인디고 바탕 위에 알파값만 다른 검정을 얹었습니다. 알파 표기는 0에서 100 사이의 정수이며, 50이 곧 0.5입니다.

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

알파값이 커질수록 아래 색이 덜 비칩니다. 오버레이, 딤 처리, 은은한 표면 강조에 모두 같은 원리를 씁니다.

반투명 배경으로 덮기

오버레이 위의 글자

배경색만 반투명합니다. 위에 올린 글자는 또렷하게 남습니다.

요소 전체를 투명하게

같은 글자

참고로 opacity를 쓰면 배경과 글자가 함께 흐려집니다. 딤 처리에는 반투명 배경색을 쓰세요.

클래스별 상세

bg6366F1background-color: #6366F1

6자리 HEX를 그대로 클래스 이름에 붙여 불투명한 배경색을 지정합니다. 대문자와 소문자를 섞지 말고 한 가지로 통일하는 편이 좋습니다.

언제 쓰나

버튼, 배지, 카드 표면처럼 색이 확실히 정해진 요소에 씁니다. 디자인 토큰이 있다면 그 값을 그대로 클래스명으로 옮기면 됩니다.

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

R, G, B, A를 하이픈으로 이어 붙여 반투명 배경색을 지정합니다. A는 0에서 100 사이의 정수로 백분율처럼 읽습니다.

언제 쓰나

모달 뒤 딤 레이어, 이미지 위 캡션 바, 어두운 표면 위 살짝 밝은 행처럼 아래 배경이 비쳐야 하는 곳에 씁니다.

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

마우스를 올렸을 때 적용할 배경색을 지정합니다. 기본 상태의 배경색 클래스와 함께 써야 의미가 있습니다.

언제 쓰나

버튼과 클릭 가능한 행의 피드백에 씁니다. 색이 갑자기 바뀌지 않도록 전환 클래스를 함께 주는 것이 좋습니다.

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

사용 예시

카드, 오버레이, 버튼의 기본 형태입니다.

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

팁 & 주의사항

background 단축 속성이 배경색을 덮어씁니다

background 단축 속성은 지정하지 않은 배경 관련 값들을 초기화합니다. 배경 이미지나 그라디언트와 함께 쓸 때 순서가 꼬이면 배경색이 사라질 수 있습니다.

알파는 0에서 100입니다

CSS에서는 0.5로 쓰지만 클래스명에서는 bg0-0-0-50처럼 정수 50으로 씁니다. 소수점을 그대로 쓰면 클래스가 만들어지지 않습니다.

opacity와 헷갈리지 마세요

opacity는 요소와 그 자식 전체를 흐리게 만듭니다. 배경만 반투명하게 하고 글자는 또렷하게 남기고 싶다면 반드시 반투명 배경색을 쓰세요.

대비를 확인하세요

반투명 배경 위의 글자는 아래 배경에 따라 대비가 달라집니다. 배경이 사진이나 동영상이라면 최악의 경우를 기준으로 알파값을 정하고, 본문 대비는 최소 4.5대 1을 확보하세요.

colorborder-coloropacitybackgroundcolor-schemebox-shadow