색상

Atomic CSS는 색상 값을 클래스명에 직접 사용합니다. 미리 정의된 팔레트 없이 원하는 색상을 바로 적용하세요.

HEX 색상 (6자리)

프리픽스	속성	예시	CSS
`c`	color	`cFFFFFF`	color: #FFFFFF
`c`	color	`c333333`	color: #333333
`bg`	background-color	`bgFFFFFF`	background-color: #FFFFFF
`bg`	background-color	`bg000000`	background-color: #000000
`bc`	border-color	`bcDDDDDD`	border-color: #DDDDDD

<div class="bg1a1a2e cFFFFFF p2rem br8px">
  <p class="c71717a">어두운 배경에 밝은 텍스트</p>
</div>

RGBA 색상

형식: 프리픽스{R}-{G}-{B}-{A} (A: 0~100)

클래스	CSS	설명
`c255-0-0-100`	rgba(255,0,0,1)	빨강 100% 불투명
`bg0-0-0-50`	rgba(0,0,0,0.5)	검정 50% 투명
`bg255-255-255-80`	rgba(255,255,255,0.8)	흰색 80% 불투명
`bc0-0-0-20`	rgba(0,0,0,0.2)	테두리 검정 20%

투명도 (Opacity)

클래스	CSS
`o0`	opacity: 0
`o20`	opacity: 0.2
`o50`	opacity: 0.5
`o80`	opacity: 0.8
`o100`	opacity: 1

의사 클래스와 조합

<!-- 호버 시 색상 변경 -->
<button class="bg6366f1 hover-bg4f46e5 cFFFFFF tall200msease cp">
  버튼
</button>

<!-- 링크 호버 -->
<a class="c6366f1 hover-c818cf8 tdn">링크</a>

<!-- 반응형 색상 -->
<p class="c333333 sm-cFFFFFF">반응형 텍스트</p>