Appearance

Color

Style syntax for setting foreground color of an element.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
color:color / foreground:color / fg:colorcolor: color
fg:currentcolor: currentColor
fg:transparentcolor: transparent
fg:#hexcolor: #hex
fg:rgb(rgb)color: rgb(rgb)
fg:hsl(hsl)color: hsl(hsl)

Basic usage

Color tokens

Change the text color of an element using the preset color variables.

Aa
<div class="fg:blue-55">Aa</div>

HEX

Change the text color of an element using HEX color code.

Aa
<p class="fg:
#175fe9
"
>
Aa</p>

RGB

Change the text color of an element using RGB color code.

Aa
<p class="fg:rgb(23,95,233)">Aa</p>

HSL

Change the text color of an element using HSL color code.

Aa
<p class="fg:hsl(219|83%|50%)">Aa</p>

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="fg:slate-10:hover fg:slate-10@sm fg:slate-10@dark fg:slate-10@print"></div>
PREVIOUS
Caret Color

Style syntax for setting the color of the cursor in text input.

NEXT
Cursor

Style syntax for setting the mouse cursor style.

MIT License © Aoyue Design LLC.