# Presets and palettes

> The nine preset themes, the Randomize button, the Start from a color generator and the palette generator of the theme editor.

Canonical: https://docs.extension.dev/themes/presets
This page as Markdown: https://docs.extension.dev/themes/presets.md
Section: Themes
Siblings: [Theme builder](https://docs.extension.dev/themes.md) · [The editor](https://docs.extension.dev/themes/editor.md) · [Colors](https://docs.extension.dev/themes/colors.md) · [Images and tints](https://docs.extension.dev/themes/images.md) · [Import a theme](https://docs.extension.dev/themes/import.md) · [Export and install](https://docs.extension.dev/themes/export.md) · [Firefox preview](https://docs.extension.dev/themes/firefox-preview.md) · [Publish and hand off](https://docs.extension.dev/themes/publish.md)
Map of every page: https://docs.extension.dev/llms.txt · Whole corpus: https://docs.extension.dev/llms-full.txt

---

# Presets and palettes

Presets, the seed color generator and the palette generator each fill every
color field at once. Reach for them to start a theme in one click, then
refine single surfaces under [Colors](/themes/colors).

## Quick start

1. Open the editor at themes.extension.dev/chromium and click **Presets**
   on the dock.
2. Pick **Ocean Blue** from the preset list. Every color field and the
   window mock take the preset's values.
3. Type `#4285f4` under **Start from a color** and click **Dark theme**.
   The colors are rebuilt from that seed and your images stay.


## How it works

**Presets replace colors.** Picking a preset replaces your current colors
with the preset's values, and you fine-tune afterward. Each preset carries
tags such as Dark, Light, High contrast or Playful. Aurora is the one preset
that also brings images: a northern-lights wallpaper with a deep night
frame.

**Randomize colors.** The Randomize button draws new frame, toolbar and New
Tab colors at random. It keeps your images, the attribution toggle, the NTP
alignment and repeat, the logo setting, tints and any imported keys the
editor does not edit. Each text color is nudged until it passes 4.5:1
against its surface.

**Start from a color.** Type a seed hex in the field, which starts at
`#4285f4`, then click **Light theme** or **Dark theme**. The editor builds
the theme Chrome's own Customize Chrome panel would build from that seed,
using Google's HCT color library. Colors are replaced and images are kept.

**Generate palette.** The palette generator takes a base color, a palette
type and a theme mode. Monochromatic stays on one hue, Complementary pairs
the hue with its opposite, and Analogous uses the two neighboring hues. Dark
or Light sets which surfaces go deep and which stay bright. Every text color
passes through the AA contrast check before it lands.

**Undo covers all of them.** A preset, a randomize, a seed or a palette is
one history step, so Cmd+Z or Ctrl+Z restores the theme you had.

## Reference

| Preset | Tags |
| --- | --- |
| Default | Dark |
| Material Dark | Dark |
| Light & Clean | Light |
| Ocean Blue | Dark |
| Forest Green | Dark |
| Sunset Orange | Playful |
| High Contrast | High contrast, Dark |
| Midnight Purple | Dark |
| Aurora | Dark, Playful, with a wallpaper |

| Control | Input | Keeps |
| --- | --- | --- |
| Preset | One of nine | Nothing, colors are replaced |
| Randomize colors | None | Images, alignment, repeat, logo, tints, imported keys |
| Start from a color | Seed hex, Light or Dark | Images |
| Generate palette | Base hex, type, mode | Nothing, colors are replaced |

| Palette type | Hues used |
| --- | --- |
| Monochromatic | The base hue |
| Complementary | The base hue and the hue 180 degrees away |
| Analogous | The base hue and the hues 30 degrees either side |

## When it fails

- **"Enter a hex color such as #3b82f6 or #38f."** The base color is not a
  three or six digit hex. Fix the value and generate again.
- **Light theme and Dark theme are disabled.** The seed field holds no
  readable hex. Clear it and the field returns to `#4285f4`.
- **A preset wiped colors you wanted.** Press Cmd+Z or Ctrl+Z. The preset
  was one history step.
- **"Could not generate the theme. Try again."** The seed build failed in
  this browser. Try the same seed again, or pick a preset.

## Next

- [Colors](/themes/colors)
- [Images and tints](/themes/images)
- [The editor](/themes/editor)
- [Templates](/templates/)