Chromatabs: Leveraging Human Perception for Happier Tabbing

Chris Beard

36 responses

Today we are featuring a Firefox extension that Justin Dolske just whipped up called Chromatabs. It colorizes each browser tab to provide a strong visual indication of which site is loaded. Here’s a screen shot of it in action:

Let’s first take at the fundamental principle of why colors are useful. In the image below, try to do these two things:

1) Find all the red letters

2) Find all the K’s

You likely found the first task an order of magnitude easier than the second task [1]. This is because of difference in the way our visual system processes color compared to the way that it processes shapes. You can view all of the red letters with a single glance, or even spot them with your peripheral vision. Finding all of the K’s requires a close visual scan.

What does this have to do with tabbed browsing? Well, tabs use the same two visual variables (color and shape) to differentiate themselves from each other. Favicons provide a small amount of color, and the title text of the page consists of a series of shapes. Unfortunately some sites don’t have a favicon, or the favicon they do have isn’t sufficiently unique. Without favicons, you have to do a visual scan to find the correct tab — you can’t spot it with your peripheral vision.

This problem has attracted some interest from the community already. Many of you may be familiar with the popular Firefox extension Colorful Tabs. Its solution is to simply assign each new tab a color from a fixed list, in sequence. First example, the first tab will be blue, the second is yellow and the third green. The tab remains that color until it is closed. Each time you browse the web, you’ll have to remember what a particular color means at the moment:

Chromatabs’ approach to coloring tabs is different. Instead of assigning an essentially-random color to a tab when it is opened, a color is derived from the site currently loaded in the tab. For instance, this means that blog.mozilla.org will always be red, and engadget.com will always be purple:

So, how does it do that? Well… It takes the hostname from the URL, converts it to a number via a simple hash function, and then uses the number as a hue in HSL colorspace to obtain a final color. Justin has a blog entry discussing this and other technical details of Chromatabs’ operation in greater detail.

By keeping each site’s tab color consistent, the user can build up a mental model of what colors are associated with their favorite sites.

Future Work

Chromatabs was built as an experiment to test a concept. There are a number of directions someone could take this prototype to improve it and try new ideas. Here’s a few possibilities that might be interesting:

  • It might be more intuitive if Chromatabs analyzed each page to determine the most prominent color on the page, and then used that color for the tab. You would then see Slashdot tabs in their distinctive green, Fark tabs in purple, and Zombo.com tabs in, uhhh… oooooo….
  • Unfortunately not everyone likes rainbows and unicorns. In the process of converting a domain name into a RGB value, perhaps Chromatabs should also base the color on an aesthetically pleasing color pallet. Does anyone know a good algorithm to create beautiful color pallets?
  • A similar problem area is coloring groups of tabs. Here the focus would be on coloring groups of tabs in a unique color, which could be ephemeral and not based on the site’s address.
  • Give the user greater control over their browsing experience by allowing them to customize the color for a site. This might have some anti-phishing benefits as well (for example, expecting your bank’s web site to have the bright green color you assigned to it).

The Chromatabs extension is open source, so it’s a good starting point for anyone wanting to try out their own variation.

Discussion Topics

  • What if instead of just providing a favicon.ico, Web designers were able to design the surface of the tab?
  • What other ways could the browser provide a richer and more dynamic tabbed interface? For instance, Aging Tabs is really creative, bringing temporal information into the mix.

[1] From an HCI lecture (PDF) by professor Rob Miller

