Adw – 1: Named Colors
Description: Reference for Adw-1: Named Colors

# Named Colors

The Adwaita stylesheet provides a number of predefined colors that can be used from applications.

## UI Colors

These colors are used throughout the UI. They can differ between the light and dark styles.

Many colors are grouped as background/foreground pairs. These colors are always meant to be used together as the background and foreground color, for example:

    my-widget {
      background-color: @accent_bg_color;
      color: @accent_fg_color;
    }

Some colors also have standalone versions. They are similar to the background version, but provide better contrast when used as foreground colors on top of a neutral background - for example, colorful text in a window.

    my-widget {
      color: @accent_color;
    }

Standalone colors are typically darker than the corresponding background color for the light style, and lighter than the background for the dark style.

Applications can override any of these colors by re-declaring them, for example:

    @define-color accent_color #c01c28;
    @define-color accent_bg_color #e01b24;

### Accent Colors

The accent color is used across many different widgets, often to indicate that a widget is important, interactive, or currently active. Try to avoid using it on large surfaces, or on too many items on the same view.

The `.accent` style class allows to use it for widgets such as `GtkLabel`.

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@accent_color` |  | `#1c71d8` |  | `#78aeed`
`@accent_bg_color` |  | `#3584e4` |  | `#3584e4`
`@accent_fg_color` |  | `#ffffff` |  | `#ffffff`

### Destructive Colors

The destructive color indicates a dangerous action, such as deleting a file. It’s used by `GtkButton` with the `.destructive-action` style class.

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@destructive_color` |  | `#c01c28` |  | `#ff7b63`
`@destructive_bg_color` |  | `#e01b24` |  | `#c01c28`
`@destructive_fg_color` |  | `#ffffff` |  | `#ffffff`

### Success Colors

This color is used with the `.success` style class, or in a `GtkLevelBar` with the `GTK_LEVEL_BAR_OFFSET_HIGH` offset.

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@success_color` |  | `#26a269` |  | `#8ff0a4`
`@success_bg_color` |  | `#2ec27e` |  | `#26a269`
`@success_fg_color` |  | `#ffffff` |  | `#ffffff`

### Warning Colors

This color is used with the `.warning` style class, or in a `GtkLevelBar` with the `GTK_LEVEL_BAR_OFFSET_LOW` offset.

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@warning_color` |  | `#ae7b03` |  | `#f8e45c`
`@warning_bg_color` |  | `#e5a50a` |  | `#cd9309`
`@warning_fg_color` |  | `rgba(0, 0, 0, 0.8)` |  | `rgba(0, 0, 0, 0.8)`

### Error Colors

This color is used with the `.error` style class.

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@error_color` |  | `#c01c28` |  | `#ff7b63`
`@error_bg_color` |  | `#e01b24` |  | `#c01c28`
`@error_fg_color` |  | `#ffffff` |  | `#ffffff`

### Window Colors

These colors are used on `GtkWindow`, as well as with the `.background` style class.

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@window_bg_color` |  | `#fafafa` |  | `#242424`
`@window_fg_color` |  | `rgba(0, 0, 0, 0.8)` |  | `#ffffff`

### View Colors

These colors are used in a variety of widgets such as `GtkTextView`, as well as with the `.view` style class.

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@view_bg_color` |  | `#ffffff` |  | `#1e1e1e`
`@view_fg_color` |  | `#000000` |  | `#ffffff`

### Header Bar Colors

These colors are used for `GtkHeaderBar`, as well as widgets that are meant to be visually attached to it, such as `GtkSearchBar` or `AdwTabBar`, unless they have the `.inline` style class.

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@headerbar_bg_color` |  | `#ebebeb` |  | `#303030`
`@headerbar_fg_color` |  | `rgba(0, 0, 0, 0.8)` |  | `#ffffff`
`@headerbar_border_color` |  | `rgba(0, 0, 0, 0.8)` |  | `#ffffff`
`@headerbar_backdrop_color` |  | `#fafafa` |  | `#242424`
`@headerbar_shade_color` |  | `rgba(0, 0, 0, 0.07)` |  | `rgba(0, 0, 0, 0.36)`

`@headerbar_border_color` has the same default value as `@headerbar_fg_color`, but doesn’t change along with it. This can be useful if a light window has a dark header bar with light text; in this case it may be desirable to keep the border dark.

`@headerbar_backdrop_color` is used instead of `@headerbar_bg_color` when the window is not focused. By default it’s an alias of `@window_bg_color` and changes together with it. When overriding header bar colors, make sure to set it to a value matching your `@headerbar_bg_color`.

`@headerbar_shade_color` is used by `AdwTabBar` to provide a visible darkening for inactive tabs and an overflow shadow. This color should always be partially transparent black, with the opacity adjusted to be well visible on top of `@headerbar_bg_color`.

### Card Colors

These colors are used for cards and boxed lists.

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@card_bg_color` |  | `#ffffff` |  | `rgba(255, 255, 255, 0.08)`
`@card_fg_color` |  | `rgba(0, 0, 0, 0.8)` |  | `#ffffff`
`@card_shade_color` |  | `rgba(0, 0, 0, 0.07)` |  | `rgba(0, 0, 0, 0.36)`

