# OutSystems UI — Color Reference

Complete color palette from the OutSystems UI Cheat Sheet. Use `.background-{name}` for background colors and `.text-{name}` for text colors. CSS variables follow the `--color-{name}` pattern.

## Brand Colors

| Name | Hex | Background Class | Text Class | CSS Variable |
|------|-----|-----------------|------------|--------------|
| Primary | #1068EB | `.background-primary` | `.text-primary` | `--color-primary` |
| Secondary | #303D60 | `.background-secondary` | `.text-secondary` | `--color-secondary` |

## Semantic Colors

| Name | Background Class | Text Class | CSS Variable |
|------|-----------------|------------|--------------|
| Info | `.background-info` | `.text-info` | `--color-info` |
| Success | `.background-success` | `.text-success` | `--color-success` |
| Warning | `.background-warning` | `.text-warning` | `--color-warning` |
| Error | `.background-error` | `.text-error` | `--color-error` |

## Extended Palette

Each color has shades 0 (lightest) through 9 (darkest). Use CSS variable `--color-{color}-{shade}`.

### Red

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-red-0` | #FFF5F5 |
| 1 | `--color-red-1` | #FFE3E3 |
| 2 | `--color-red-2` | #FFC9C9 |
| 3 | `--color-red-3` | #FFA8A8 |
| 4 | `--color-red-4` | #FF8787 |
| 5 | `--color-red-5` | #FF6B6B |
| 6 | `--color-red-6` | #FA5252 |
| 7 | `--color-red-7` | #F03E3E |
| 8 | `--color-red-8` | #E03131 |
| 9 | `--color-red-9` | #C92A2A |

### Orange

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-orange-0` | #FFF4E6 |
| 1 | `--color-orange-1` | #FFE8CC |
| 2 | `--color-orange-2` | #FFD8A8 |
| 3 | `--color-orange-3` | #FFC078 |
| 4 | `--color-orange-4` | #FFA94D |
| 5 | `--color-orange-5` | #FF922B |
| 6 | `--color-orange-6` | #FD7E14 |
| 7 | `--color-orange-7` | #F76707 |
| 8 | `--color-orange-8` | #E8590C |
| 9 | `--color-orange-9` | #D9480F |

### Yellow

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-yellow-0` | #FFF9DB |
| 1 | `--color-yellow-1` | #FFF3BF |
| 2 | `--color-yellow-2` | #FFEC99 |
| 3 | `--color-yellow-3` | #FFE066 |
| 4 | `--color-yellow-4` | #FFD43B |
| 5 | `--color-yellow-5` | #FCC419 |
| 6 | `--color-yellow-6` | #FAB005 |
| 7 | `--color-yellow-7` | #F59F00 |
| 8 | `--color-yellow-8` | #F08C00 |
| 9 | `--color-yellow-9` | #E67700 |

### Lime

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-lime-0` | #F4FCE3 |
| 1 | `--color-lime-1` | #E9FAC8 |
| 2 | `--color-lime-2` | #D8F5A2 |
| 3 | `--color-lime-3` | #C0EB75 |
| 4 | `--color-lime-4` | #A9E34B |
| 5 | `--color-lime-5` | #94D82D |
| 6 | `--color-lime-6` | #82C91E |
| 7 | `--color-lime-7` | #74B816 |
| 8 | `--color-lime-8` | #66A80F |
| 9 | `--color-lime-9` | #5C940D |

### Green

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-green-0` | #EBFBEE |
| 1 | `--color-green-1` | #D3F9D8 |
| 2 | `--color-green-2` | #B2F2BB |
| 3 | `--color-green-3` | #8CE99A |
| 4 | `--color-green-4` | #69DB7C |
| 5 | `--color-green-5` | #51CF66 |
| 6 | `--color-green-6` | #40C057 |
| 7 | `--color-green-7` | #37B24D |
| 8 | `--color-green-8` | #2F9E44 |
| 9 | `--color-green-9` | #2B8A3E |

### Teal

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-teal-0` | #E6FCF5 |
| 1 | `--color-teal-1` | #C3FAE8 |
| 2 | `--color-teal-2` | #96F2D7 |
| 3 | `--color-teal-3` | #63E6BE |
| 4 | `--color-teal-4` | #38D9A9 |
| 5 | `--color-teal-5` | #20C997 |
| 6 | `--color-teal-6` | #12B886 |
| 7 | `--color-teal-7` | #0CA678 |
| 8 | `--color-teal-8` | #099268 |
| 9 | `--color-teal-9` | #087F5B |

### Cyan

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-cyan-0` | #E3FAFC |
| 1 | `--color-cyan-1` | #C5F6FA |
| 2 | `--color-cyan-2` | #99E9F2 |
| 3 | `--color-cyan-3` | #66D9E8 |
| 4 | `--color-cyan-4` | #3BC9DB |
| 5 | `--color-cyan-5` | #22B8CF |
| 6 | `--color-cyan-6` | #15AABF |
| 7 | `--color-cyan-7` | #1098AD |
| 8 | `--color-cyan-8` | #0C8599 |
| 9 | `--color-cyan-9` | #0B7285 |

### Blue

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-blue-0` | #E7F5FF |
| 1 | `--color-blue-1` | #D0EBFF |
| 2 | `--color-blue-2` | #A5D8FF |
| 3 | `--color-blue-3` | #74C0FC |
| 4 | `--color-blue-4` | #4DABF7 |
| 5 | `--color-blue-5` | #339AF0 |
| 6 | `--color-blue-6` | #228BE6 |
| 7 | `--color-blue-7` | #1C7ED6 |
| 8 | `--color-blue-8` | #1971C2 |
| 9 | `--color-blue-9` | #1864AB |

