Color

Color By Name

You can just write any CSS valid color name after property, or in place of Color Value.

Here are other example class name definition.

Usage Eg:-

    <h1 class="color-blue font-size-3rem">Hello, World</h1>

Color By Hexadecimal

You can just write any CSS valid hexadecimal value omitting ”#”. AliasCSS is smart enough to know the hexadecimal-value without ’#’ hexadecimal value must be either 3,6 or 8 digit.

Here are other example class name definition.

Usage Eg:-

    <h1 class="color-e3e3e3 bgc-01010e55 font-size-3rem">Hello, World</h1>

Color by function rgb/rgba/hsl/hsla/hwb/hwba

Similarly you can use rgb/rgba/hsl/hsla/hwb/hwba,they all follow same syntax :

Here are other example class name definition.

Usage Eg:-

    <h1 class="color-rgb-255-0-0 bgc-hsl-0-100%-0-0.8 font-size-3rem">
        Hello, World
    </h1>

Color by function lab,oklab,lch, oklch

Similarly you can use rgb/rgba/hsl/hsla/hwb/hwba,they all follow same syntax :

Here are other example class name definition.

Usage Eg:-

    <h1 class="color-rgb-255-255-225 background-color-lch-54.3-106.83-40.85 font-size-3rem">
        Hello, World
    </h1>

Custom Colors

You can extend your color library using aliascss.config.js configuration file . Custom Colors .You can also use custom color provide by default with AliasCSS compiler, please visit Color Reference to know more. AliasCSS also provide some collection of custom color System , which can be used in place of color value out of the box. you can use Radix UI and React Aria Color System which come with auto theming system.

Radix UI Colors

Radix UI use 1-12 token system. We have added Theme token support in radix color system, so you can use both light and dark theme color using same class name.

Visit Radix UI Colors 

React Aria Colors

React Aria use a color system which 0s used their vanilla CSS examples, which is based on 100-1600 token system, we have added Theme token to support in React Aria Example color system, so you can use both light and dark theme.

Visit React Aria Colors 

Usage Eg:-

    <h1 class="color-primary200 background-color-primary800 font-size-3rem">
        Hello, World
    </h1>

Alpha Value:

You can also modify alpha value providing alpha value after the color separating by ’/’. Use can only use this method in color by name , color by hexadecimal, css-variables and custom colors . you cannot use it in color function like rgb/hwb/hsl etc. The color will be processed in oklch color space build the color from given color and modifying alpha alpha channel. you can provide value from 0-9 representing to 0-0.9

Usage Eg:-

    <h1 class="color-primary200/6 background-color-blue/3 font-size-3rem">
        Hello, World
    </h1>

Note

    <h1 
    class="color--fg1-custom-color background--bg1-custom-color font-size-3rem" 
    style="
    --fg1-custom-color:color-mix(in srgb, red, white 20%);
    --bg1-custom-color:hsl(from var(--primary) h s calc(l - 20%));
    "
    >
        Hello, World
    </h1>