# Colors

## Text

| Variable | Light | Dark |
| --- | --- | --- |
| `--tui-text-primary` | #1b1f3b | #ffffff |
| `--tui-text-secondary` | rgba(27, 31, 59, 0.65) | rgba(255, 255, 255, 0.72) |
| `--tui-text-tertiary` | rgba(27, 31, 59, 0.4) | rgba(255, 255, 255, 0.6) |
| `--tui-text-primary-on-accent-1` | #fff | #fff |
| `--tui-text-primary-on-accent-2` | #fff | #fff |
| `--tui-text-action` | #4c66c3 | #6788ff |
| `--tui-text-action-hover` | #6c86e2 | #526ed3 |
| `--tui-text-negative` | #eb1700 | #ff4d4d |
| `--tui-text-negative-hover` | #ff4d4d | #f66 |
| `--tui-text-positive` | #008764 | #44c596 |
| `--tui-text-positive-hover` | #7ac5aa | #3aa981 |

## Backgrounds

| Variable | Light | Dark |
| --- | --- | --- |
| `--tui-background-base` | #fff | #222 |
| `--tui-background-base-alt` | #f6f6f6 | #333 |
| `--tui-background-neutral-1` | rgba(0, 0, 0, 0.04) | rgba(255, 255, 255, 0.08) |
| `--tui-background-neutral-1-hover` | rgba(0, 0, 0, 0.08) | rgba(255, 255, 255, 0.16) |
| `--tui-background-neutral-1-pressed` | rgba(0, 0, 0, 0.12) | rgba(255, 255, 255, 0.24) |
| `--tui-background-neutral-2` | rgba(0, 0, 0, 0.08) | rgba(255, 255, 255, 0.24) |
| `--tui-background-neutral-2-hover` | rgba(0, 0, 0, 0.1) | rgba(255, 255, 255, 0.32) |
| `--tui-background-neutral-2-pressed` | rgba(0, 0, 0, 0.14) | rgba(255, 255, 255, 0.4) |
| `--tui-background-accent-1` | #526ed3 | #526ed3 |
| `--tui-background-accent-1-hover` | #6c86e2 | #6c86e2 |
| `--tui-background-accent-1-pressed` | #314692 | #314692 |
| `--tui-background-accent-2` | #ff7043 | #ff7043 |
| `--tui-background-accent-2-hover` | #ff9a94 | #ff9a94 |
| `--tui-background-accent-2-pressed` | #e7716a | #e7716a |
| `--tui-background-accent-opposite` | #000 | #fff |
| `--tui-background-accent-opposite-hover` | #333 | #f6f6f6 |
| `--tui-background-accent-opposite-pressed` | #808080 | #ededed |
| `--tui-background-elevation-1` | #fff | #292929 |
| `--tui-background-elevation-2` | #fff | #2f2f2f |
| `--tui-background-elevation-3` | #fff | #373737 |

## Statuses

| Variable | Light | Dark |
| --- | --- | --- |
| `--tui-status-negative` | #ff291a | #ff4d4d |
| `--tui-status-negative-pale` | rgba(245, 34, 34, 0.08) | rgba(255, 77, 77, 0.24) |
| `--tui-status-negative-pale-hover` | rgba(245, 34, 34, 0.16) | rgba(255, 77, 77, 0.32) |
| `--tui-status-positive` | #4ac99b | rgb(74, 201, 155) |
| `--tui-status-positive-pale` | rgba(74, 201, 155, 0.12) | rgba(74, 201, 155, 0.32) |
| `--tui-status-positive-pale-hover` | rgba(74, 201, 155, 0.24) | rgba(74, 201, 155, 0.4) |
| `--tui-status-warning` | #ffc700 | rgb(255, 199, 0) |
| `--tui-status-warning-pale` | rgba(255, 199, 0, 0.12) | rgba(255, 199, 0, 0.32) |
| `--tui-status-warning-pale-hover` | rgba(255, 199, 0, 0.24) | rgba(255, 199, 0, 0.4) |
| `--tui-status-info` | #70b6f6 | rgb(112, 182, 246) |
| `--tui-status-info-pale` | rgba(112, 182, 246, 0.12) | rgba(112, 182, 246, 0.32) |
| `--tui-status-info-pale-hover` | rgba(112, 182, 246, 0.24) | rgba(112, 182, 246, 0.4) |
| `--tui-status-neutral` | rgb(121, 129, 140) | rgb(149, 155, 164) |

## Others

| Variable | Light | Dark |
| --- | --- | --- |
| `--tui-border-normal` | rgba(0, 0, 0, 0.1) | rgba(255, 255, 255, 0.14) |
| `--tui-border-hover` | rgba(0, 0, 0, 0.16) | rgba(255, 255, 255, 0.6) |
| `--tui-border-focus` | rgba(51, 51, 51, 0.64) | rgba(255, 255, 255, 0.64) |
| `--tui-service-autofill-background` | #fff5c0 | rgb(85, 74, 42) |
| `--tui-service-selection-background` | rgba(112, 182, 246, 0.12) | rgba(112, 182, 246, 0.12) |
| `--tui-service-backdrop` | rgba(0, 0, 0, 0.75) | rgba(0, 0, 0, 0.75) |