### Indigo

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-indigo-0` | #EDF2FF |
| 1 | `--color-indigo-1` | #DBE4FF |
| 2 | `--color-indigo-2` | #BAC8FF |
| 3 | `--color-indigo-3` | #91A7FF |
| 4 | `--color-indigo-4` | #748FFC |
| 5 | `--color-indigo-5` | #5C7CFA |
| 6 | `--color-indigo-6` | #4C6EF5 |
| 7 | `--color-indigo-7` | #4263EB |
| 8 | `--color-indigo-8` | #3B5BDB |
| 9 | `--color-indigo-9` | #364FC7 |

### Violet

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-violet-0` | #F3F0FF |
| 1 | `--color-violet-1` | #E5DBFF |
| 2 | `--color-violet-2` | #D0BFFF |
| 3 | `--color-violet-3` | #B197FC |
| 4 | `--color-violet-4` | #9775FA |
| 5 | `--color-violet-5` | #845EF7 |
| 6 | `--color-violet-6` | #7950F2 |
| 7 | `--color-violet-7` | #7048E8 |
| 8 | `--color-violet-8` | #6741D9 |
| 9 | `--color-violet-9` | #5F3DC4 |

### Grape

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-grape-0` | #F8F0FC |
| 1 | `--color-grape-1` | #F3D9FA |
| 2 | `--color-grape-2` | #EEBEFA |
| 3 | `--color-grape-3` | #E599F7 |
| 4 | `--color-grape-4` | #DA77F2 |
| 5 | `--color-grape-5` | #CC5DE8 |
| 6 | `--color-grape-6` | #BE4BDB |
| 7 | `--color-grape-7` | #AE3EC9 |
| 8 | `--color-grape-8` | #9C36B5 |
| 9 | `--color-grape-9` | #862E9C |

### Pink

| Shade | CSS Variable | Hex |
|-------|-------------|-----|
| 0 | `--color-pink-0` | #FFF0F6 |
| 1 | `--color-pink-1` | #FFDEEB |
| 2 | `--color-pink-2` | #FCC2D7 |
| 3 | `--color-pink-3` | #FAA2C1 |
| 4 | `--color-pink-4` | #F783AC |
| 5 | `--color-pink-5` | #F06595 |
| 6 | `--color-pink-6` | #E64980 |
| 7 | `--color-pink-7` | #D6336C |
| 8 | `--color-pink-8` | #C2255C |
| 9 | `--color-pink-9` | #A61E4D |

## Neutral Palette

Used for text, borders, backgrounds, and shadows.

| Shade | CSS Variable | Description |
|-------|-------------|-------------|
| 0 | `--color-neutral-0` | White / lightest background |
| 1 | `--color-neutral-1` | Very light background |
| 2 | `--color-neutral-2` | Light background / hover |
| 3 | `--color-neutral-3` | Border light |
| 4 | `--color-neutral-4` | Border / divider |
| 5 | `--color-neutral-5` | Placeholder text |
| 6 | `--color-neutral-6` | Subtle text |
| 7 | `--color-neutral-7` | Secondary text |
| 8 | `--color-neutral-8` | Primary text |
| 9 | `--color-neutral-9` | Heading text |
| 10 | `--color-neutral-10` | Darkest / near-black |

## Global CSS Variables (Colors)

These variables are defined at the `:root` level of the OSUI theme:

```css
--color-primary: #1068EB;
--color-secondary: #303D60;
--color-background-body: var(--color-neutral-0);
--color-background-login: var(--color-neutral-1);
--color-neutral-0: #FFFFFF;
--color-neutral-10: #1A1A2E;
--color-focus-outer: #FFD337;
--color-focus-inner: var(--color-neutral-10);
```

## Granular Color Variables (v2.27+)

Since v2.27.0 OSUI also exposes granular tokens for background, text, and border colors. Every color utility resolves through the granular variable first, falling back to the legacy `--color-*` token:

```css
.background-neutral-0 { background-color: var(--background-color-neutral-0, var(--color-neutral-0)); }
.text-neutral-0       { color: var(--text-color-neutral-0, var(--color-neutral-0)); }
```

Override either level in `theme.css`:

```css
:root {
  /* Legacy — works everywhere, including v2.26 and earlier */
  --color-primary: #1a56db;

  /* Granular (v2.27+) — finer control, e.g. a border that differs from the text color */
  --background-color-primary: #1a56db;
  --text-color-primary: #1a56db;
  --border-color-primary: #1a56db;
}
```

Naming: `--background-color-{name}`, `--text-color-{name}`, `--border-color-{name}` for every brand, neutral, palette, and semantic color (e.g. `--background-color-neutral-0`, `--text-color-error`, `--border-color-info`).