색상

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

HEX 색상 (6자리)

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">프리픽스	속성	예시	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">Light text on dark background</p>
</div>

RGBA 색상

Format: prefix{R}-{G}-{B}-{A} (A: 0~100)

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	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)

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS
`o0`	opacity: 0
`o20`	opacity: 0.2
`o50`	opacity: 0.5
`o80`	opacity: 0.8
`o100`	opacity: 1

의사 클래스와 조합

<!-- Change color on hover -->
<button class="bg6366f1 hover-bg4f46e5 cFFFFFF tall200msease cp">
  Button
</button>

<!-- Link hover -->
<a class="c6366f1 hover-c818cf8 tdn">Link</a>

<!-- Responsive Color -->
<p class="c333333 sm-cFFFFFF">Responsive Text</p>