Why are hyperlinks blue?

https://blog.mozilla.org/en/internet-culture/deep-dives/why-are-hyperlinks-blue/

348 235 5 years ago

blog.mozilla.org

Well, for the most part, they aren't anymore. Blue, I mean.

onychomys• 5 years ago

One thing that's always bugged me about the HN interface is that visited links are basically the same color as the metadata below them. Makes it hard to just glance at a screen and see the stories you've already clicked on.

SavantIdiot3• 5 years ago

No, visited links are grey. That's the default. I've seen "new" stories appear that are grey links because they were popular weeks earlier and I had already read them. Maybe reset your defaults?

grawprog• 5 years ago

The metadata below stories are also grey. I think that was the GP comment's point. Both visited links and metadata are grey.

blibble2• 5 years ago

there's a special place in hell for people that remove the underline from hyperlinks

DonHopkins5• 5 years ago

There is also a level of hell where reified retired 3D company logos swoop around booming out thumping techno trade show floor music, spinning, bowing, and pirouetting around with each other. Somewhere the old SUN and SGI and DIGITAL are still dancing.

alex_young• 5 years ago

Hmm. I don't see any discussion here, but weren't BBS links typically blue? I think I remember that being a thing, and that was well before 1993...

Also, cyan is a much better color for text on a black background. Dark blue is almost invisible. This makes some of the early examples a little complicated since we moved to white backgrounds around the same time as the web came to fruition.

Andrew_nenakhov2• 5 years ago

It was working as designed. If you already visited that page, you don't need to go there again. Time was precious on dial-uo connections, better go visit some new page instead!

kps• 5 years ago

we moved to white backgrounds around the same time as the web came to fruition

‘We’? Document-oriented workstations, including the one WWW was developed on, routinely used black-on-white back to the Alto, or NLS. (CAD stayed white-on-black due to the history of vector displays.)

reaperducer4• 5 years ago

In my BBS days (I ran a node of ARB Net), BBSes were black background by default with white text. "Links" were just key presses.

Press [SPACE] for next screen, or as it was commonly known, "Spank the blank."

[G] for the document repository. Or as it was commonly called "G-Philes."

egypturnash2• 5 years ago

Not "G-Philez"?

xyzzy21• 5 years ago

Obviously. Who didn't know this? At least who was alive and using the web back then :-)

onion2k• 5 years ago

Mosaic was the first browser I used, and the first I wrote websites for (I still only test in one browser ;) ).

Something the article doesn't touch on is the fact that there wasn't really such a thing as hex colors like "#0000ff" back then. You could use them, but no one did because they weren't guaranteed to work properly. There was a list of 256 "web safe colors" that you could use that were the 8 bit palette that most computers supported in VGA graphics (at 640x480 resolution), and then a further list of HTML colors that could be used if the user had a graphics card that could use 16 bit SVGA graphics. Using 24 bit hex code colors didn't come along until a little later, when computers were likely to display them properly.

In other words, links weren't #0000ff. They were "blue".

bitwize2• 5 years ago

Yes, people did use the hex codes back then. You just had to take care that the ones you used were on the list of 216 (not 256) web safe colors. The VGA palette was programmable and supported up to 262,144 colors, but a standard set of 216 was used in browsers to allow Windows, Mac OS, and other programs color table slots with which to draw their standard colors.

I think some browsers understood X11 color names like "blue" or "DarkSlateGray", but there are more than 216 of those, so same caveat applies.

geophile• 5 years ago

The ASCII color codes for a terminal are in a 6x6x6 space. That’s 216. Does that explain the number of web-safe colors?

tyingq4• 5 years ago

some browsers understood X11 color names

This still exists in some weird places. For example, I have a Hue portable light that connects to Alexa and can change colors. But I can only tell it X11 color names...it doesn't understand anything else. Which is funny given that both devices are fairly modern.

recursive• 5 years ago

It was actually only 216 web safe colors.

You could use names, or you could use colors whose RGB components were each multiples of 0x33. (00, 33, 66, 99, cc, ff)

DonHopkins5• 5 years ago

216 = 6 * 6 * 6 -- That's a "Color Cube": a 6x6x6 3D cube of 216 equally spaced colors. Not necessarily the colors you'd actually want, though, just mathematically convenient. Figuring out the closest color in the cube to any color is quick and easy (so you can do a quick 24=>8 error diffusion dither, for example, which needs to do that every pixel), but lots of the colors suck.

Web-Safe Colors (a Color Cube)

https://www.peachpit.com/articles/article.aspx?p=23671&seqNu...

Not to be confused with a Time Cube.

https://en.wikipedia.org/wiki/Time_Cube

irrational2• 5 years ago

I always used the hex codes for the web safe colors. I’ve been building web pages for 25+ years and I’ve never used color names.

reaperducer4• 5 years ago

the 8 bit palette that most computers supported in VGA graphics

There were plenty of us who surfed the web in less than VGA. I was on monochrome.

OS/2 Warp had a web browser and supported CGA: https://www.mit.edu/activities/os2/faq/os2faq0201.html

KingOfCoders3• 5 years ago

Around that time I brought a magazine to the web as a paid job and had endless discussions about the fact that the colors were "not accurate" and "not following CI".

kstrauser• 5 years ago

I remember those days! Cue a design editor holding Pantone cards up to the screen and scowling.

That also led to interesting things like websites telling you how to calibrate your monitor so that they'd render correctly, e.g. http://sasg.com/help.html .

jandrese• 5 years ago

One underappreciated aspect of paletted computers is that you couldn't just take the whole palette for yourself, you have to leave some colors for the OS and for the other applications running alongside you. Palette management gets really complicated when you have multiple applications trying to share one. Even though it takes three times as much video memory, you save considerable complexity when you go true color.

kbelder4• 5 years ago

Yeah, it really was a hindrance to multitasking. Your palette would sometimes reshuffle as you switched applications, making it seem like your screen was about to explode.

itomato2• 5 years ago

Specifically, "blue3":

"anchorColor: color Color to shade anchors whose corresponding documents haven't been previously visited. Default is blue3.

visitedAnchorColor: color Color to shade anchors whose corresponding documents have been previously visited. Default is violetred4."

https://www.math.utah.edu/~beebe/support/html/Docs/resources...

billyhoffman3• 5 years ago

