Color

AliasCSS provides a flexible color syntax that works across plain CSS color names, hexadecimal values, color functions, CSS variables, custom colors, and token-based color systems. The goal is to let developers express color in class names without losing access to modern CSS color features.

Color by name

You can write any valid CSS color name after the property name, or in place of a color value inside compound properties.

Examples

Usage

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

This syntax is the easiest starting point because it stays close to regular CSS naming while still fitting the AliasCSS class model.

Color by hexadecimal

You can also use hexadecimal values without writing the leading #. AliasCSS detects the value and compiles it as a hex color.

Hex values must be 3, 6, or 8 digits.

Examples

Usage

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

The 8-digit form is especially useful when you want alpha directly in the hex value.

Color by function: rgb, rgba, hsl, hsla, hwb, hwba

AliasCSS also supports common CSS color functions by encoding the function name and arguments into the class name.

Examples

Usage

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

This form is useful when you want precision or want to pass CSS variables into color functions.

Color by function: lab, oklab, lch, oklch

AliasCSS also supports perceptual color spaces such as lab, oklab, lch, and oklch, which are increasingly useful for modern design systems and token workflows.

Examples

Usage

<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 the available color library through aliascss.config.js. This is the recommended approach when your project has design tokens, brand colors, semantic UI colors, or theme variables.

const config = {
  custom: {
    colors: {
      themeTextColor: 'var(--theme-text-color,#c3c3c3)',
      themeBgcolor: 'var(--theme-bg-color,#0e0e0e)',
      primary: 'rgba(124,143,234,1)',
    },
  },
}
 
export default config

It is safest to use camelCase for custom color names. The AliasCSS npm guide notes that using - or _ in custom color keys may cause errors.

You can read more in the advanced customization docs section for custom colors.

Built-in color systems

AliasCSS can also work with predefined tokenized color systems, which is useful when you want a consistent scale-based naming model instead of raw values. Primary Color System , ---this color system is desgned at untitled.com UI Kit

Radix UI colors

Radix Colors is an open-source, accessible color system designed for UI work. It provides 12-step color scales, matching alpha variants, automatic dark mode support, and guidance for backgrounds, borders, solid fills, and accessible text.

Visit Radix UI Colors 

Radix documents that each scale has twelve steps, each scale includes transparent variants, and dark mode can be switched by applying a class to a container.

React Aria example colors

React Aria itself is style-free by default and is meant to work with any styling system. AliasCSS can expose a React Aria-inspired token system so you can use scale-based color utilities inside a headless component workflow.

Visit React Aria 

Usage

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

Alpha values with /

You can also apply alpha by appending /value after a color token. This works with color names, hex values, CSS variables, and custom colors.

It does not apply to function-style colors such as rgb(...), hsl(...), or hwb(...), because those formats already carry their own function-based syntax.

AliasCSS processes this by converting the color through oklch and adjusting the alpha channel.

Examples

Usage

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

This is especially handy for overlays, muted text, translucent borders, and token-based UI states.

CSS variables for complex colors

For advanced cases, CSS variables are still the best escape hatch. This is useful when you need color-mix(), relative color syntax, or custom computed values that would be too complex to express directly in an AliasCSS class.

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

Guidance

A practical way to think about color in AliasCSS is:

• Use named colors for quick prototyping.
• Use hex values for direct palette work.
• Use color functions when precision matters.
• Use oklch and tokens for design-system work.
• Use custom colors for project-level semantics.
• Use /alpha for quick opacity control on token-based colors.
• Use CSS variables when the color logic becomes too dynamic for inline class syntax.

This progression keeps the API easy for beginners while still giving advanced teams access to modern color work