# Colors > The color fields of the theme editor, the manifest keys they write, pointer mode on the preview, and the contrast checks with their Fix button. Canonical: https://docs.extension.dev/themes/colors This page as Markdown: https://docs.extension.dev/themes/colors.md Section: Themes Siblings: [Theme builder](https://docs.extension.dev/themes.md) · [The editor](https://docs.extension.dev/themes/editor.md) · [Presets and palettes](https://docs.extension.dev/themes/presets.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 --- # Colors The Colors section sets the surfaces of a Chrome theme: frame, toolbar, tabs, New Tab page and links. Reach for it when a preset is close but a surface needs its own value, or when a contrast badge turns red. ## Quick start 1. Open the editor at themes.extension.dev/chromium and click **Colors** on the dock. 2. Under **Toolbar**, set **Background** to `#0f172a`. The toolbar repaints and the badge under **Text** reads "Low contrast". 3. Scroll to the contrast checks and click **Fix**. The text color moves to the nearest passing value and the badge reads "Meets contrast". ## How it works **Five groups.** The section is split into Frame, Toolbar, Tabs, New Tab Page and Elements. Toolbar holds an Omnibox subgroup for the address bar text and the suggestions dropdown. Each field names the manifest key it writes in its tooltip. **Auto values.** Some fields start empty and show their derived value as "(auto)". Chrome computes those colors from the surfaces you set, and the preview already paints them. Type a value to override, or click the reset control to hand the field back to Chrome. **What Chrome will not let you set.** The omnibox field background always derives from the toolbar color, so there is no field for it. The active tab surface always uses the toolbar color. Window control buttons paint only on Windows frames. **RGB arrays.** The editor stores hex colors and writes each one to the manifest as an RGB array, so `#0f172a` exports as `[15, 23, 42]`. The imported alpha of a color is dropped, because transparency is not modeled. **Recent Colors.** Every color you commit joins a Recent Colors row. The row keeps the twelve most recent values in this browser's storage, newest first. **Pointer mode.** Click the pointer button on the dock, then click a part of the Chrome window on the canvas. A small input appears beside the selection and accepts any CSS color, such as `#aabbcc` or `red`. The sidebar stays usable while the pointer is armed. Esc clears the selection, and a second Esc leaves pointer mode. Picking a color also leaves pointer mode. **Contrast checks.** Five text pairs are checked against WCAG 4.5:1 as you edit, and each failing pair shows its ratio and a **Fix** button. Fix nudges that text color to the nearest passing value and changes nothing else. The panel is headed "WCAG advice (optional)": real Chrome installs your colors as they are, so the checks are readability advice, not requirements. **What Chrome derives.** Under the checks, the panel lists the values Chrome computes after install: the omnibox field, blended from the toolbar until it reaches 1.3:1 contrast, the omnibox field text, the toolbar top separator, and whether the NTP logo renders white or colored. ## Reference | Group | Field | Manifest key | | --- | --- | --- | | Frame | Active frame | `frame` | | Frame | Inactive frame | `frame_inactive` | | Toolbar | Background | `toolbar` | | Toolbar | Text | `bookmark_text` | | Toolbar | Toolbar text | `toolbar_text` | | Toolbar | Toolbar icons | `toolbar_button_icon` | | Toolbar | Window control buttons | `button_background` | | Omnibox | Omnibox text | `omnibox_text` | | Omnibox | Suggestions background | `omnibox_background` | | Tabs | Active tab text | `tab_text` | | Tabs | Inactive tab text | `tab_background_text` | | Tabs | Inactive tab text, inactive window | `tab_background_text_inactive` | | New Tab Page | Background | `ntp_background` | | New Tab Page | Text | `ntp_text` | | New Tab Page | Google logo | `properties.ntp_logo_alternate` | | Elements | NTP link | `ntp_link` | `toolbar_text`, `toolbar_button_icon`, `omnibox_text`, `omnibox_background` and `ntp_link` are written only when you set them. The other ten color keys are always written. | Contrast check | Text | Surface | Fix changes | | --- | --- | --- | --- | | Active tab text on toolbar | `tab_text` | `toolbar` | `tab_text` | | Inactive tab text on frame | `tab_background_text` | `frame` | `tab_background_text` | | Inactive tab text on inactive frame | `tab_background_text_inactive` | `frame_inactive` | `tab_background_text_inactive` | | Toolbar text | `bookmark_text` | `toolbar` | `bookmark_text` | | New tab page text | `ntp_text` | `ntp_background` | `ntp_text` | | Limit | Value | | --- | --- | | Passing contrast ratio | 4.5:1 | | Recent Colors kept | 12 | | Omnibox field blend target | 1.3:1 against the toolbar | ## When it fails - **The inactive frame field is missing.** Turn on **Inactive window** in the preview states strip. The field appears only in that state. - **A color field shows "(auto)" after an import.** The imported manifest did not carry that key. Chrome derives it, and the preview shows the derived value. - **The pointer input ignores what you typed.** The value is not a CSS color. Type a hex value such as `#3b82f6` or a named color such as `red`. - **The preview shows a gray window and no color changes.** **Incognito mode** is on. Chrome ignores themes in incognito windows, so turn it off. - **Fix changed a different field than you expected.** Fix always moves the text color of the failing pair, never the surface under it. ## Next - [Presets and palettes](/themes/presets) - [Images and tints](/themes/images) - [The editor](/themes/editor) - [Theme verify](/tools/mcp/theme-verify)