I'm a little surprised by some basic facts the article gets wrong.

- WorldWideWeb was not created in 1987. Tim Berners-Lee released it in December 1990, based on a proposal he developed in 1989 [1].

- Windows 1.0 in 1985 did not have hyperlinks. It also did not have overlapping windows. [2] That second screenshot is of Windows 2, (from December 1987) showing the "Help" system, which did use underlined hyperlinks, from 1989.

It makes me question the thoroughness of their research at all.

What happened in 1993 to suddenly make hyperlinks blue? No one knows, but I have some theories. ... I like to imagine that Cello and Mosaic were both inspired by the same trends happening in user interface design at the time. My theory is that Windows 3.1 had just come out.

What? No! These are grad students working at the National Center for Supercomputing Applications in the 1990s on big powerful Unix workstations [3]. I highly doubt the UI choices of Window 3 were relevant or closely watched by that team.

1- https://en.wikipedia.org/wiki/Tim_Berners-Lee#Career_and_res...

2- https://www.filfre.net/2018/07/doing-windows-part-3-a-pair-o...

3- https://en.wikipedia.org/wiki/Mosaic_(web_browser)#History

setpatchaddress2• 5 years ago

“ Gopher Protocol was created at the University of Minnesota for searching and retrieving documents. Its original design featured green text on a black background.”

Yeah. All you need to know about this article.

nsxwolf• 5 years ago

Gosh I could have sworn I remember it being amber text on a black background.

city41• 5 years ago

I also found noting the Linux kernel's color schemes as rather odd.

zabatuvajdka3• 5 years ago

I think the article is more of a musing than a mathematical proof…

I mean who has the time to deep dive into 100% historical accuracy of these things.

I thought it was a neat look at a historical context of something mundane like a hyperlink.

purge• 5 years ago

The second screenshot is from windows 2, which was released in 1987

billyhoffman3• 5 years ago

Ahhh! Good catchup. I thought those "minimize" and "maximize" icons looked odd. Updated

dbt00• 5 years ago

I'm quite sure that students, even grad students, at UIUC, had lots of access to windows based computers in 1993. Just because they weren't doing their work on them didn't mean they didn't have PCs running DOS or Windows (and maybe dual booting Linux).

dotancohen2• 5 years ago

They were most certainly not dual booting Linux in 1993.

rahoulb• 5 years ago

I don't know about UIUC, but I was at university in the UK in 1993.

We had "labs" with about 30 Windows/DOS PCs in them that were for general use (meaning word-processing). Probably 1 in 100 students had their own computer (and if so it was more likely to be an Amiga or Atari ST).

My course wasn't computer-related, but I took a few computer-based modules (graphics, vision, AI, intro to programming). All of these apart from intro to programming where done on university SunOS/Solaris or Irix machines (and Intro to Programming was in Turbo Pascal for DOS on those Windows machines).

The SGI Irix machines (made famous in the original Jurassic Park) were really nice.

arc-in-space• 5 years ago

This article is poorly written, I was expecting an interesting investigation but stopped reading halfway through. Here's a bunch of underdescribed things with non-blue hyperlinks, and some completely unrelated ones that didn't even have hyperlinks. The answer to the headline could have been made in one sentence and there would have been no loss of value.

addingnumbers2• 5 years ago

The answer to the headline could have been made in one sentence and there would have been no loss of value.

That sentence would be "I have literally no idea, it seems completely arbitrary." There really isn't any value worth preserving, it's just misinformed commentary on a bunch of screenshots taken while the author was probably in diapers.

dredmorbius8• 5 years ago

Well, it does follow the Best Practices for Getting the Right Answer on the Internet protocol.

