color

Atomic CSS uses color values directly in class names. Apply any color without predefined palettes.

HEX Color (6-digit)

Prefix	Property	Example	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
`olc`	outline-color	`olcFF0000`	outline-color: #FF0000
`ac`	accent-color	`ac6366F1`	accent-color: #6366F1
`tdc`	text-decoration-color	`tdcFF0000`	text-decoration-color: #FF0000
`sc`	scrollbar-color	`sc888888`	scrollbar-color: #888888 auto

<div class="bg1a1a2e cFFFFFF p2rem br8px">
  <p class="c71717a">Light text on dark background</p>
</div>

RGBA color

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

Class	CSS	Description
`c255-0-0-100`	rgba(255,0,0,1)	Red 100% opaque
`bg0-0-0-50`	rgba(0,0,0,0.5)	Black 50% transparent
`bg255-255-255-80`	rgba(255,255,255,0.8)	White 80% opaque
`bc0-0-0-20`	rgba(0,0,0,0.2)	Border black 20%

opacity (Opacity)

Class	CSS
`o0`	opacity: 0
`o20`	opacity: 0.2
`o50`	opacity: 0.5
`o80`	opacity: 0.8
`o100`	opacity: 1

Pseudo-class Combinations

<!-- 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>