---
metaTitle: Built-in Colors | AwesCode UI
meta:
  - name: description
    content: Complete list of built-in colors available in AwesCode UI components.
title: Built-in Colors
---

# Built-in Colors

AwesCode UI provides a comprehensive color system including semantic colors, mono scale, and named colors for use across all components.

## Color Categories

### Semantic Colors

Semantic colors convey meaning and should be used according to their intended purpose:

| Color | Purpose | Use Cases |
|-------|---------|-----------|
| `accent` | Primary brand color | Primary actions, highlights, brand elements |
| `success` | Positive outcomes | Success messages, completed states, confirmations |
| `info` | Informational content | Help text, tips, neutral notifications |
| `notify` | Notifications | Alerts, announcements, attention-grabbing elements |
| `warning` | Cautionary states | Warnings, pending actions, important notes |
| `error` | Error states | Error messages, validation failures, critical issues |

### Mono Scale

Grayscale colors from lightest to darkest, useful for backgrounds, borders, and text:

| Color | Lightness | Common Uses |
|-------|-----------|-------------|
| `mono-0` | Lightest (white) | Backgrounds, cards |
| `mono-50` | Very light gray | Subtle backgrounds |
| `mono-100` | Light gray | Hover states, disabled backgrounds |
| `mono-200` | Light-medium gray | Borders, dividers |
| `mono-300` | Medium-light gray | Subtle borders |
| `mono-400` | Medium gray | Placeholder text |
| `mono-500` | Neutral gray | Secondary text |
| `mono-600` | Medium-dark gray | Body text |
| `mono-700` | Dark gray | Headings |
| `mono-800` | Darker gray | Emphasized text |
| `mono-900` | Darkest (black) | Primary text, strong emphasis |

### Named Colors

Additional colors for specific design needs:

| Color | Description |
|-------|-------------|
| `red` | Standard red |
| `peach` | Soft peachy orange |
| `yellow` | Bright yellow |
| `magenta` | Vibrant magenta/pink |
| `purple` | Standard purple |
| `light-blue` | Light blue shade |
| `blue` | Standard blue |
| `green` | Standard green |
| `lime` | Bright lime green |
| `grey` | Standard gray |
| `light-grey` | Light gray variant |
| `black` | Pure black |
| `forest` | Deep forest green |
| `brown` | Earthy brown |

## Usage Examples

### In Components with Color Prop

```markup
<!-- AwLink -->
<AwLink href="/page" color="accent">Accent Link</AwLink>
<AwLink href="/page" color="success">Success Link</AwLink>
<AwLink href="/page" color="error">Error Link</AwLink>

<!-- AwLabel -->
<AwLabel label="Active" color="success" />
<AwLabel label="Pending" color="warning" />
<AwLabel label="Error" color="error" />

<!-- AwButton -->
<AwButton color="accent">Primary Action</AwButton>
<AwButton color="success">Confirm</AwButton>
<AwButton color="error">Delete</AwButton>
```

### With Text Utilities

```markup
<!-- Using semantic colors -->
<span class="text-success">Success message</span>
<span class="text-error">Error message</span>
<span class="text-warning">Warning message</span>

<!-- Using mono scale -->
<span class="text-mono-600">Body text</span>
<span class="text-mono-400">Placeholder text</span>
```

### With Background Utilities

```markup
<!-- Semantic backgrounds -->
<div class="bg-success">Success background</div>
<div class="bg-warning">Warning background</div>

<!-- Mono backgrounds -->
<div class="bg-mono-0">White background</div>
<div class="bg-mono-100">Light gray background</div>
```

## Design Guidelines

### Semantic Color Usage

- **accent**: Use for primary calls-to-action, active states, and brand elements
- **success**: Confirmations, completed tasks, positive status indicators
- **info**: Neutral information, help text, general notifications
- **notify**: Important announcements, new features, attention-needed items
- **warning**: Cautions, pending reviews, items requiring attention
- **error**: Errors, validation failures, destructive actions

