# Images and tints

> The five image slots, the NTP alignment and repeat options, derived images, the wallpaper generator and the HSL tints of the theme editor.

Canonical: https://docs.extension.dev/themes/images
This page as Markdown: https://docs.extension.dev/themes/images.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) · [Presets and palettes](https://docs.extension.dev/themes/presets.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

---

# Images and tints

Images give a theme a frame, toolbar, tab strip or New Tab wallpaper, and
tints shift Chrome's own surfaces in HSL. Reach for them when flat colors
are not enough, and keep in mind both are Chrome-only.

## Quick start

1. Open the editor at themes.extension.dev/chromium and drop an image
   anywhere on the page. It becomes the NTP background and the Images
   section opens.
2. Under **Theme from wallpaper**, click **Dark candidate**. The editor
   reads a seed from the wallpaper, builds the colors and slices a frame
   image from the top of it.
3. Set **NTP background alignment** to `center` and **NTP Background
   Repeat** to `no-repeat`.


## How it works

**Five slots.** Frame, Toolbar, Tab background, NTP background and NTP
attribution each take one image. The uploader accepts any `image/*` file.
Every slot exports as a PNG under `images/` at its original size, with no
downscaling.

**Size limits.** An image is embedded as it is, so a file whose encoded form
would pass 4 MiB is refused with "This image is too large to use". That is
about 3 MB on disk. The uploader also warns when an image is too short for
its band, when it will render soft on a 2x display, and when either side is
over 4096 px.

**Drag and drop.** Dropping a file anywhere on the editor sets the NTP
background and opens the Images section. A file that is not an image shows
"Drop an image file to use it as the new tab background".

**NTP alignment and repeat.** Alignment picks where the wallpaper anchors on
the New Tab page and exports as `properties.ntp_background_alignment`.
Repeat exports as `properties.ntp_background_repeat`. A **Preview NTP
attribution** toggle shows or hides the attribution image in the preview
only.

**Preview at 2x.** Chrome paints theme images at 1x, so on a 2x display they
soften. The toggle simulates that on a 1x display. On a display that is
already 2x the preview shows it without simulating, and the export is
unchanged either way.

**Derived images.** With a frame image in place, **Generate toolbar image
from frame** copies the frame into the toolbar slot, and **Generate tab
background from frame** builds a tab image with Chrome's window anchor
offset applied. With a wallpaper and no frame image, **Slice frame image
from NTP background** cuts the top 112 px of the wallpaper into the frame
slot.

**Theme from wallpaper.** With an NTP background set, **Light candidate**
and **Dark candidate** build a complete theme from it: a seed color read
through Google's HCT pipeline, text colors that pass AA, the wallpaper as
the NTP image, and the sliced frame. Undo restores the theme you had.

**Tints.** A tint is an HSL triple `[H, S, L]` with each channel from 0 to
1, and `-1` keeps that channel as Chrome paints it. Four tints are editable:
Buttons, Frame, Frame when inactive, and Background tab. Tints are a
Chrome-only hue shift, so the Firefox package drops them.

## Reference

| Slot | Manifest key | Exported file |
| --- | --- | --- |
| Frame image | `images.theme_frame` | `images/frame.png` |
| Toolbar image | `images.theme_toolbar` | `images/toolbar.png` |
| Tab background image | `images.theme_tab_background` | `images/tab_background.png` |
| NTP background image | `images.theme_ntp_background` | `images/ntp_background.png` |
| NTP attribution image | `images.theme_ntp_attribution` | `images/ntp_attribution.png` |

| Property | Values |
| --- | --- |
| `properties.ntp_background_alignment` | `center`, `top`, `bottom`, `left`, `right`, `left top`, `left bottom`, `right top`, `right bottom`, `center top`, `center bottom` |
| `properties.ntp_background_repeat` | `no-repeat`, `repeat`, `repeat-x`, `repeat-y` |

| Tint | Manifest key |
| --- | --- |
| Buttons | `tints.buttons` |
| Frame | `tints.frame` |
| Frame, inactive window | `tints.frame_inactive` |
| Background tab | `tints.background_tab` |

| Limit | Value |
| --- | --- |
| Embedded image size | 4 MiB encoded, about 3 MB on disk |
| Oversize warning | Either side over 4096 px |
| Frame slice height | 112 px |
| Tint channel range | `-1`, or 0 to 1 in steps of 0.01 |

## When it fails

- **"This image is too large to use."** The file would pass 4 MiB once
  embedded. Use a smaller file; the editor never resizes an image for you.
- **"Could not read that image file."** The browser could not decode the
  file. Export it again as PNG or JPEG and retry.
- **A band warning reads "Only N px tall."** The image is shorter than the
  surface it covers, and Chrome mirror-tiles the shortfall. Use a taller
  image.
- **The derived image buttons are missing.** They appear only when the
  source slot is filled and the target slot is empty.
- **Tints did not reach Firefox.** Tints are Chrome-only and the Firefox
  package lists them under "Not in the Firefox package".

## Next

- [Colors](/themes/colors)
- [Export and install](/themes/export)
- [Import a theme](/themes/import)
- [The editor](/themes/editor)