## Charts

| Variable | Value |
| --- | --- |
| `--tui-chart-categorical-00` | var(--tui-background-accent-1) |
| `--tui-chart-categorical-01` | #ea97c4 |
| `--tui-chart-categorical-02` | #a0c5df |
| `--tui-chart-categorical-03` | #fee797 |
| `--tui-chart-categorical-04` | #b0b0b0 |
| `--tui-chart-categorical-05` | #e29398 |
| `--tui-chart-categorical-06` | #b8474e |
| `--tui-chart-categorical-07` | #fcc068 |
| `--tui-chart-categorical-08` | #ff8a00 |
| `--tui-chart-categorical-09` | #dab3f9 |
| `--tui-chart-categorical-10` | #7b439e |
| `--tui-chart-categorical-11` | #8dda71 |
| `--tui-chart-categorical-12` | #fcbb14 |
| `--tui-chart-categorical-13` | #a8cef1 |
| `--tui-chart-categorical-14` | #bd65a4 |
| `--tui-chart-categorical-15` | #7fd7cc |
| `--tui-chart-categorical-16` | #2fad96 |
| `--tui-chart-categorical-17` | #d4aca2 |
| `--tui-chart-categorical-18` | #9d6f64 |
| `--tui-chart-categorical-19` | #d2e9a2 |
| `--tui-chart-categorical-20` | #aadc42 |

Taiga UI uses
**CSS custom properties**
. You do not need to import anything as long as you included Taiga UI theme in your global styles. Just use
variables

```less
.class {
  background-color: var(--tui-status-positive);
}
```

### Usage Examples

#### Example table

**Template:**
```html
@for (row of rows(); track row.color) { <tr class="color">
<td>
<h3 class="name">
<tui-doc-copy class="copy" [cdkCopyToClipboard]="`var(${row.color})`" > Copy </tui-doc-copy> {{ row.color }} </h3>
</td>
<td class="circle">
<div class="demo" [style.background]="`var(${row.color})`" ></div>
</td>
<td>
<div class="value">
<tui-doc-copy class="copy" [cdkCopyToClipboard]="row.value" > Copy </tui-doc-copy> {{ row.value }} </div>
</td>
</tr> }
```

**TypeScript:**
```ts
import {ClipboardModule} from '@angular/cdk/clipboard';
import {Component, computed, inject, input} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {WA_WINDOW} from '@ng-web-apis/common';
import {TuiDocCopy} from '@taiga-ui/addon-doc';
import {tuiInjectElement, TuiPlatform} from '@taiga-ui/cdk';
import {TUI_DARK_MODE} from '@taiga-ui/core';

interface ColorRow {
    readonly color: string;
    readonly value: string;
}

@Component({
    selector: 'table[colors]',
    imports: [ClipboardModule, TuiDocCopy],
    templateUrl: './index.html',
    styleUrl: './index.less',
    changeDetection,
})
export class TableColors {
    private readonly win = inject(WA_WINDOW);
    private readonly styles = this.win.getComputedStyle(tuiInjectElement());

    protected readonly darkMode = inject(TUI_DARK_MODE);
    protected readonly platform = inject(TuiPlatform);

    public readonly colors = input<readonly string[]>([]);

    protected readonly rows = computed<readonly ColorRow[]>(
        (
            // These reads are intentional:
            // color values depend on platform and theme.
            _platform = this.platform.tuiPlatform(),
            _dark = this.darkMode(),
        ) =>
            this.colors()
                .map((color) => ({
                    color,
                    value: this.styles.getPropertyValue(color),
                }))
                .filter(({value}) => value),
    );
}
```

**LESS:**
```less
@import '@taiga-ui/styles/utils';

:host {
    inline-size: 100%;
    color: var(--tui-text-primary);
    background: var(--tui-background-base);
    font-family: monospace;
    table-layout: fixed;

    tr:not(:first-child) {
        border-block-start: 1px solid var(--tui-border-normal);
    }

    td {
        padding: 1.5rem 0.5rem;

        &:last-child {
            color: var(--tui-text-secondary);
            padding-inline-end: 0;
        }
    }
}

.circle {
    text-align: center;
}

.demo {
    position: relative;
    display: inline-flex;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--tui-border-normal);
}

.name {
    .transition(color);

    position: relative;
    display: inline-block;
    min-block-size: 2rem;
    background: var(--tui-background-base-alt);
    border-radius: var(--tui-radius-m);
    padding: 0.25rem 0.75rem;
    box-sizing: border-box;

    &:hover {
        color: transparent;

        .copy {
            opacity: 1;
        }
    }
}

.value {
    position: relative;
    inline-size: fit-content;
    margin-inline-end: 1rem;
    padding: 1rem 0.75rem;
    overflow-wrap: break-word;
    text-align: center;
}

.copy {
    .transition(opacity);

    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    background: var(--tui-background-base-alt);
    opacity: 0;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 2rem;

    ::ng-deep button {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        block-size: 100%;
        inline-size: 100%;
    }

    &:hover {
        opacity: 1;
    }
}
```