{"id":66868,"date":"2021-08-26T08:00:00","date_gmt":"2021-08-26T15:00:00","guid":{"rendered":"https:\/\/blog.mozilla.org\/?p=66868"},"modified":"2021-08-26T10:33:19","modified_gmt":"2021-08-26T17:33:19","slug":"why-are-hyperlinks-blue","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/en\/internet-culture\/deep-dives\/why-are-hyperlinks-blue\/","title":{"rendered":"Why are hyperlinks blue?"},"content":{"rendered":"\n

The internet has ingrained itself into every aspect of our lives, but there\u2019s one aspect of the digital world that I bet you take for granted. Did you ever notice that many links, specifically hyperlinks, are blue? When a co-worker casually asked me why links are blue, I was stumped. As a user experience designer who has created websites since 2001, I\u2019ve always made my links blue. I have advocated for the specific shade of blue, and for the consistent application of blue, yes, but I\u2019ve never stopped and wondered, why are links blue? It was just a fact of life. Grass is green and hyperlinks are blue. Culturally, we associate links with the color blue so much that in 2016, when Google changed its links to black, it created quite a disruption<\/a>. <\/p>\n\n\n\n

But now, I find myself all consumed by the question, WHY are links blue? WHO decided to make them blue? WHEN was this decision made, and HOW has this decision made such a lasting impact? <\/p>\n\n\n\n

I turned to my co-workers to help me research, and we started to find the answer. Mosaic, an early browser released by Marc Andreessen and Eric Bina<\/a> on January 23, 1993, had blue hyperlinks. To truly understand the origin and evolution of hyperlinks though, I took a journey through technology history and interfaces to explore how links were handled before color monitors, and how interfaces and hyperlinks rapidly evolved once color became an option.<\/p>\n\n\n\n

The ancestors of the blue hyperlink<\/h2>\n\n\n\n

By looking at these pre-color hyperlink solutions, we can see how hyperlinks evolved over time and how these early innovations impact usability on the web today.<\/p>\n\n\n\n

\"\"<\/figure>
\n

1964 \u2013 Project Xanadu<\/a><\/h4>\n\n\n\n

Project Xanadu connected two pages of information for the first time in history. Links were visual lines between pages.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>
\n

1983 \u2013 HyperTIES system<\/strong><\/a><\/h4>\n\n\n\n

This system introduces color, as it used cyan hyperlinks on a black background. HyperTies was used as an \u201celectric journal.\u201d This may be an ancestor of our blue hyperlink we know and love today, but I do not believe that this is the first instance of the blue hyperlink since this color is cyan, and not dark blue.<\/p>\n<\/div><\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"\/<\/figure>
\n

1985 \u2013 Windows 1.0<\/strong><\/h4>\n\n\n\n

Windows 1.0 brought a full color graphic interface. The links and buttons are still black, similar to Apple\u2019s interface at the time. What I do find interesting, however, is that this is the first instance of our dark blue used in a layout. The dark blue is heavily used in the headings and on borders around modals.<\/p>\n<\/div><\/div>\n\n\n\n

Another interesting thing about Windows 1.0 that still appears in modern websites is the underlined hyperlink. This is the first example of an underline being used to indicate a hyperlink that I have been able to find.<\/p>\n\n\n\n

To make Windows 1.0 even more interesting, we see the introduction of a hover state. The hallmarks of modern interaction design were alive and well in 1985.<\/p>\n\n\n\n