AAtomic CSS

color

텍스트 색상을 지정하는 속성입니다. 6자리 HEX 형식과 RGBA 형식 두 가지를 지원합니다. c 접두사 뒤에 색상값을 붙여 사용합니다.

HEX 형식

6자리 HEX 코드를 c 접두사 뒤에 붙입니다. #은 생략합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS미리보기
cFFFFFFcolor: #FFFFFFWhite
c000000color: #000000Black
c333333color: #333333Dark Gray
c6366F1color: #6366F1Indigo
cEF4444color: #EF4444Red
c22C55Ecolor: #22C55EGreen
c3B82F6color: #3B82F6Blue
cFBBF24color: #FBBF24Amber
cA1A1AAcolor: #A1A1AAGray

색상 견본

자주 사용하는 색상의 시각적 비교입니다.

AacFFFFFFWhite
Aac000000Black
Aac333333Dark Gray
Aac6366F1Indigo
AacEF4444Red
Aac22C55EGreen
Aac3B82F6Blue
AacFBBF24Amber

RGBA 형식

투명도가 필요할 때 RGBA 형식을 사용합니다. 형식은 c{R}-{G}-{B}-{A}이며, 알파값은 0~100 범위입니다 (CSS의 0~1이 아님).

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
c255-255-255-100color: rgba(255,255,255,1)흰색 100% 불투명
c255-255-255-50color: rgba(255,255,255,0.5)흰색 50% 투명도
c255-0-0-100color: rgba(255,0,0,1)빨간색 100% 불투명
c255-0-0-50color: rgba(255,0,0,0.5)빨간색 50% 투명도
c0-0-0-80color: rgba(0,0,0,0.8)검정색 80% 불투명
c99-102-241-70color: rgba(99,102,241,0.7)인디고 70% 불투명

알파값 비교 — 흰색 텍스트

c255-255-255-100Hello World
c255-255-255-80Hello World
c255-255-255-50Hello World
c255-255-255-30Hello World
c255-255-255-10Hello World

호버 조합

hover- 접두사를 붙이면 마우스 오버 시 텍스트 색상을 변경할 수 있습니다.

<!-- Change text color on hover -->
<a class="c71717A hover-cFFFFFF tall200msease">
  Turns white on hover
</a>

<!-- Changes to indigo on hover -->
<a class="cA1A1AA hover-c6366F1 tall200msease">
  Turns indigo on hover
</a>

<!-- Navigation link pattern -->
<nav class="df gap2rem">
  <a class="c71717A hover-cFFFFFF tall200msease tdn cp">Home</a>
  <a class="c71717A hover-cFFFFFF tall200msease tdn cp">About</a>
  <a class="c71717A hover-cFFFFFF tall200msease tdn cp">Contact</a>
</nav>

미리보기 — 호버해 보세요

hover-cFFFFFFhover-c6366F1hover-c3B82F6hover-c22C55Ehover-cEF4444

코드 예시

<!-- HEX Text Color -->
<h1 class="cFFFFFF fs3-6rem fw800">White title</h1>
<p class="c71717A fs14px lh1-7">Gray body text</p>
<span class="cEF4444 fw600">Red warning text</span>

<!-- RGBA Text Color -->
<p class="c255-255-255-50 fs14px">50% transparent white text</p>
<p class="c255-0-0-70 fs14px">70% opaque red text</p>

<!-- Hover combination -->
<a class="c71717A hover-c6366F1 tall200msease tdn cp">
  Indigo hover link
</a>

<!-- Background and text color combination -->
<div class="bg6366F1 cFFFFFF p2rem br8px">
  White text on indigo background
</div>
<div class="bg000000 cFBBF24 p2rem br8px">
  Amber text on black background
</div>

팁 & 주의사항

HEX는 반드시 6자리

3자리 축약형(예: cFFF)은 지원하지 않습니다. 반드시 6자리 전체를 입력하세요. 예: cFFFFFF

RGBA 알파값은 0~100

CSS의 rgba()에서는 0~1 사이의 소수를 사용하지만, Atomic CSS에서는 0~100 정수를 사용합니다. 50은 0.5, 100은 1에 해당합니다.

배경색은 bg 접두사

텍스트 색상은 c, 배경색은 bg, 테두리 색상은 bc 접두사를 사용합니다. 혼동하지 않도록 주의하세요.

대소문자 구분

HEX 값은 대문자로 작성합니다. cFFFFFF는 올바르지만, cffffff는 다른 클래스로 인식될 수 있습니다.

background-colorborder-coloropacitytypography