However, sometimes I want a wheel that I can edit by changing the hues or blocking out some colors so I can use the wheel in presentations to clients or colleagues.

After much googling I couldn’t find any PSD or AI color wheels so I made them myself and here they are for you to download.

Download color-wheel.zip

In the PSD each segment of the wheel is a shape layer so you can change the hues with ease. I have included labels for each of the hue, tint, tone and shade areas. There are also layer styles which you can easily switch on for blocking out colors.

The AI has each segment as a separate shape and the labels are also included for each of the hue, tint, tone and shade areas.

You might also be interested in:

• Color wheel and colour theory;
• Color inspiration around the web;
• Color Angels;
• Color scheme designer;
• Color theory for designers; and
• Color theory cheat sheet.

Updates

18 Mar 10 – Download now includes AI version of the colour wheel as well as the the PSD version.

View the demo | Download the demo

I first got the idea for horizontal stripes from Elliot Jay Stocks‘ book, Sexy Web Design, where he produces a web design that has horizontal stripes running off the browser page. I then implemented it myself in the design of oldschoolnodoubt.com.

More recently, Neutron Creations launched a new design, again by Elliot Jay Stocks with CSS implemented by Ben Bodien which features the effect both horizontally and vertically.

Right stripes

Here’s the html for a stripe that starts in the middle and heads off to the right side of the screen, let’s keep it simple:

<div id="container">
<p class="horizontal right">Horizontal stripe</p>
</div>

Here’s the css:

.horizontal {
width:100%;
position:absolute;
margin:20px 0;
padding:20px;
}

.right {
left:50%;
margin-left:-100px;
text-align:left;
}

Ok, let’s break down the css. Firstly width:100%; this will make sure that your stripe is always the width of the user’s browser so, no matter how humongous their screen is your stripes will always go off their page.

In order to make sure we can start the stripe from wherever we like we use position:absolute; and use margin:20px 0; to place it vertically. Finally, we use padding:20px; because, well, everything needs a bit of padding.

Now we position the stripe horizontally. For a stripe that heads off to the right we set left:50%; which will give you a stripe that starts in the exact center of the page and continues on forever.

But, I want my stripe to start off center, in fact 100px towards the left of where it is now so I set margin-left:-100px;. If I want it to be off center and 100px towards the right I will use margin-left:100px;.

I then align my text with text-align:left; because I want the text to be next to the end of the stripe.

At this point you probably have a long stripe that heads off in the direction you want but you also have a horizontal scrollbar and that’s rarely a good thing. So now we need to do some work on the container div to get rid of that scroll bar.

Here is the css to go with that:

#container {
width:100%;
overflow:hidden;
position:relative;
height:200px;
}

We want the stripes to head off the browser page so the containing div must be the full width of the browser with width:100%; and in order to get rid of the scroll bar we use overflow:hidden; hiding the excess of the stripe.

You will now have a blank screen beacuse the stripes have a position:absolute; and as there is no content in the containing div we need to set a height:200px; and position:relative; to make sure that the stripes are visible.

Left stripes

To acheive a stripe that starts on the left and stops in the middle I add replace the right class with a class of left on the p:

<div id="container">
<p class="horizontal left">Horizontal stripe</p>
</div>

I then reverse all the right stripe styling:

.left {
right:50%;
margin-right:-100px;
text-align:right;
}

Please note: If you are using an inline element (span, strong, em, a), instead of the p to create your stripes you will also need a display:block; in your css.

19 FEB 10 – EDIT: Added a demo suitable for download.

22 FEB 10 – EDIT: Credited Ben Bodien for the CSS implementation of Neutron Creations.

The curriculum is actually aimed at Universities to improve their web modules, which is very interesting. I know that on my university course (Events Management at Leeds Met, UK) there was a web design module in level 2 which actually constitutes of being taught to build a site in Dreamweaver. I didn’t take the module as I’d already taught myself to use Dreamweaver the year before (on placement) and I had already moved on to hand coding. Looking back now, maybe I should have taken the module for some easy marks!

It would be fantastic if more universities used this Web Standards Curriculum to bring their modules up-to-date and even inspire their students into moving into a web-related field. I know that my degree has only strengthened my career in web development because I have far more knowledge and experience of marketing, sales and client relationships than most students who have completed degrees in computing schools.

I am very tempted to send my old technology-dissertation tutor, John Nightingale, an email challenging him to re-write the Web Design module!