AAtomic CSS

color

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

HEX 형식

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

클래스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이 아님).

클래스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- 접두사를 붙이면 마우스 오버 시 텍스트 색상을 변경할 수 있습니다.

<!-- 호버 시 텍스트 색상 변경 -->
<a class="c71717A hover-cFFFFFF tall200msease">
  마우스를 올리면 흰색으로
</a>

<!-- 호버 시 인디고로 변경 -->
<a class="cA1A1AA hover-c6366F1 tall200msease">
  마우스를 올리면 인디고로
</a>

<!-- 네비게이션 링크 패턴 -->
<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 텍스트 색상 -->
<h1 class="cFFFFFF fs3-6rem fw800">흰색 제목</h1>
<p class="c71717A fs14px lh1-7">회색 본문 텍스트</p>
<span class="cEF4444 fw600">빨간색 경고 텍스트</span>

<!-- RGBA 텍스트 색상 -->
<p class="c255-255-255-50 fs14px">50% 투명 흰색 텍스트</p>
<p class="c255-0-0-70 fs14px">70% 불투명 빨간색 텍스트</p>

<!-- 호버 조합 -->
<a class="c71717A hover-c6366F1 tall200msease tdn cp">
  인디고 호버 링크
</a>

<!-- 배경과 텍스트 색상 조합 -->
<div class="bg6366F1 cFFFFFF p2rem br8px">
  인디고 배경에 흰색 텍스트
</div>
<div class="bg000000 cFBBF24 p2rem br8px">
  검정 배경에 앰버 텍스트
</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