# Step 3: Choose your colors

Your website can wear any one of seventeen color themes. Each one changes every
page at once: the colors, the shape of the buttons, how much the cards lift off
the page.

This page shows all seventeen, in light and in dark, on the same page of a
made-up builder's website. Scroll and pick by looking. Nothing here needs a
click.

## The two choices

In the panel, a theme is called a **Colour palette**. That is how the panel
spells it. Each palette is a matched set. In the panel's list, every palette
shows its name and then its two main colors, such as Ember Trail followed by
ember and amber.

Under the palette is the **Colour mode**. **Light** gives you dark words on a
pale background. **Dark** does the reverse. Every visitor gets the one you pick.
There is no switch on your website for them to change it.

Other words people use for the same thing: theme, color scheme, palette, look
and feel, style, design, skin, dark mode, light mode, night mode.

## How to change it

:::note[Important]
New colors reach every page of your website at once. Most of your site follows
them on its own. A few parts we styled by hand may not. If something looks
wrong, pick your old palette again and everything goes back, then
[tell us](/help/getting-support/) which one you wanted.
:::

Write down the palette you are on now. Then follow the steps on
[Plugins](/admin/plugins/#changing-your-colors). It takes about a minute.

## The seventeen palettes

Each pair below is the same sample page. Light on the left, dark on the right.

### Default

Indigo and pink. The palette every site starts with.

**Light**
![The sample Contact page in the Default palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/default-light.png)

		*Default, light.*

**Dark**
![The sample Contact page in the Default palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/default-dark.png)

		*Default, dark.*

### Earth

Forest green and moss. Warm, natural tones.

**Light**
![The sample Contact page in the Earth palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/earth-light.png)

		*Earth, light.*

**Dark**
![The sample Contact page in the Earth palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/earth-dark.png)

		*Earth, dark.*

### Blue

Ocean blue and cyan. Cool and clean.

**Light**
![The sample Contact page in the Blue palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/blue-light.png)

		*Blue, light.*

**Dark**
![The sample Contact page in the Blue palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/blue-dark.png)

		*Blue, dark.*

### Ember Trail

Ember orange and amber on near black. Sharp corners.

**Light**
![The sample Contact page in the Ember Trail palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/ember-trail-light.png)

		*Ember Trail, light.*

**Dark**
![The sample Contact page in the Ember Trail palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/ember-trail-dark.png)

		*Ember Trail, dark.*

### Pine Hollow

Pine green and teal. Rounded, pill-shaped buttons.

**Light**
![The sample Contact page in the Pine Hollow palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/pine-hollow-light.png)

		*Pine Hollow, light.*

**Dark**
![The sample Contact page in the Pine Hollow palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/pine-hollow-dark.png)

		*Pine Hollow, dark.*

### River Bend

Azure and sky blue on a soft gray canvas.

**Light**
![The sample Contact page in the River Bend palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/river-bend-light.png)

		*River Bend, light.*

**Dark**
![The sample Contact page in the River Bend palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/river-bend-dark.png)

		*River Bend, dark.*

### Summit Ridge

Crimson and alpine blue. Big rounded corners and pill buttons.

**Light**
![The sample Contact page in the Summit Ridge palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/summit-ridge-light.png)

		*Summit Ridge, light.*

**Dark**
![The sample Contact page in the Summit Ridge palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/summit-ridge-dark.png)

		*Summit Ridge, dark.*

### Meadow Pass

Coral and plum on warm white. Cards that lift off the page.

**Light**
![The sample Contact page in the Meadow Pass palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/meadow-pass-light.png)

		*Meadow Pass, light.*

**Dark**
![The sample Contact page in the Meadow Pass palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/meadow-pass-dark.png)

		*Meadow Pass, dark.*

### Cedar Brook

Blue and green, with a soft tinted shadow.

**Light**
![The sample Contact page in the Cedar Brook palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/cedar-brook-light.png)

		*Cedar Brook, light.*

**Dark**
![The sample Contact page in the Cedar Brook palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/cedar-brook-dark.png)

		*Cedar Brook, dark.*

### Tide Pool

Deep teal and sea green. Nearly flat and very calm.

**Light**
![The sample Contact page in the Tide Pool palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/tide-pool-light.png)

		*Tide Pool, light.*

**Dark**
![The sample Contact page in the Tide Pool palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/tide-pool-dark.png)

		*Tide Pool, dark.*

### Amber Harvest

Olive and honey gold.

**Light**
![The sample Contact page in the Amber Harvest palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/amber-harvest-light.png)

		*Amber Harvest, light.*

**Dark**
![The sample Contact page in the Amber Harvest palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/amber-harvest-dark.png)

		*Amber Harvest, dark.*

### Sunflower Field

Olive and bright gold.

**Light**
![The sample Contact page in the Sunflower Field palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/sunflower-field-light.png)

		*Sunflower Field, light.*

**Dark**
![The sample Contact page in the Sunflower Field palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/sunflower-field-dark.png)

		*Sunflower Field, dark.*

### Autumn Sage

Brown and terracotta. No gradients, just solid color.

**Light**
![The sample Contact page in the Autumn Sage palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/autumn-sage-light.png)

		*Autumn Sage, light.*

**Dark**
![The sample Contact page in the Autumn Sage palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/autumn-sage-dark.png)

		*Autumn Sage, dark.*

### Harbor Dawn

Navy and warm cream.

**Light**
![The sample Contact page in the Harbor Dawn palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/harbor-dawn-light.png)

		*Harbor Dawn, light.*

**Dark**
![The sample Contact page in the Harbor Dawn palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/harbor-dawn-dark.png)

		*Harbor Dawn, dark.*

### Trailhead

Burnt orange and dusty blue.

**Light**
![The sample Contact page in the Trailhead palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/trailhead-light.png)

		*Trailhead, light.*

**Dark**
![The sample Contact page in the Trailhead palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/trailhead-dark.png)

		*Trailhead, dark.*

### Butter Lagoon

Deep teal and butter gold.

**Light**
![The sample Contact page in the Butter Lagoon palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/butter-lagoon-light.png)

		*Butter Lagoon, light.*

**Dark**
![The sample Contact page in the Butter Lagoon palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/butter-lagoon-dark.png)

		*Butter Lagoon, dark.*

### Marquee Red

Cinema red. No gradients, just solid color.

**Light**
![The sample Contact page in the Marquee Red palette, light mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/marquee-red-light.png)

		*Marquee Red, light.*

**Dark**
![The sample Contact page in the Marquee Red palette, dark mode: the header, the Get in touch heading, the town buttons, and the form.](../../../assets/screenshots/themes/marquee-red-dark.png)

		*Marquee Red, dark.*

## What done looks like

You have a palette name written down, and your website wears it on the home
page and on one inside page. If you changed your mind, the old name put it all
back.

Next: [Step 4: Replace the examples](/setup/replace-the-examples/).