color
Sets text color. Supports 6-digit HEX and RGBA. Append color value after c prefix.
HEX Format
Append 6-digit HEX after c. Omit #.
| Class | CSS | Preview |
|---|---|---|
cFFFFFF | color: #FFFFFF | White |
c000000 | color: #000000 | Black |
c333333 | color: #333333 | Dark Gray |
c6366F1 | color: #6366F1 | Indigo |
cEF4444 | color: #EF4444 | Red |
c22C55E | color: #22C55E | Green |
c3B82F6 | color: #3B82F6 | Blue |
cFBBF24 | color: #FBBF24 | Amber |
cA1A1AA | color: #A1A1AA | Gray |
Color Swatches
Visual comparison of common colors.
Aa
cFFFFFFWhiteAa
c000000BlackAa
c333333Dark GrayAa
c6366F1IndigoAa
cEF4444RedAa
c22C55EGreenAa
c3B82F6BlueAa
cFBBF24AmberRGBA Format
Use RGBA for opacity. Format: c{R}-{G}-{B}-{A}. Alpha 0~100 (not CSS 0~1).
| Class | CSS | Description |
|---|---|---|
c255-255-255-100 | color: rgba(255,255,255,1) | White 100% opaque |
c255-255-255-50 | color: rgba(255,255,255,0.5) | White 50% opacity |
c255-0-0-100 | color: rgba(255,0,0,1) | Red 100% opaque |
c255-0-0-50 | color: rgba(255,0,0,0.5) | Red 50% opacity |
c0-0-0-80 | color: rgba(0,0,0,0.8) | Black 80% opaque |
c99-102-241-70 | color: rgba(99,102,241,0.7) | Indigo 70% opaque |
Alpha comparison — white text
c255-255-255-100Hello Worldc255-255-255-80Hello Worldc255-255-255-50Hello Worldc255-255-255-30Hello Worldc255-255-255-10Hello WorldHover Combinations
Add hover- prefix to change text color on 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>Preview — try hovering
Code Examples
<!-- 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>Tips & Notes
HEX must be 6 digits
3-digit shorthand (e.g., cFFF) not supported. Use full 6 digits: cFFFFFF
RGBA alpha is 0~100
CSS rgba() uses 0~1; Atomic CSS uses 0~100 integers. 50=0.5, 100=1.
Use bg prefix for background
Text = c, background = bg, border = bc. Do not confuse.
Case sensitive
Write HEX uppercase. cFFFFFF correct; cffffff may be different class.