# <color>

The `<color>` CSS type represents a color.

> **Warning**
>
>
> Not to be confused with the [`color`](../styles/color.md) CSS rule to set text color.


## Syntax

A [`<color>`](./color.md) should be in one of the formats explained in this section.
A bullet point summary of the formats available follows:

 - a recognised [named color](#named-colors) (e.g., `red`);
 - a 3 or 6 hexadecimal digit number representing the [RGB values](#hex-rgb-value) of the color (e.g., `#F35573`);
 - a 4 or 8 hexadecimal digit number representing the [RGBA values](#hex-rgba-value) of the color (e.g., `#F35573A0`);
 - a color description in the RGB system, [with](#rgba-description) or [without](#rgb-description) opacity (e.g., `rgb(23, 78, 200)`);
 - a color description in the HSL system, [with](#hsla-description) or [without](#hsl-description) opacity (e.g., `hsl(290, 70%, 80%)`);

[Textual's default themes](../guide/design.md) also provide many CSS variables with colors that can be used out of the box.

### Named colors

A named color is a [`<name>`](./name.md) that Textual recognises.
Below, you can find a (collapsed) list of all of the named colors that Textual recognises, along with their hexadecimal values, their RGB values, and a visual sample.

All named colors available.

```{.rich columns="80" title="colors"}
from textual._color_constants import COLOR_NAME_TO_RGB
from textual.color import Color
from rich.table import Table
from rich.text import Text
table = Table("Name", "hex", "RGB", "Color", expand=True, highlight=True)

for name, triplet in sorted(COLOR_NAME_TO_RGB.items()):
    if len(triplet) != 3:
        continue
    color = Color(*triplet)
    r, g, b = triplet
    table.add_row(
        f'"{name}"',
        Text(f"{color.hex}", "bold green"),
        f"rgb({r}, {g}, {b})",
        Text("                    ", style=f"on rgb({r},{g},{b})")
    )
output = table
```


### Hex RGB value

The hexadecimal RGB format starts with an octothorpe `#` and is then followed by 3 or 6 hexadecimal digits: `0123456789ABCDEF`.
Casing is ignored.

 - If 6 digits are used, the format is `#RRGGBB`:
   - `RR` represents the red channel;
   - `GG` represents the green channel; and
   - `BB` represents the blue channel.
 - If 3 digits are used, the format is `#RGB`.

In a 3 digit color, each channel is represented by a single digit which is duplicated when converting to the 6 digit format.
For example, the color `#A2F` is the same as `#AA22FF`.

### Hex RGBA value

This is the same as the [hex RGB value](#hex-rgb-value), but with an extra channel for the alpha component (that sets opacity).

 - If 8 digits are used, the format is `#RRGGBBAA`, equivalent to the format `#RRGGBB` with two extra digits for opacity.
 - If 4 digits are used, the format is `#RGBA`, equivalent to the format `#RGB` with an extra digit for opacity.

### `rgb` description

The `rgb` format description is a functional description of a color in the RGB color space.
This description follows the format `rgb(red, green, blue)`, where `red`, `green`, and `blue` are decimal integers between 0 and 255.
They represent the value of the channel with the same name.

For example, `rgb(0, 255, 32)` is equivalent to `#00FF20`.

### `rgba` description

The `rgba` format description is the same as the `rgb` with an extra parameter for opacity, which should be a value between `0` and `1`.

For example, `rgba(0, 255, 32, 0.5)` is the color `rgb(0, 255, 32)` with 50% opacity.

### `hsl` description

The `hsl` format description is a functional description of a color in the HSL color space.
This description follows the format `hsl(hue, saturation, lightness)`, where

 - `hue` is a float between 0 and 360;
 - `saturation` is a percentage between `0%` and `100%`; and
 - `lightness` is a percentage between `0%` and `100%`.

For example, the color `#00FF20` would be represented as `hsl(128, 100%, 50%)` in the HSL color space.

### `hsla` description

The `hsla` format description is the same as the `hsl` with an extra parameter for opacity, which should be a value between `0` and `1`.

For example, `hsla(128, 100%, 50%, 0.5)` is the color `hsl(128, 100%, 50%)` with 50% opacity.

## Examples

### CSS

```css
Header {
    background: red;           /* Color name */
}

.accent {
    color: $accent;            /* Textual variable */
}

#footer {
    tint: hsl(300, 20%, 70%);  /* HSL description */
}
```

### Python

In Python, rules that expect a `<color>` can also accept an instance of the type ``Color``.

```py
# Mimicking the CSS syntax
widget.styles.background = "red"           # Color name
widget.styles.color = "$accent"            # Textual variable
widget.styles.tint = "hsl(300, 20%, 70%)"  # HSL description

from textual.color import Color
# Using a Color object directly...
color = Color(16, 200, 45)
# ... which can also parse the CSS syntax
color = Color.parse("#A8F")
```

## Used by

- [`background`](../styles/background.md) - Background color property
- [`background-tint`](../styles/background_tint.md) - Background tint property
- [`border`](../styles/border.md) - Border style property
- [`border-title-background`](../styles/border_title_background.md) - Border title background property
- [`border-title-color`](../styles/border_title_color.md) - Border title color property
- [`border-subtitle-background`](../styles/border_subtitle_background.md) - Border subtitle background property
- [`border-subtitle-color`](../styles/border_subtitle_color.md) - Border subtitle color property
- [`color`](../styles/color.md) - Text color property
- [`hatch`](../styles/hatch.md) - Hatch style property
- [`keyline`](../styles/keyline.md) - Keyline style property
- [`link-background`](../styles/links/link_background.md) - Link background color property
- [`link-background-hover`](../styles/links/link_background_hover.md) - Link background hover color property
- [`link-color`](../styles/links/link_color.md) - Link text color property
- [`link-color-hover`](../styles/links/link_color_hover.md) - Link text hover color property
- [`outline`](../styles/outline.md) - Outline style property
- [`scrollbar-background`](../styles/scrollbar_colors/scrollbar_background.md) - Scrollbar background color property
- [`scrollbar-background-active`](../styles/scrollbar_colors/scrollbar_background_active.md) - Scrollbar background active color property
- [`scrollbar-background-hover`](../styles/scrollbar_colors/scrollbar_background_hover.md) - Scrollbar background hover color property
- [`scrollbar-color`](../styles/scrollbar_colors/scrollbar_color.md) - Scrollbar color property
- [`scrollbar-color-active`](../styles/scrollbar_colors/scrollbar_color_active.md) - Scrollbar active color property
- [`scrollbar-color-hover`](../styles/scrollbar_colors/scrollbar_color_hover.md) - Scrollbar hover color property
- [`scrollbar-corner-color`](../styles/scrollbar_colors/scrollbar_corner_color.md) - Scrollbar corner color property
- [`tint`](../styles/tint.md) - Tint style property
