Perfect CSS Link Hover Colors

Pantone Swatch BookIt is always nice to get visual feedback when mousing-over link text. This effect is often achieved simply by changing the link color to a lighter or darker color.
For darker backgrounds it is often better to make the text lighter on hover and for lighter backgrounds you can go a few shades darker.

The trouble with applying this effect is that it requires some understanding of color values. For example, if your link text is on a green background then you will want to choose link text that is a lighter green for contrast. On hover you can then change this lighter green to white.

The issue with the above is in discovering what color value to use for the lighter green.

Photoshop Trick for Color Values

To get the correct color values in Photoshop I apply my background color to the canvas and apply white text. I then change the opacity of the text layer to 75%. You can then rasterize the font and use the color picker to get the hexadecimal value you are looking for. For example, if I have used the background color #1e9088, the lighter link text for green would be #c7e3e1 and the link hover text will be pure white #ffffff.

CSS Equivalent

Fortunately this trick is very quick and easy to apply in CSS. What is even better about applying is CSS is not having to calculate  the color values.

body { background-color: #1e9088; }
a. { color: rgba (255,255,255,0.75); }
a:hover { color: #fff; }

Here we have applied rgb values of 255,255,255 (white) and an opacity of 0.75 (75%).

RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+. For full compatibility you will need to covert the rgba property to the correct hexadecimal values.

Real-World Color Values

If you are looking for some inspiration, or something a little different, then check out your local paint store. They will have a massive array of color swatches that you can check out, many of these also include a few shades and tones of the same color. If you have a good scanner or camera then you can create a digital copy of these and use the color picker in Photoshop or your favorite image editing software to get the hexadecimal values.

Leave a Reply