Website Colour Scheme

[Rathji]

The non-profit organization I work for has an intranet site that is supposed to be themed around the seasons. It has not been updated since before I started there and I am getting very sick of the fall theme and colours so I am trying to figure out what I need to do to get it changed.

The budget of this project is non-existent so it needs to be done entirely in-house or by someone donating their time and skills for a good cause. In an, attempt to see if I can handle it myself I have come to the great CP oracle for some guidance. Please correct me if any of this is horribly wrong.

I think I can change all the colours used by headings, links, background etc with CSS. Would it be as simple as making a new .css file of the same name and dropping it into the folder?

My other concern is picking out colours. My concept of colours that go together is really out to lunch. I use colour template websites like www.colorcombos.com and I cannot figure out what colours might give the 'summer feel' I am going for or which combinations of those colours look good. I think I just have a big mental block for that kind of thing.

Is there a better website that has this kind of stuff available for the colour challenged idiots like me in the world or am I going to have to find someone who is good at this kind of thing to put something together for me?

[KTrain]

I've always liked http://www.colorblender.com for picking out decent colour schemes.

You'll also be able to change the colours by uploading a css file with the same name. Just make sure you save the old one just in case you screw up.

I could also take a look at it for you if you want. If it's a simple css file it shouldn't take too long.

[Rathji]

Originally Posted by KTrain

I've always liked http://www.colorblender.com for picking out decent colour schemes.

You'll also be able to change the colours by uploading a css file with the same name. Just make sure you save the old one just in case you screw up.

I could also take a look at it for you if you want. If it's a simple css file it shouldn't take too long.

Thanks for the website and the offer, if I really get stuck I might take you up on that. I would like to try it myself first though, so I can get a feel for how css works.

[octothorp]

You might find firebug (firefox) or developer tools (chrome) really useful if you're working with existing style-sheets. I can describe the process in chrome: highlight the element you want to change the colour for, and right-click and choose inspect element. It'll bring up the location of the element in the html, but it'll also show you all of the css parts that affect the appearance of that element, including the css file and line number. I find this saves a lot of hunting through css files trying to find the exact line that's affecting the colour.
You can even change the colour in the developer tools window and see the results in your browser. It won't make a change to the version on your server, of course, but it's useful to try changing some colours and find one you like, rather than changing, saving, uploading and refreshing your css multiple times.

Also, my favorite colour-picking site is kuler.adobe.com.

And yeah, finding colour-schemes is tough. If the design of the site looks pretty good now, try to understand what the existing relationship between the colours is (are they shades, are they complementary colours, etc.) and then maintain that in your new colour scheme.

[MickMcGeough]

octothorp's firebug recommendation is bang on - easily one of my favorite tools. Seeing exactly which CSS properties are applied and being able to edit them in real time and see the changes will save you many hours.

If you've got access to a Mac, you can use CSSEdit for this too. CSSEdit does much the same stuff except you work directly in the file and can save it when you're happy with the changes (the only thing firebug is missing, IMO).

I wouldn't recommend overwriting CSS files if it isn't necessary. Just make a new one! I would make a CSS file called "summer.css" or something, and include it after the main style.css or whatever in your HTML. Anything in summer.css will override the colors in the main style.css. Summer.css should contain only the seasonal rebranding styles, leaving the layout and whatnot from the main CSS file alone.

I should add that if you don't have a central layout template (that is, if the CSS include is defined on every HTML page), call the summer.css something like season.css and replace it every season.

As for choosing a color scheme, I tend to look to CSS design showcase sites for examples. http://www.thebestdesigns.com is a good starting place. There are literally thousands of sites to browse there. Take some time and you'll find something that will work.