General Color section question

Does anyone know of any guidelines and what is common for selecting colors

[JaOtEaY]

I'm creating a website and was curious what the general population does for their hover colors. So if you have a background color, and then a text color, and then a link color. What do you do for you hovers on those links. Do you make them different, or just different shades? and if shades, lighter or darker. I was just hoping to kind of get a feel for what others are doing.

Thanks,
Joey/b

[pageoneresults]

I usually have three or four primary colors that are used in a particular site design. Those colors are then strategically used for links, visited links, hover links and active links. There are four states for a link that you can use...

a:link
a:visited
a:hover
a:active

The fourth one

a:active

is the color of the link when clicked. You can add a really nice touch of flavor to your sites by utilizing all four link states.

[JaOtEaY]

Thanks, I was a little more curious about the actual color selection in general, suppose I have my link color. What in general is done for the hover color?

Thanks for you quick reply pageoneresults

[pageoneresults]

What in general is done for the hover color?

Let's say that your link colors are a dark blue. You might make your hover color a light blue. Or, you may decide to keep the dark blue on hover and add a background color. There is so much you can do with the four link states by using different colors and backgrounds.

a:link{color:#008;background:#eee;}
a:visited{color:#999;background:none;}
a:hover{color:#00f;background:#ddd;}
a:active{color:#f00;background:#ff0}

The above is just an example. You'll need to set something up and test to see what works best for your design. There are all sorts of neat things you can do with additional styling on the a elements.

[JaOtEaY]

Ok, thanks again!

[Purple Martin]

For corporate pages (which have to look serious and non-glary) I use:

a:link { color: #0000FF; }
a:visited { color: #0000FF; }
a:hover { color: #CC0000; }
a:active { color: #0000FF; }

It's the standard link blue (standard is good: users know immediately it's a link), and I've changed the rollover to a red that I think contrasts well with the normal blue.

I've changed the followed and active colours to match the normal link colour. I've done this because I find that otherwise followed links can be a dull colour that "drops out of view", if you know what I mean. I want links to always look like links, even if they've already been followed.

This is one of those questions where if you ask 100 people you'll get 100 different valid opinions. The best answer... maybe you should find out what Jakob has to say about it: his opinions are backed up by serious research.

[pageoneresults]

a:link, a:visited{color:#00f;}

For the longest time I made my

a:link

and

a:visited

the same color. After being up to my neck in usability studies, I finally broke down and made the switch to making my

a:visited

a different color. When you have larger sites with more links, I think it is a very good idea to let the user know which links they've visited.

[rogerdp]

Ask yourself why you even need visited, hover, and active colors. Or even why you need a link color!

If the only reason you have is artistic, then stop reading and go print your pages to hang up on the refrigerator. Now.

Link colors are for distinguishing which text is a link and which isn't. The user knows it leads to more information. However, that text is still part of the paragraph and section, and the link color should not be distracting when trying to read it. (Underlining is also helpful, but is used in other mediums and is more difficult to recognize alone. We're trained that a special color + underline on a webpage means a link.)

Visited colors let the user know where they've been. Unless you expect the user to keep in mind your sitemap, they are a must. Again, still need to point out more information is available and shouldn't distract. However, don't de-emphasize them too much; they too are part of the text and a viewer shouldn't have to squint to pick specific words out.

Hover colors serve only a small purpose, they let the user know what text makes the full part of the link. They can be distracting, since they aren't in use continuously. In fact, being distracting (also known as highlighting) can help prepare the user for the next page, as it puts those words in their mind. (If you use good link text.)

Active colors have an even smaller purpose than hover colors. They again serve the highlighting function, but now you're getting into the coolness or neato aspect outweighing the other usefulness.

The point about conventional colors is very true. Although users are getting more and more accostomed to different colors and as this continues the importance of blue links will diminish.

Keep these thoughts in mind and any colors you pick will be good.

[edit_g]

Sorry to be off topic but I nearly filled the screen with coffe when I misread this thread title as:

General Colon section question.

Sometimes I love being dyslexic...

[scottiecla]

I like to make the hover color a little brighter than the link color so that it seems to light up as you mouse over.

Making the visited color a slightly greyer version of the main color will help users to see where they've been without impacting the color scheme too much.

[Purple Martin]

I've thought about it a bit more and I've realised why I usually use the same colour for visited. Most of my work is for our corporate intranet site (the organisation I work for is huge and has something like 100 sub-sites in it's intranet). The people who use these sub-sites are regular visitors and keep coming back over and over for the same reference material. They know where they're going, they know where they've been, and just about every link in the sub-site they're using has alredy been visited. In this situation, it makes sense to keep visited links bright blue so they can easily navigate without having to squint at the text to find the link that they already know is there.

What this boils down to is... know your audience!

[rogerdp]

In reply to Purple Martin, the squinting is *exactly* what I am talking about.

You still may want to have a different visited color. I find "standard blue" for link and navy for visited works well with black text. That is,

body { color: black; }
a:link { color: blue; text-decoration: underline; }
a:visited { color: navy; }

[aeve]

I agree that :active is the least important of the anchor pseudo-classes, but recently I've been into making it half way in between the :hover color and the :visited color to signal the transition.

[JaOtEaY]

Thanks everyone, the last several replys were exactly what I was hoping for! I was just hoping for general 'guidelines' and suggestions as well as what designers feel is good and bad!

Thanks again!