Chrome themes and your bookmarks bar colors

Every color on Chrome's bookmarks bar comes from a theme, even if you never picked one. The default light and dark looks are themes too. Knowing which shade goes where lets you do something useful: recreate Chrome's own separator color exactly, or choose separator colors that genuinely fit your setup. Here is what a theme controls, the exact default values, and how to match any theme you run.

What a theme changes on the bookmarks bar

A Chrome theme sets a small palette that the whole browser window is painted from. On and around the bookmarks bar, four things follow it: the frame, which is the strip behind the tabs; the toolbar and bookmarks bar background; the label text; and the tint of every icon Chrome draws itself, including folder icons and the built-in separator. The built-in separator borrows the frame color, which is why it always blends in no matter which theme you run.

The default colors, measured

We measured these from real Chrome windows (Chrome 149, default theme) rather than guessing from documentation. If you want a Diviide separator to sit as quietly on the bar as Chrome's own divider, these are the values to give it.

Notice the pattern: in both modes the built-in separator uses the frame color, not a gray picked for contrast. In light mode that is a soft blue-gray line on a white bar. In dark mode the line is darker than the bar behind it, not lighter, which surprises people trying to match it by eye.

Preset themes and custom themes

The color presets in Customize Chrome, on the side panel of a new tab, do not carry fixed palettes. Each one is a seed color, and Chrome computes the frame, toolbar, and text shades from that seed using Google's Material color system, in a light and a dark variant. Themes from the Chrome Web Store set their own colors on top of the same slots. So there is no universal hex list for every theme, and any list would go stale. The good news: you do not need one.

Match any theme in a minute

Diviide's color picker has its own eyedropper, and it can sample anything on your screen, even outside the browser window. So matching a theme takes three clicks:

1. Open the Advanced section of the color picker and click the eyedropper button next to the format menu.
2. Click the color you want to match. Sample the frame, behind the tabs, to copy the built-in separator; sample the bar background if you want a tone-on-tone look.
3. Drag a separator. The sampled color is already applied, so it arrives in the exact shade you clicked.

The eyedropper appears in Chrome and Edge. If you do not see it, the manual route still works: screenshot your browser window with the bookmarks bar visible, read the value with any color picker that can sample an image (on a Mac, the built-in Digital Color Meter shows the value under the cursor live, no screenshot needed), then paste the hex, like #dfe5eb, into the Advanced field. Our guide to advanced colors and labels covers the picker in detail.

This works for every preset, every Web Store theme, and every future Chrome version, because you are measuring the real thing instead of trusting a table.

Can you change a bookmark folder's color?

No. Chrome paints every folder on the bar with one theme-wide icon tint, and there is no setting to color one folder differently. The folder icon is part of the browser's interface, like the built-in separator, so the theme decides and that is that.

What you can do is put color next to the folder instead of on it. A separator in front of each folder gives you the color coding Chrome will not, and a labeled one can act as a heading for the folders that follow. See how to use bookmark folders for how folders and separators work together.