(a/k/a Cunningham's Law)

deathanatos• 5 years ago

I also disagreed with,

Here Microsoft uses the “hyperlink blue” for active states when a user clicks on different drives, folders and icons.

Hyperlink blue was a much brighter blue (pure blue, on the interfaces I used, but I was a litter later in the timeline) than Window's blue, which was a (noticeably) darker blue.

sumtechguy• 5 years ago

Yeah, if I were to 'pick' a reason it would be that it worked in the EGA colorspace. You did not exactly get a huge range of colors there. While in 1993 256 (small screen res) or 'truecolor' (very expensive vid card) was not unheard of but it was decently uncommon on low end hardware.

pdw• 5 years ago

For all their talking about early Windows versions, they missed that Windows 3 introduced a hypertext help system. It used green links.

This is what it looked like: http://toastytech.com/guis/win30help.png

pedroma• 5 years ago

That's a nice looking color.

DonHopkins5• 5 years ago

I guffawed at "I do not believe that this is the first instance of the blue hyperlink since this color is cyan, and not dark blue."

No Blue Scotsman!

Tim Berners-Lee told Ben Shneiderman at the time that he was influenced by the design of the HyperTIES-based "Hypertext on Hypertext" project from the 1987 HyperText conference that the ACM published, which had light blue links.

https://news.ycombinator.com/item?id=28317104

My students conducted more than a dozen experiments (unpublished) on different ways of highlighting and selection using current screens, e.g. green screens only permitted, bold, underscore, blinking, and I think italic(???). When we had a color screen we tried different color highlighted links. While red made the links easier to spot, user comprehension and recollection of the content declined. We chose the light blue, which Tim adopted.
His systems with embedded menus (or hot spots), where a significant user interface improvement over early systems such as Gopher. But Tim told me at the time that he was influenced by our design as he saw it in the Hypertext on Hypertext project that we used Hyperties to build for the July 1988 CACM that held the articles from the July 1987 Hypertext conference at the University of North Carolina. The ACM sold 4000 copies of our Hypertext on Hypertext disks.

fsiefken3• 5 years ago

Ah that's probably why the color green is also in the EDIT.COM hypertext arrow links in the MSDOS 5.0 Help menu in 1991.

kbelder4• 5 years ago

Windows help functionality has been declining ever since. Those old help files were so clean and snappy, well-organized and searchable. Now, I dread accidently pressing F1 in any major windows app.

duskwuff4• 5 years ago

They're also pretty seriously wrong about HyperCard:

Apple brought color to its HyperCards, but notably, the text links were still black and not blue.

HyperCard never natively supported any form of "text links". You could make a button with a text label, or a transparent button hovering over text, but there was no way to attach a behavior to a span of styled text without a lot of custom scripting.

(And, for what it's worth, the color XCMD for HyperCard never really caught on. It was a late addition, and never felt entirely like a native part of the application. Even when it was available, most users kept on authoring stacks in black and white.)

However, some UI elements did have blue accents when interacted upon

I have no idea what the author is referring to here. Possibly the blue tint in the system UI (like window titlebars), which has nothing to do with HyperCard and didn't apply to its in-app UI?

II2II• 5 years ago

I have no idea what the author is referring to here. Possibly the blue tint in the system UI (like window titlebars)

I get the impression that the author was trying to answer two questions, the second being: where did the color blue come from?

I was also under the impression that the color XCMD was not a part of HyperCard and was created by a third party, but I could be wrong there since it has been over 20 years since I've used HyperCard.

Stratoscope2• 5 years ago

Windows 1.0 in 1985 did not have...overlapping windows.

Actually Windows 1.0 did have overlapping windows.

They just weren't the default style for application windows.

But there were popup windows that overlapped other windows on the screen. These were typically used for dialog and message boxes, for example the End Session message box midway through that filfre.net article.

There was nothing stopping anyone from using a popup-style window for their application, and adding a titlebar so you could move it around on the screen. It just wasn't the custom, and people would think your app was weird if it did that. And on a typical system of the day (no GPU!), dragging your window around on the screen would perform rather poorly.

billyhoffman3• 5 years ago

Great catch!

I had read that Digital Antiquarian piece a few months back and had remembered about the "sub windows" that an app could have. But I had thought they were scoped to just be on top of the window for the app that spawned it, and couldn't leave that "tile."

However, you are totally right. This image right here clearly shows it overlapping another application's tiled window.

https://www.filfre.net/2018/07/doing-windows-part-3-a-pair-o...

This is the best kind of correct: technically correct!

rufus_foreman• 5 years ago

> WorldWideWeb was not created in 1987

WorldWideWeb was created by (mostly Republican) computer engineers who broke from IBM in Silicon Valley in the 1980s, forming little democratic circles of twenty to forty people with their laptops in each other's garages.

cxr• 5 years ago

This is a reference to a bizarre anachronism in David Graeber's writing. The conflict over this passage once carried over to the comments here on HN while Graeber was still alive, and he and a longtime foe quarreled about it to a fairly unsatisfactory conclusion.

slightwinder• 5 years ago

The part about project xanadu is also shady. They list it as 1964, but first paper was published 1965, while their idea of hypertext was born 1960, with the word choosen 1963. Not sure where the 1964 comes from. Not to mention that this wasn't even an actual implementation. It's disputable whether xanadu really should be the first one to mention here. The ideas of referencing documents is older and has previous implementations in analog world. It they wanna go just about hypertext, they should at least started with memex.

bityard• 5 years ago

Man what a weirdly speculative article. Is this what Mozilla employees are being paid to do these days?

It's basically a tour of old hyperlink and windowing systems... with lots of guessing and maybes. I'm not sure why it's relevant that Win 3.1 had blue titlebars, for instance. The author never actually answers her question but I imagine the obvious guess is the correct one:

Black text on a white background was the predominant GUI style at the time (probably due to Mac OS and Windows) and the software designers needed a visual cue that the hyperlink was clickable. Just underlined wouldn't have worked because underline was already a popular style in text processing. So they decided to give it a different color too. Blue is the most logical choice as it has good contrast against a white background, and has a neutral meaning (compared to say, red). There weren't really a lot of color choices back then, the largest palette you could count on at the time was 16 colors.

This was what Mosaic did and most browsers that came after it (including the most influential: Netscape) did what Mosaic did.

And there certainly were browsers of the era that didn't use blue underline for links, the next most common paradigm was some kind of bordered box around the text (usually the same color as the text).

not2b2• 5 years ago

Mosaic and Netscape didn't do black text on a white background. The default background was gray.

andy_ppp• 5 years ago

“Black text on a white background was the predominant GUI style at the time (probably due to Mac OS and Windows) and the software designers needed a visual cue that the hyperlink was clickable.”

For a comment complaining about unsubstantiated speculation this struck me as exactly that…

ebruchez• 5 years ago

I seem to remember (Sun workstations) that Mosaic was white while Netscape was gray.

lupire• 5 years ago

Why not green?

reaperducer4• 5 years ago

For the same reason they didn't use red. Red and green have meaning in many cultures, especially the one that invented the web. As stated by the parent commenter, blue is more neutral.

mikepurvis• 5 years ago

Green/Red has a connotation; plus green has poorer contrast. Blue is meaning-neutral and reads well.

blablabla123• 5 years ago

That's really speculation but there are certainly reasons against it. Mostly that red-green blindness is the most common color blindness and that blue is considered a more serious color. For instance banks often choose blue as predominant color. Maybe that's also something worth considering for an experimental technology.

ezconnect• 5 years ago

Maybe people back then want something different because the most common monitor back in the day was a green on black monitor. Having blue is refreshing looks new.

SavantIdiot3• 5 years ago

I agree, I don't think there's enough research here. If it were just one browser, perhaps designer choice.

But it is two browsers that chose blue, so perhaps there is some underlying Unix-y reason. Maybe early ncurses had chosen that blue for something unrelated to the web, and the decision goes back further.

Or maybe it was just lack of choices. For example, of the 16 original hex colors, blue & purple IMHO look the least like crap when mixed in with black text. Maybe its just that simple? red is too alarming, green is too bright, yellow/magenta/cyan/grey are too hard to read... now I'm speculating, but I think the answer might be an unrelated pattern in some other color-related origin.

moralestapia• 5 years ago

Is this what Mozilla employees are being paid to do these days?

That would explain whatever happened to Firefox.

Shameless plug: If anyone is looking to get rid of Chrome but don't like Firefox for any reason, try Brave, it is a great browser, really.

smoldesu• 5 years ago

Or Ungoogled Chromium, if you're more interested in protecting your privacy than you are collecting $0.30 of digital currency every month.

jrockway• 5 years ago

Is this what Mozilla employees are being paid to do these days?

Mozilla amazes me with their org-bloat-to-products-they-sell-for-money ratio. They have programming language teams, research bloggers, occasional splashy products, an in-house bug tracker, and oh yeah, they make a web browser.

I don't know how they do it, but it seems to be working out for them. If I was the CEO of a company that only had one customer, I would probably not be hiring software engineers to write a programming language that's not even used for the core product. But, I guess that's why nobody ever asks me to be the CEO of a company!

nx7487• 5 years ago

I would probably not be hiring software engineers to write a programming language that's not even used for the core product.

Rust is used in Firefox

tomerv• 5 years ago

I'm really glad that Mozilla is developing Rust. Even though I'm not using it (and haven't even learned it), it looks like a net positive for the world of software development. This is exactly the kind of thing that a nonprofit should do.

ksherlock• 5 years ago

Most of the rusty Mozilla team was laid off last year. Also: the MDN team.

satao• 5 years ago

Last year Mozilla laid off a lot of people from the MDN team. This might be the result of cutting costs for them.

queuebert• 5 years ago

Reads like a really young person who is overconfident in their abilities and lacks any actual experience with any of the things they mention. Every geezer on here knows Mosaic had blue links because they used it.

not2b2• 5 years ago

The answer is "Mosaic", even if someone can find some other earlier use of blue. They chose it, and Netscape kept it, which meant that everyone was trained to expect it.

irrational2• 5 years ago

I first used the WWW in 1995 (after seeing a fellow student in a computer lab looking at sports scores in a browser and asking him what he was looking at) and, of course, it used blue for links at that time. That fact that it took this article, 26 years after I first saw the WWW and 25 years after I built my first web page, to question why hyperlinks are blue makes me laugh. What else have I never questioned because it was always that way?

ssdspoimdsjvv• 5 years ago

Only ~33% of my 27", 1440p display is used for this article, which makes the images very unclear unless I zoom in, since they don't get their own paragraph and the text wraps around them. Not sure if this qualifies as irony for a blog article on UX.

incanus77• 5 years ago

Surprised this doesn’t mention visited links turning purple to mark that you had been there. I remember coding link, alink (active link during click), and vlink attributes.

basch2• 5 years ago

Are those dates right? WWW in 1987? That's like 3 years earlier than I thought it was.

rickstanley• 5 years ago

It was released in December 1990. As pointed out by billyhoffman in the comments, there are some factual errors.

basch2• 5 years ago

I saw that after the page reloaded. When you load a page and somebody comments, it doesnt inline load.

jacquesm• 5 years ago

No.

mattl2• 5 years ago

HyperTIES in 1988 had blue hyperlinks. http://www.cs.umd.edu/hcil/hyperties/

barbazoo• 5 years ago

Even though some facts might be wrong as others have pointed out, I just love reading about the history of the internet on a higher level and how it came about. I wish I could have been involved in that in its early stages. Truly transformative.

blibble2• 5 years ago

there was a short period of time in Windows 95 (I think with the shell update) where everything became a blue hyperlink

including the shortcuts on your desktop (which now functioned with a single click)

it was awful

dredmorbius8• 5 years ago

Probably Win98, the "Internet integrated into Windows" version.

(DoJ had some thoughts on that.)

mattl2• 5 years ago

It was also available for Windows 95 too as an IE “upgrade”

gjvc• 5 years ago

dunno, but I wish we'd started out with all browser default CSS looking like twitter bootstrap 2.3.2 rather than the bevelled tables and clunky buttons there were, and which took ages to shake.

egypturnash2• 5 years ago

Everything looked like that, those clunky bevels fit right in with the operating systems of the time.

timw4mail3• 5 years ago

I'm rather fond of buttons that look like buttons, rather than colored rectangles or buttons that look like links, because they have affordances to what they can do.

Bootstrap is a good tool for CSS, but I think it also over-legitimzed restyling and reinventing native HTML interactive elements.

tudorw• 5 years ago

blue because it stands out, red means stop, green means go, yellow and orange you cannot read.

js24• 5 years ago

According to Starman, yellow means go very fast:

https://youtu.be/g3WtvzmKCQQ

(Starman learns much like ML apparently.)

101008• 5 years ago

I miss blue for links and purple for visited links. I think Google still does it (which is great for the nostalgic of the webs), but today links are mostly buttons/images and not text anymore.

I remember also, in the 90s, was quite popular yellow text against a black/dark blue background. The old days!

timw4mail3• 5 years ago

The fact that the :visited state of links was gimped due to privacy issues doesn't help much either.

It used to be any visited link would look visited, regardless of the website. This made it possible to see where a user had visited across the web, and so visited links only apply to the current origin now.

At some point it also became hip to remove the underline from links, and links rarely have underlines anymore.

dredmorbius8• 5 years ago

Any deets on the privacy aspect?

I'm assuming a JS query can check link status and colour? With a targeted or crafted link-of-interest, user activity might then be tracked, yes?

gumby• 5 years ago

Apparently the author has never used a monochrome interface if they think gopher is “green” and Linux (which has nothing to do with hyperlinks either) is “white”

thibran• 5 years ago

I would love if links to the same domain would have another color, so that you know if e.g. a news site just links to own content or the source, without clicking all the links in the articel.

rhplus• 5 years ago

Quick answer: "Because blue is neither red nor green".

dystroy• 5 years ago

So, is there somebody there who knows Marc Andreessen or Eric Bina and could aks one of them to confirm they choose blue because it looked good on white while red or green were obviously too much loaded ?

This looks simpler than listing a bunch of other UI, many non influential and none of them giving the answer.

jccalhoun• 5 years ago

Agreed. I'm kind of shocked that the author didn't just ask people who were on the mosaic team.

Veen• 5 years ago

Perhaps I'm being unfair, but that's what a journalist would do, not a UI designer writing what is essentially a piece of content marketing.

vitaflo• 5 years ago

they choose blue because it looked good on white

Websites back then did not have white backgrounds, they were all gray. In fact I’ve always wondered why the default background was gray more than why the links were blue.

pornel• 5 years ago

Because window backgrounds were gray in NeXT, because buttons used both white and black to create beveled "3d" borders, because beveled buttons were a fancy upgrade compared to simple borders in 1-bit graphics. Screen resolutions and drawing speed weren't good enough to waste on thicker borders, so 1px lines had to stand out on their own.

Stratoscope2• 5 years ago

Back then, most people used CRT displays, and just like today, tended to have the brightness turned up too high. And it was fairly common to have a 30 Hz refresh rate. The refresh might even be interlaced!

A white background in this situation could lead to noticeable flicker, especially as you moved your eyes, e.g. look away from the monitor and look back at it.

The gray background made this flicker less noticeable.

https://en.wikipedia.org/wiki/Refresh_rate

gnicholas2• 5 years ago

This helps explain why they chose blue. Green and red can be difficult to read on a grey background.

pgroves• 5 years ago

My boss did UI/UX on Mosaic (we are both at NCSA today). I will ask her on Tuesday when I see her. She has lots of wild stories about why things are the way they are.

Santosh83• 5 years ago

Interactive states should always be styled in your stylesheets. Examples include: touch, visited, hover, active and focus.

Agree in general, but I wonder if a separate style for visited hyperlinks is still useful these days? Does anyone benefit by visited links being differentiated (by colour or another means) from unvisited ones?

hunter2_2• 5 years ago

There are countless reddit comments that mention gleaning information from purple links, because it's useful.

godshatter• 5 years ago

When I'm at a site with many different topics in a list, it's nice to see which ones I've already visited. Links that don't show this or (even worse) don't differentiate as a link until they are moused over are one of my pet peeves.

janvdberg• 5 years ago

Semi-related: I recently learned [1] that there is a third color associated with links: blue for standard, purple for visited, and red WHILE actively clicking the link (I don't think I noticed this before).

[1] https://www.youtube.com/watch?v=HLdDvQym5xk

themodelplumber• 5 years ago

Link, Visited, Hover, Active...I think you're referring to the last one?

I remember learning these with the LoVe / HAte mnemonic for CSS. Maybe from Cameron Moll, can't remember...

hunter2_2• 5 years ago

many links, specifically hyperlinks, are blue

What does this superset/subset relationship refer to? I thought link was just a shortened word meaning the same as hyperlink.

tyingq4• 5 years ago

Interesting topic, for sure, but the info on what colors were used by "Gopher Protocol" and "Linux Kernel" are pretty silly. Those colors would vary by what real or emulated terminal somebody was using.

dkarl• 5 years ago

I thought that was a nice little touch of humor.

DonHopkins5• 5 years ago

Ben Shneiderman developed "TIES" aka "HyperTIES" at the University of Maryland Human Computer Interaction Lab, and here's what he recently wrote in response to a question about hyperlinks, in which he mentioned the origin of blue as a highlighting color.

Also here's a link to an article about the NeWS version of HyperTIES that we developed at HCIL, and some demos of HyperTIES and its Emacs based authoring tool, which had pie menus and embedded interactive PostScript "applets" in 1988.

https://medium.com/@donhopkins/designing-to-facilitate-brows...

HCIL Demo - HyperTIES Browsing

https://www.youtube.com/watch?v=fZi4gUjaGAM&ab_channel=DonHo...

HCIL Demo - HyperTIES Authoring with UniPress Emacs on NeWS

https://www.youtube.com/watch?v=hhmU2B79EDU&ab_channel=DonHo...

Don Hopkins and pie menus in ~ Spring 1989 on a Sun Workstation, running the NEWS operating system.

https://www.youtube.com/watch?v=8Fne3j7cWzg&ab_channel=Cathe...

John Gilmore via Internet-history <internet-history@elists.isoc.org> Date: Mon, Apr 13, 2020, 11:56 PM To: Brian, internet-history, Jeff

I forwarded this question to my friend Don Hopkins, who was a student of Ben Shneiderman back in the day. Ben ultimately responded:

From: Ben Shneiderman <ben@cs.umd.edu> To: Don Hopkins <don@donhopkins.com> CC: John Gilmore <gnu@toad.com>, Ben Shneiderman <ben@cs.umd.edu> Subject: RE: [ih] origins of the term "hyperlink" Date: Mon, 13 Apr 2020 15:15:52 +0000

HI Don (and Jack Gilmore),

Thanks for including me in this conversation.

I do not have a claim for the term “hyperlinks” and don’t know when it came into use. My claim is for the visual interface for showing highlighted selectable links embedded in paragraphs. This is what we called embedded menu items in that I think is an influential paper on the topic, which was peer-reviewed and published in the CACM in April 1986.

https://dl.acm.org/doi/10.1145/5684.5687

http://www.cs.umd.edu/~ben/papers/Koved1986Embedded.pdf

While Engelbart had shown a list that could be selected by pointing and clicking in 1968, I claim the idea of embedded highlighted selectable text in paragraphs. This was implemented by grad student Daniel Ostroff and described in:

Ewing J, Mehrabanzad S, Sheck S, Ostroff D and Shneiderman B (1986), "An experimental comparison of a mouse and arrow-jump keys for an interactive encyclopedia", International Journal of Man-Machine Studies, Jan., 1986, Vol 24, pp. 29-45.

[Abstract] [BibTeX] [DOI]

Ostroff D and Shneiderman B (1988), "Selection devices for users of an electronic encyclopedia: an empirical comparison of four possibilities", Information Processing and Management, Nov., 1988, Vol 24(6), pp. 665-680.

[Abstract] [BibTeX] [DOI]

I think the 1988 paper was the earlier study, but the publication took a while.

My students conducted more than a dozen experiments (unpublished) on different ways of highlighting and selection using current screens, e.g. green screens only permitted, bold, underscore, blinking, and I think italic(???). When we had a color screen we tried different color highlighted links. While red made the links easier to spot, user comprehension and recollection of the content declined. We chose the light blue, which Tim adopted.

His systems with embedded menus (or hot spots), where a significant user interface improvement over early systems such as Gopher. But Tim told me at the time that he was influenced by our design as he saw it in the Hypertext on Hypertext project that we used Hyperties to build for the July 1988 CACM that held the articles from the July 1987 Hypertext conference at the University of North Carolina. The ACM sold 4000 copies of our Hypertext on Hypertext disks.

Our history is here:

https://www.cs.umd.edu/hcil/hyperties/

and the video is very helpful in showing the design we used, which is what I think Tim built on for his WWW prototypes.

https://www.youtube.com/watch?v=29b4O2xxeqg

So in summary, I don’t know who coined hypertext, but I do think our work visual and interaction design was influential.

Our Hyperties system was picked up by Cognetics Corporation (around 1987) who made a modestly successful commercial run with it, doing dozens of corporate projects, most notably the Hewlett-Packard user manual for their Laserjet 4 was distributed as a Hyperties disk.

Hyperties was the name we shifted to after we got a stop and desist order from a lawyer because our TIES (The Interactive Encyclopedia System) conflicted with an existing product. By then “hyper” was a growing term.

Let me know if this helps, and what other questions you have…. Ben

58x14• 5 years ago

More relevant details here than the entire Mozilla article.

dredmorbius8• 5 years ago

Here's your answers, people.

ChrisArchitect2• 5 years ago

amazing digging, thank you!

karmakaze• 5 years ago

Also worth mentioning that WinHelp (the F1 documentation pages) used green underlined text for links in some places (e.g. list of referred topics).

KingOfCoders3• 5 years ago

1993? Not so sure about "simply because color monitors were becoming more popular around this time."

Having lived through the 80s with computers and owning a Commodore 1084 I'd say most had color much earlier.

I remember using the ViolaWww browser on a color XTerminal in 1992.

ducttapecrown• 5 years ago

Blue links turn purple because they get red.

dotancohen2• 5 years ago

Yellow, world!

dredmorbius8• 5 years ago

You realise on HN that this will be rated as a greyed comment?

EGreg• 5 years ago

This article is so strange, even though it is hosted by Mozilla. Here is straight from the horse’s mouth, I remember Tim Berners-Lee reminiscing about green links originally

A: There is no reason why one should use color, or blue, to signify links: it is just a default. I think the first WWW client (WorldWideWeb I wrote for the NeXT) used just underline to represent link, as it was a spare emphasis form which isn't used much in real documents. Blue came in as browsers went color - I don't remember which was the first to use blue. You can change the defaults in most browsers, and certainly in HTML documents, and of course with CSS style sheets. There are many examples of style sheets which use different colors.

My guess is that blue is the darkest color and so threatens the legibility least. I used green whenever I could in the early WWW design, for nature and because it is supposed to be relaxing. Robert Cailliau made the WWW icon in many colors but chose green as he had always seen W in his head as green.

One of the nicest link renditions was Dave Raggett's "Arena" browser which had a textured parchment background and embossed out the words of the link with a square apparently raised area.

https://www.w3.org/People/Berners-Lee/FAQ.html

jrochkind1• 5 years ago

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.

I'm confused, what in Windows 1.0 is, or is being called, a "hyperlink" that's underlined? Is it shown in the screenshots? I wouldn't have expected there would be such thing as a "hyperlink" in Windows 1.0, and am not sure what the author is referring to.

ectopod• 5 years ago

It's the window with the caption "Microsoft Help". (And it's actually Windows 2, not 1 as the article claims.) A help file was a bunch of hyperlinked rich-text documents in a single file. The hyperlinks could even span help files, though I don't know which Windows version introduced that.

(Edited for tone.)

JonathonW3• 5 years ago

Given the author's "conclusions" about Windows's influence here, it's probably worth mentioning that Windows 3.x (including both 3.0 and 3.1) used green for hyperlinks in its help system by default (which was hypertext but not HTML): https://i.imgur.com/ZjX5xIW.png

Green hyperlinks stuck around in the Windows 95 help system, and were eventually replaced when Windows 98 switched to Microsoft's new HTML Help system which defaulted to blue hyperlinks (inherited from Internet Explorer).

slingnow• 5 years ago

It's likely this person came across this during their research, but decided to omit it because it didn't fit in with their already weak and speculative narrative.

sgarrity• 5 years ago

I always assumed that the green help links color was intentionally differentiated from regular blue web links to clearly imply that they remain within the "Help" universe.

The timeline might undermine my assumption.

JonathonW3• 5 years ago

I don't think the timeframe's right for that-- were there ever even any web browsers that ran on Windows 3.0?

At any rate, there wouldn't be any need to distinguish internal help links from web links, because neither Windows 3.0 nor 3.1 ever shipped with a web browser-- can't link out in your docs if the tools aren't available to follow the links. Early versions of Windows 95 didn't, either, with IE 2.0 being bundled with the OS for the first time with OSR1.

namanyayg• 5 years ago

All these screenshots look so beautiful. No telemetry, no gamification, just function.

codazoda• 5 years ago

I was kind of surprised the article didn't discuss the BBS culture that existed before the internet. The blue link may have started after this but maybe it borrowed a bit from the colored keyboard characters used in text-based menu systems.

I also used the something-folio hypertext system before I used hypertext on the web. Did it have blue links? I can't remember.

LocalPCGuy• 5 years ago

I was looking for information on BBS culture also, but in my fuzzy memory of those times, the vast majority were very much a dark color scheme, black/dark background with light text. And there was a lot of customization going on as well, but I don't know if I can see BBSes as a place the link color came from. It's also probably one of the most obscured and overlooked part leading to the rise of the internet, I rarely see it mentioned in "history of" articles.

joking• 5 years ago

this is the perfect example of how to write something wrong on internet, so you can get all the correct facts for free from strangers and you can write a correct article

lordgrenville• 5 years ago

(aka Cunningham's Law)

GekkePrutser• 5 years ago

I knew this was introduced by NCSA Mosaic. I remember it well.

It was actually a very good browser. Not as many features as Netscape but it was very fast. Netscape added too many fluff features like backgrounds and moving GIFs which were abused way too much (see any "1990s retro web site" for what I mean), so I often opted to using Mosaic even after Netscape became mainstream.

It makes sense too, black doesn't stand out enough from unlinked text. And can be confused with regular non-link underlining. It could have been any colour but it's a good convention. After all we could also have used green for stop and red for go (like in the first episode of "Sliders" :) ), but at least everyone around the world uses the same.

itomato2• 5 years ago

...X11R3.

https://www.math.utah.edu/~beebe/support/html/Docs/resources...

anchorColor: color Color to shade anchors whose corresponding documents haven't been previously visited. Default is blue3.

visitedAnchorColor: color Color to shade anchors whose corresponding documents have been previously visited. Default is violetred4.

activeAnchorFG: color Color to shade anchors that are in the process of being activated. Default is red.

activeAnchorBG: color Color to shade the background of anchors that are in the process of being activated. Default is grey80 (the same color as the application's background).

richardwhiuk• 5 years ago

Don't see any evidence X11R3 is involved?

That's just the docs for Mosaic which TFA says was responsible.

omar_kha• 5 years ago

yet this website has black links

michaelhoffman• 5 years ago

I believe OS/2 1.2's help system used a different color for hyperlinks but it's hard to find a definitive screenshot.

sysadm1n• 5 years ago

I find myself touching any piece of text that is blue, for example an AD in my local newspaper that has some text in blue. This is due to an ingrained pattern of behavior and the result of being decades on the web.

In the future when augmented reality becomes the norm, it could be possible that clicking this blue link actually brings up a webpage, either on my phone, or broadcasted into my retina.

QR codes just don't cut it.

LorenPechtel• 5 years ago

They're blue because they're sad you're leaving their website! :)

rietta• 5 years ago

Just checked on my Windows 3.1 QEMU image and Help used Green hyperlinks still then.

m0rti• 5 years ago

It is similar to why we chose gold to use as “gold” as humanity. Not all elements are suitable to be used as a store of value and physical currency.

Let’s look at the primary and secondary colours.

Yellow: Bad contrast. Red or Green: Action colours, would be bad to see them everywhere. Plus there might be accessibility concerns. Orange: Mostly used as “Not as urgent as red”. Purple: Not as neutral as blue, yet it is the second best option, that’s why visited hyperlinks are purple I assume. It is the logical choice.

We are left with the colour blue. Also, a plus that it is a primary colour; I would assume it is easier to display primary colours in earlier tech.

amelius• 5 years ago

On HN they are not ...

SeanLuke4• 5 years ago

In 1990 NeXT released the NeXTstation Color. There are screenshots online of WorldWideWeb.app running on the NextStation Color, and the hyperlinks are all blue. It's true that Tim Berners-Lee wrote WorldWideWeb.app on monochrome NeXT cubes, but it seems reasonable that the default underlining he used (in the Text object) may have been blue when displayed in color.

Very strange that this article didn't bother to even consider or investigate this, simply dismissing the NeXT as monochrome.

See for example:

https://www.w3.org/History/1994/WWW/Journals/CACM/screensnap...

https://en.wikipedia.org/wiki/WorldWideWeb#/media/File:World...

js24• 5 years ago

Those screenshots are from 1993 ("This is a (242kB) screen shot of the browser, taken when things had got to the point that Communications of the ACM was interested in an article, in 1993."[1]), which matches the year the blog post settled upon for when blue links appeared, but that still doesn't answer why they are blue.

Can you find a screenshot definitively from before 1993 that shows blue hyperlinks?

1. https://www.w3.org/People/Berners-Lee/WorldWideWeb.html

SeanLuke4• 5 years ago

Nope, can't find any color screenshots earlier than 1993. But WorldWideWeb.app would have run just fine on the NextStation Color, and NeXT machines elegantly provided a path to color from the very beginning, even when in monochrome. I don't know if pre-1993 links were gray or blue, but one would have thought the author would have bothered to investigate what color the links were. My money is on blue. I'll bet Tim could say for sure.

EDIT: as of 1991 (the earliest known code), it was still a black underline in the code. See line 640 of

https://github.com/cynthia/WorldWideWeb/blob/master/NextStep...

As of March 1991 he was contemplating providing color underlines, see line 61 here:

https://github.com/cynthia/WorldWideWeb/blob/master/NextStep...

Clearly it changed between 1991 and 1993 but I don't know when. Money still on WorldWideWeb.app being the first blue link application.

a-dub2• 5 years ago

my thoughts exactly! what if you run the original version of WorldWideWeb on a color NeXT?

also was somewhat wondering if maybe the blue came from some sort of NeXT platform default. (grey #2 renders as blue on color machines or somesuch)

SeanLuke4• 5 years ago

No, gray rendered as gray.

quartz• 5 years ago

I'm curious what Lynx, which is curiously absent from this piece, did with hyperlinks since it was released in '92 I think?

sedatk• 5 years ago

TL;DR: Mosaic 0.13 introduced the blue links because it had to distinguish visited and unvisited links. Just paraphrasing article here, not sure about it's accuracy since many have pointed out its inaccuracies.

js24• 5 years ago

From https://www.w3.org/People/Berners-Lee/FAQ.html

Q: I'm a student of visual communications and asked myself why links are blue. I found some answers that might be, for example blue is a color of learning, but I'm not sure what is right. Is there any reason, why links are colored blue ?

One of the nicest link renditions was Dave Raggett's "Arena" browser which had a textured parchment background and embossed out the words of the link with a square apparently raised area.

[See also https://www.crazyegg.com/blog/why-hyperlinks-are-blue/ which links to the answer above but also contains a few other references.]

gabereiser• 5 years ago

I believe this is the correct answer. It was the default for Netscape navigator back in early 90s. If you wrote an html page without styles it gave you a white background, blue hyperlinks, and times new roman font. As for why the default for NN was blue, I really don’t know other than the juxtaposition of it vs normal text. To claim it was mosaic would align with my history of it with NN though.

Terretta3• 5 years ago

If someone in 1989 handed you an article with occasional markings added indicating important terms or concepts, it was probably a blue underline, which contrasted and stood out nicely from the black photocopy or print.

askvictor• 5 years ago

I'm wondering why they chose a serif font as the default, given their rendering on low-res screens (as most were at that time) is pretty bad.

sirspacey• 5 years ago

I always thought it was ported over from Apple’s Hypertext pre-internet

cma2• 5 years ago

Blue is the least dense rod cell, so shows up best against white over any other color. Green is the most dense rod cell, so shows up best against black.

This is why Apple makes Android users have white on green text, the least readable choice.

jsf01• 5 years ago

Why would Apple have made white on green the default for so many years prior to introducing blue?

layer8• 5 years ago

The simplest explanation is that blue is the darkest of the primary colors (at full intensity, think 8/16-color palette) and hence has the best contrast on white or gray background (after black). It also helps that it isn’t a signalling color like red (important/error) and green (good/go).

defaulty• 5 years ago

The story of the blink tag is much more interesting

5faulker• 5 years ago

Interesting that the post's coming from a tangerine lover.

feffe• 5 years ago

Maybe because blue is the most visible color against a white background, except for black? Like blue and black are the two most common pen ink colors.

floor_• 5 years ago

Spoiler, this article doesn't answer the question.

davesque• 5 years ago

I remember when a friend of mine in middle school fired up the first version of Mosaic on his mac. I could hardly even tell what the point of the application (as they used to be called) was. He was also really into hypercard. We actually did a school project together in hypercard. I had really no idea at the time that such technologies would become so widespread and important. They initially seemed really arbitrary.

dredmorbius8• 5 years ago

Given that numerous early Web clients were text-based (especially www and lynx), there's the question of what colours were available on a (possibly) colour-capable display, or a colour-aware terminal emulator.

These would have been provided through ANSI escape sequences, which allowed for white, black, red, green, blue, yellow, magenta, and cyan.

https://en.wikipedia.org/wiki/ANSI_escape_code

With a bright background (white), blue is the most clearly-visible non-black colour, and avoids R-G colourblindness issues. On a dark background (black), cyan is light enough to be readable, but not as glaringly distracting as either red or yellow.

Given the prevalence of green and amber phosphor displays, and some adoption of that colour scheme for terminal colours, yellow and green might have been avoided due to conflicts with standard text.

The next question is when colour support was added to terminals. I'm confident that xterm could have foreground/background colours specified by 1997. Support for 16 colours didn't hit xterm until 1996:

https://invisible-island.net/xterm/xterm.log.html#xterm_39

rxvt may have had colour support earlier. I'm unsure of dates or changelogs though it's mentioned in print as of 1994: https://www.google.com/books/edition/The_X_Resource/RKhFAQAA...

sleavey• 5 years ago

Another curiosity related to this one is why <h5> and <h6> have smaller default font sizes than <p>, given that they are headers and should therefore "head" a section of text [1].

[1] https://stackoverflow.com/questions/55696808/why-do-h5-and-h...

Terretta3• 5 years ago

They weren’t when I started web designing. As noted in that excellent answer.

ridaj• 5 years ago

What happened in 1993 to suddenly make hyperlinks blue? No one knows, but I have some theories.

I doubt that no one knows. They found the smoking gun in the Mosaic release notes - the people who worked there are probably still alive and might remember why!

robbrown451• 5 years ago

Seems pretty obvious to me that blue is the color that gives best contrast to a white background, while not being black or being so dark a color that the hue doesn't stand out. This is why blue pens are considered the only acceptable pen for writing (such as filling in a form, or a school paper) other than black.

Similar to the reason to use yellow for highlighter and otherwise for changing the background color, you want a light color whose hue is detectable, but it similar enough to the white background that text is still easy to read.

The Munsell color solid is distorted to show that pure yellow is light, pure blue is dark.

https://art-design-glossary.musabi.ac.jp/wpwp/wp-content/upl...

Terretta3• 5 years ago

blue is the color

Yes. If you were handed a printout or photo copy in 1980s with some terms or phrases manually marked to stand out, it was probably with blue underlines. Black didn’t stand out, red was for corrections.

That simple.

ChrisArchitect2• 5 years ago

this is a really long clickbait-y/listicle type article that I wouldn't have expected to be on mozilla. Despite it's "deep dive" it barely answers it's own question and just beats around random browser/computing history like we can't see that anywhere else? Weak.

masswerk• 5 years ago

My two cents: I think, it's mostly due to grey background color, text contrast and CRT rendering.

In reverse order:

* Not all colors lent themselves equally well to a CRT, especially to the more cost effective ones. Green, esp. when in multiple shades, didn't render well (or, the other way round, issues with green are more easily detected by the human eye), so you won't see much green in early color UIs (or rather bright single-color expressions in elements like bars).

* Also, CRT specific, you want to stick with primary colors (RGB), since even a small misalignment of the cathodes will result in blurry text in more evenly distributed hues. (Same is true for the outer regions of larger color CRTs with shadow masks.)

* Monitor calibration wasn't always the best, shades of grey often exhibited a red hue, esp. on systems with a gamma of 2.0.

* Considering what we have established, we are searching for a color which consists mostly of R, G, or B and renders well on an average color CRT on top of a grey background of #C0C0C0. (Also, mind that in 1993/4, we're probably not speaking of millions of colors to choose from, but rather more of a 4-bit color palette, if we're looking for robustness.)

- Green, as already established, is somewhat complicated. Also, a mostly green color of comparable intensity is perceived somewhat brighter than, say a blue one. It will stand out against black text, probably more than you want, and it's contrast ratio to a light grey suffering from a red tint isn't great.

- Red may not be the best choice either, as its contrast to grey isn't the best (ask your printer) – and its use may be best reserved for representing an active state. (There's also the cultural issue with red usually signifying limits or even off-limit areas, which isn't especially inviting.)

- Which leaves blue for a passive state, which is actually a good choice. It's perceived slightly darker than the other primary colors, which is favorable for rendering text, it has a good contrast against light grey, and isn't affected by any missalignments or color calibration issues (as it doesn't share with red), and, while visible, isn't too distracting in what is mostly black text (you still want to provide for fluent reading of a given text, even, if it embeds a link). Moreover, it is more friendly to impaired vision than green or red (which are actually used in diagnosing defective vision). Properties, for which it had been used as a favorite color in UIs already. Moreover, on the cultural side of things, where red indicates restriction, blue indicates recommendation and instruction (compare traffic signs).

So, I think, blue was quite a natural choice.

bencollier49• 5 years ago

Interesting article, but written by Americans it necessarily missed another ancestor of the blue hyperlink, Teletext. Given that Tim Berners-Lee is English, it's relevant.

gnicholas2• 5 years ago

Some websites have been playing with this in recent years. Fast Company uses an orange color (with no underlining) [1] and Wired experimented with thick underlining, which I always thought looked terrible. [2]

1: https://www.fastcompany.com/90669062/is-your-brand-on-mute-w...

2: https://stackoverflow.com/questions/24691460/how-does-wired-...

kbob• 5 years ago

IIRC, Dan Connolly, when he was at Convex, wrote an SGML viewer that used blue hyperlinks. He did this work in 1990-92. At the same time, he was collaborating with Tim Berners-Lee in his spare time.

So blue was in the air by then.

thomasfl• 5 years ago

"Rhapsody in #0000FF" - such a poetic title.

Why are hyperlinks blue?

Related Stories