# Selection colours

> See every colour in a selection at a glance and change one everywhere it is used, in one edit.

Source: https://uxdeck.app/guide/selection-colours (checked against uxdeck on 16 October 2026)

Select a frame, a component or a handful of layers, and the **Selection colours** section of the Design tab lists every colour they paint, each one once. Change a colour there and it changes on every layer that uses it, however deep inside the selection it sits.

It is the fastest way to recolour a screen, tidy up near-duplicate greys, or turn hard-coded colours into variables.

## Where it shows

**Selection colours** appears when the selection paints more than one colour, or the same colour on more than one layer. A single plain layer has its own **Fill** and **Stroke** sections for that, so the list stays hidden there.

Select a whole screen to see the colours of everything inside it.

## What it lists

Every colour that shows:

- fills, and the colour of text (including coloured words inside a text),
- the label colour of buttons and sticky notes,
- strokes,
- each stop of a gradient, on a fill or a stroke,
- the colour placed over a picture.

Colours that follow a variable come first, under the variable's name. The others follow as hex codes with their opacity. The same colour at two opacities counts as two.

Long lists fold after six; press **See all** to open the rest.

## Change a colour everywhere

- **Type a new hex code** or opacity in a row: every layer using that colour follows.
- **Click the swatch** for the colour picker. As you drag, every use updates live.

## Find the layers using a colour

The target button at the end of a row (**Select layers using this colour**) selects every layer that paints it. A toast says how many. From there you can restyle them, check them or move them.

## Link colours to variables

Each row has an **Apply variable** button:

- **Pick a colour variable** and every use of that colour now follows it.
- **Create one** from the colour, and the layers are linked to the new variable straight away.
- On a row that already follows a variable, **Detach** lets the layers keep the colour without the link.

Clicking the swatch of a variable's row opens the picker on its **Libraries** tab, where you can swap to another variable.

This is the quickest way to bring an existing design onto your colour variables: select the screen, then link each row in turn. See [Variables and modes](/guide/variables).

## What it leaves out

- Pictures, videos and patterns.
- Hidden fills and strokes (a text's colour still shows).
- Shadows and other effects.
- The mask layer of a mask group, since only its outline counts.
- The shapes inside a boolean group: only the group's own colours show.

## Catches

- **It changes the colour, not the layer's fill type.** A gradient stays a gradient; only the stop you edit changes.
- **One edit, every use.** If you want only some layers to change, select just those first, or use the target button to see which layers a colour reaches.
- **Near matches are separate rows.** `#333333` and `#343434` are two colours. Set one to the other and they merge into a single row.
- **Selection colours are on every plan.**