The card styles use a shadow to separate the card from the window background. `@card_shade_color` is used by this shadow. This color should always be partially transparent black, with the opacity tuned to be well visible on top of `@window_bg_color`.

### Popover Colors

These colors are used for `GtkPopover`.

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@popover_bg_color` |  | `#ffffff` |  | `#383838`
`@popover_fg_color` |  | `rgba(0, 0, 0, 0.8)` |  | `#ffffff`

### Miscellaneous Colors

Name |  | Light |  | Dark
--- | --- | --- | --- | ---
`@shade_color` |  | `rgba(0, 0, 0, 0.07)` |  | `rgba(0, 0, 0, 0.36)`
`@scrollbar_outline_color` |  | `#ffffff` |  | `rgba(0, 0, 0, 0.5)`

`@shade_color` is used by `AdwTabBar` with the `.inline` style class, as well as the transitions in `AdwLeaflet` and `AdwFlap`. This color should always be partially transparent black, with the opacity tuned to be well visible on top of `@window_bg_color`.

`@scrollbar_outline_color` is used by `GtkScrollbar` to ensure that overlay scrollbars are visible regardless of the content color. It should always be the opposite of the scrollbar color - light with a dark scrollbar and dark with a light scrollbar.

## Helper Colors

The following colors are derived from the current foreground color (`currentColor`) and change between regular and high contrast modes. They should be used to support the high contrast mode automatically.

Name | Regular | High contrast
--- | --- | ---
`@borders` | `alpha(currentColor, 0.15)` | `alpha(currentColor, 0.5)`

## Palette Colors

The stylesheet provides the full GNOME color palette as the following set of named colors:

| Name | Value
--- | --- | ---
| `@blue_1` | `#99c1f1`
| `@blue_2` | `#62a0ea`
| `@blue_3` | `#3584e4`
| `@blue_4` | `#1c71d8`
| `@blue_5` | `#1a5fb4`
| `@green_1` | `#8ff0a4`
| `@green_2` | `#57e389`
| `@green_3` | `#33d17a`
| `@green_4` | `#2ec27e`
| `@green_5` | `#26a269`
| `@yellow_1` | `#f9f06b`
| `@yellow_2` | `#f8e45c`
| `@yellow_3` | `#f6d32d`
| `@yellow_4` | `#f5c211`
| `@yellow_5` | `#e5a50a`
| `@orange_1` | `#ffbe6f`
| `@orange_2` | `#ffa348`
| `@orange_3` | `#ff7800`
| `@orange_4` | `#e66100`
| `@orange_5` | `#c64600`
| `@red_1` | `#f66151`
| `@red_2` | `#ed333b`
| `@red_3` | `#e01b24`
| `@red_4` | `#c01c28`
| `@red_5` | `#a51d2d`
| `@purple_1` | `#dc8add`
| `@purple_2` | `#c061cb`
| `@purple_3` | `#9141ac`
| `@purple_4` | `#813d9c`
| `@purple_5` | `#613583`
| `@brown_1` | `#cdab8f`
| `@brown_2` | `#b5835a`
| `@brown_3` | `#986a44`
| `@brown_4` | `#865e3c`
| `@brown_5` | `#63452c`
| `@light_1` | `#ffffff`
| `@light_2` | `#f6f5f4`
| `@light_3` | `#deddda`
| `@light_4` | `#c0bfbc`
| `@light_5` | `#9a9996`
| `@dark_1` | `#77767b`
| `@dark_2` | `#5e5c64`
| `@dark_3` | `#3d3846`
| `@dark_4` | `#241f31`
| `@dark_5` | `#000000`

## Compatibility Colors

A number of colors has been available in Adwaita in GTK3. They are aliases of UI colors or otherwise derived from them:

Name | Value
--- | ---
`@theme_bg_color` | `@window_bg_color`
`@theme_fg_color` | `@window_fg_color`
`@theme_base_color` | `@view_bg_color`
`@theme_text_color` | `@view_fg_color`
`@theme_selected_bg_color` | `@accent_bg_color`
`@theme_selected_fg_color` | `@accent_fg_color`
`@insensitive_bg_color` | `mix(@window_bg_color, @view_bg_color, 0.4)`
`@insensitive_fg_color` | `alpha(@window_fg_color, 0.5)`
`@insensitive_base_color` | `@view_bg_color`
`@theme_unfocused_bg_color` | `@window_bg_color`
`@theme_unfocused_fg_color` | `@window_fg_color`
`@theme_unfocused_base_color` | `@view_bg_color`
`@theme_unfocused_text_color` | `@view_fg_color`
`@theme_unfocused_selected_bg_color` | `@accent_bg_color`
`@theme_unfocused_selected_fg_color` | `@accent_fg_color`
`@unfocused_insensitive_color` | `@insensitive_bg_color`
`@unfocused_borders` | `@borders`