36 responses

  1. Trackback from a un figlio on :

    a un figlio…

    Mozilla Labs Blog » Blog Archive » Chromatabs: Leveraging…

  2. Pingback from Kaspers Homepage » Firefox extension: Chromatabs. on :

    […] Nu er jeg stødt på det igen, og i en form som jeg tror virker bedre. Forklaringen inkl. et motiverende billede, findes her. […]

  3. Pingback from Justin Dolske’s blog » Blog Archives » You are in a maze of twisty little tabs, all alike. on :

    […] I had this idea for tweaking tabs floating around my head for a while, and last week I finally decided to implement it. The result is Chromatabs, and the UI aspects of it are discussed on today’s labs.mozilla.org posting. […]

  4. Pingback from Andre Viana » Usuabilidade em tabs on :

    […] Essa não é a primeira extensão que faz esse tipo de coisa, existe a Colorful Tabs. Eu estou simplesmente simplificando as coisas para quem tem preguiça de ler um post de um geek e ainda por cima em inglês, quem quiser saber mais, sobre a ferramenta e só ler o artigo original. Blog reactions Tags: Design, Internet Del.icio.us Digg Furl […]

  5. arielb wrote on :

    the big advantage of “colorful tabs” is that you don’t have 2 tabs with similar colors next to each other. that makes it easy to pick one out.

  6. Matthew wrote on :

    This has become my HashColouredTabs replacement – thanks. I don’t think that there is any need to over-engineer the colour selection algorithm! For what it’s worth these are my suggestions for how to improve on the prototype:

    1) Tablist entries coloured to match the tabs

    2) Right-click on tab gives “Tab Colour…” option. This launches a colour picker that allows you to override the default hashed colour. Overrides are saved so that all tab colours are preserved.

    3) Tab colour defaults over-ridden by URL pattern matching rules + colour picker (e.g. so you have full control over how alternative/sub-domains are coloured, and similar sites can have similar colours assigned). If the colour picker includes a ‘none’ option then this will take care of pretty much everyone’s personal preferences expressed below.

    4) It’s especially important that the site x = colour y association be static from session to session. I don’t want this changing randomly based on how many tabs I have open etc.

  7. Zachariah wrote on :

    I really think it’s confusing that subdomains are a different color (as is http://www.example.com and just example.com) — you should use just the root domain, instead.

  8. John P Baker wrote on :

    It seems that everyone has a different idea of how to colour tabs – we could end up with another hugely configurable extension – or lots of small ones.

    -> Kevin Charmon, I have a potential Firefox 2 version of hashcolouredtabs downloadable from http://seis.bris.ac.uk/~ccjpb/

  9. Fafek wrote on :

    Very useful eye-candy.

    However, I notice some redrawing problems on Ubuntu 6.10…

  10. arielb wrote on :

    I’m in favor of color coding based on category and not the arbitrary color of a website. For example, a computer sites like tomshardware, intel and slashdot may have a blue tab and a shopping site like amazon may be green

  11. Komodo wrote on :

    I feature I’d like to see is the ability to have a tab colored by it’s referrer. If this were implemented, all of those tabs I opened from digg would be colored the same. Now I would know which sites I opened independently and which tabs I opened from digg. If a site is typed in the address bar, obviously its referrer would be itself, and the normal algorithm would apply

  12. Itai Seggev wrote on :

    What’s really needed is to colour code tab groups like TBE does.

  13. Moosh wrote on :

    I’m color blind

  14. onemen wrote on :

    in allowed Chromatabs to work if tabmix installed replace colorizeTab function in chromatabs.js with this:

    colorizeTab : function (tab) {

    var doc, i, hashstring, hashvalue, node;

    var color = CHROMATABS.computeTabColor(tab);
    if (!color) { return; }

    doc = tab.ownerDocument;

    if (0) {
    tab.style.backgroundColor = color;

    node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-image-left tab-startcap tab-left tab-left-border”);
    node.style.opacity = 0.8;
    node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-middle box-inherit tab-image-middle tab-body”);
    node.style.opacity = 0.8;
    // node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-close-button”);
    // node.style.opacity = 0.8;
    node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-image-right tab-endcap tab-right tab-right-border”);
    node.style.opacity = 0.8;
    }

    if (1) {
    node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-image-left tab-startcap tab-left tab-left-border”);
    CHROMATABS.renderImage(tab, node, color, false);
    node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-middle box-inherit tab-image-middle tab-body”);
    CHROMATABS.renderImage(tab, node, color, false);
    // node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-close-button”);
    // CHROMATABS.renderImage(tab, node, color, false);
    node = doc.getAnonymousElementByAttribute(tab, “class”, “tab-image-right tab-endcap tab-right tab-right-border”);
    CHROMATABS.renderImage(tab, node, color, false);
    }

    },

  15. Kevin Charmon wrote on :

    Same as HashColouredTabs:

    https://addons.mozilla.org/firefox/437/
    http://hashcolouredtabs.mozdev.org/

    Which unfortunately only supports Firefox 1.0 ~ 1.5. It also has a brightness selecter and minimum tab count trigger.

  16. Sam Hasler wrote on :

    less saturated background tabs worked for me in Chatzilla, see http://www.hiddenisland.plus.com/chatzilla/images/CZ-FlatTabs-2.png

  17. Dao wrote on :

    Andrew Conkling, see extensions.chromatabs.color.saturation and extensions.chromatabs.color.luminance (although I guess this also affects the active tab).

  18. Andrew Conkling wrote on :

    I was just posting exactly what Mickaël just said. 🙂 My thought was to make the inactive tabs significantly less saturated (i.e. more gray, I’m not sure of the terminology).

  19. Mickaël wrote on :

    Very interesting extension. I’m testing it…
    I just have a remark : it is sometime hard to see which of the tabs is the current. Perhaps the grey line between the page and the tab line should be of the tab’s color, or the separation between this line and the non-active tabs should be more marked. I don’t know…

  20. vdc wrote on :

    Nice idea !

    A enhancement would be to colorize the tab only when it is completely loaded, or to colorize the tab as it is loading :
    “Grey” -> not loaded
    “final-color” -> completely loaded

    with a gradient while it is loading.

  21. Jeff Carlsen wrote on :

    I’ve used it for a day now, and here is what I find.

    I like the concept of colored tabs, but it turns out that I don’t want all of them to be colored, only a select few. For example, if I’m at Slashdot, I want that to be colored, but when I open five different news stories in tabs, I don’t want all of those colored, as the various colors distract, and slow down my ability to return to the parent.

    Some possible solutions:

    *Only color tabs for sites I have bookmarked
    *let me decide when to color a tab through the context menu
    *Only color a tab when I open a new tab from it (in other words, color parent tabs)

    I do believe that all of these are viable options, and perhaps all of them could be implemented simultaneously. I particularly think that the last one has the most potential. Imagine that when you open a child tab, it colors the parent one of a handful of attractive colors, and then subtlety colors the child tabs in a lighter version of the same color, immediately showing the parent/child relationship of tabs, while immediately pointing back to the parent for easy reference.

  22. Greg K Nicholson wrote on :

    It’d be nice if Bookmarks, History and (especially) the tab list were also coloured.

  23. Sam Hasler wrote on :

    I like munsell pallets because they use a perceptually uniform color space (colours have): http://www.triplecode.com/munsell/

    The flash app on that site is a pain to extract colours from so I’ve got a few I already extracted here: http://www.hiddenisland.plus.com/Munsell.html

    I used them in my UserChrome.css to customise ChatZilla’s tabs so that each server had it’s own colour and used darker shades to indicate the current tab: http://www.hiddenisland.plus.com/chatzilla/images/CZ-FlatTabs-2.png

  24. Faaborg wrote on :

    After writing the post I saw this extension called PageStyle2Tab: https://addons.mozilla.org/firefox/1523

    As usual, our extension development community rocks.

  25. john f mcdermott wrote on :

    This works with TMP

    [url=https://addons.mozilla.org/firefox/1523/previews/]PageStyle2Tab[/url]

  26. Taters wrote on :

    I like it, but it doesn’t work with tab Mix Plus.

  27. FishCop wrote on :

    ChromaTab is really cool…as long as I deactivate Tab Mix Plus. When Tab Mix Plus is active, ChromaTab won’t colour the tabs.

  28. Richard wrote on :

    I think ChromaTabs has huge potential and certainly hope it continues to get developed. Thank you Justin for bringing to life such a superb idea.

  29. Håkan Waara wrote on :

    It would be interesting to see the same algorithm applied to the bookmarks in the bookmarks toolbar!

    This would help those with chaotic toolbars like me (I have the bm toolbar set to wrap to multiple lines because I have so many of them, and I want them all visible and easily accessible).

  30. dria wrote on :

    This is pretty slick. I’ve installed it and will see how it works out over a few days.

  31. Perry Lorier wrote on :

    this is also a strong antiphishing measure — if you goto your bank and todays it’s blue when yesterday it was yellow you suddenly start thinking “why?”

  32. dolphinling wrote on :

    Does it really not work with Minefield? I’d like to try it out…

  33. Boris Anthony wrote on :

    Forgot to mention that the Mac desktop aggregator app “endo” also derives a color for a feed, but it does so based on the favicon, using some OS X color compositing whizzbangery.

  34. Dao wrote on :

    I’ve tried to comment over at Justin’s place, but I’m not sure if it worked. So let me repeat this here:

    With the default Windows / Linux theme, it [tab coloring] is all dead easy. The images are semi-transparent, the borders are rounded. You can apply any color. That’s how I did it with Aging Tabs. If you could encourage that the Mac theme gets updated with 2.0.0.x, that would be great.

  35. John Lilly wrote on :

    testing this now — it’s interesting. i think, visually, i’d sort of prefer the colors on each tab to be related to the dominant coloring of the favicon — would love my mozilla tabs, for example, to be a less saturated version of the dino-head red. or for my skype tab to be a little less saturated version of that sky blue color.

  36. Boris Anthony wrote on :

    Very cool, I feel justified. 🙂
    I do something almost identical in a web-based aggregator system I have been working on, where each source’s feed URI is MD5’ed, and I simply grab the first 6 characters from that hash and pretend it’s an HTML/Hex color.
    (I need to do a brightness check to avoid having, say, bright yellow show up on a white background)

    I’d also like to point out that in your explanation above, nevermind that that color recognition is easier than shapes; your example uses roman letters: that causes the language centers to kick in, further slowing things down! 🙂

    I like the aging idea. Will research this too.