### Mono Scale Usage

- **Text**: Use mono-600 to mono-900 for readable text
- **Borders**: Use mono-200 to mono-400 for subtle borders
- **Backgrounds**: Use mono-0 to mono-200 for backgrounds
- **Disabled States**: Use mono-100 to mono-300 for disabled elements

### Accessibility

- Ensure sufficient contrast between text and background colors
- Semantic colors (success, error, warning) should be paired with icons or text for colorblind users
- Use mono-600 or darker for body text to meet WCAG AA standards
- Avoid using color as the only means of conveying information

## Color System Architecture

### Paired Colors (Color + OnColor)

AwesCode UI uses a **paired color system** where every background color has a corresponding foreground color optimized for contrast and readability. This ensures text and icons remain readable on any background.

#### How Paired Colors Work

Each color in the system has two variants:
- **Background color** - Used for backgrounds, fills, and surfaces
- **OnColor** - The contrasting foreground color for text and icons on that background

For example:
- `accent` background (#56af40 green) → `on-accent` foreground (#fff white)
- `error` background (#FF4931 red) → `on-error` foreground (#fff white)
- `mono-900` background (#f3f5f7 light gray) → `on-mono-900` foreground (#14171d dark)

#### Named Color Backgrounds

Named colors have special light/dark background variants for use in surfaces:
- **Light backgrounds** (CUSTOM_COLORS_BG_LIGHT) - Soft, pastel versions for light mode
- **Dark backgrounds** (CUSTOM_COLORS_BG_DARK) - Muted, darker versions for dark mode
- **OnColor** - The original vibrant color used for text/icons on the backgrounds

Example for `red`:
- Background in light mode: `#fed9d9` (soft pink)
- Background in dark mode: `#583433` (dark red)
- OnColor: `#fa0000` (bright red for text/icons)

### Color Utility Functions

#### `toColor(color)`

Converts a color name to a CSS custom property reference. Used for background colors.

```javascript
toColor('accent')      // → 'var(--c-accent)'
toColor('mono-600')    // → 'var(--c-mono-600)'
toColor('#fa0000')     // → '#fa0000' (CSS colors passed through)
```

**Behavior:**
- If the input is a CSS color (hex, rgb, rgba, hsl, hsla), returns it as-is
- Otherwise, converts to CSS custom property format: `var(--c-{color})`
- Color names are automatically lowercased

#### `toOnColor(color)`

Converts a color name to its paired foreground color. Used for text and icons.

```javascript
toOnColor('accent')     // → 'var(--c-on-accent)'
toOnColor('error')      // → 'var(--c-on-error)'
toOnColor('on-success') // → 'var(--c-on-success)' (strips 'on-' prefix)
toOnColor('#fa0000')    // → '#fa0000' (CSS colors passed through)
```

**Behavior:**
- If the input starts with `#`, returns it as-is (CSS color)
- Strips any `on-` prefix from the color name
- Converts to CSS custom property format: `var(--c-on-{color})`
- Automatically ensures proper contrast for accessibility

#### Usage in Components

Components use these utilities to maintain paired colors:

```vue
<template>
  <div :style="{
    backgroundColor: toColor(color),
    color: toOnColor(color)
  }">
    Content with proper contrast
  </div>
</template>
```

### Theme Support

The color system supports light and dark themes:
- **Light theme** (default) - Uses bright backgrounds with dark text
- **Dark theme** - Uses dark backgrounds with light text
- All paired colors automatically adapt to the active theme
- Custom properties ensure consistency across theme switches

## Notes

- All colors support CSS custom property fallbacks
- Color names are case-insensitive in component props
- Semantic colors adapt to light/dark theme modes
- The mono scale provides consistent grayscale values across the system
- Named colors are fixed but their background variants change with themes
- Always use paired colors (color + onColor) for accessible contrast
- The `toOnColor` utility automatically provides the correct foreground color