Got questions about the features in Website Color Schemer?

Want to check out some helpful tutorials to get you up to speed on using the program? Youve come to the right place!

TUTORIALS
Step-by-step instructions for commonly used features in the program. Getting to know the Website Color Schemer workspace Website Color Schemer quick-start guide Keyboard shortcuts All...

FIRST TIME USING ONE OF OUR QUICK-START GUIDES?

Learn how to use this valuable tool.

STILL CANT FIND YOUR ANSWER?

Visit our user forums (http://www.coffeecup.com/forums/) check out the articles and video tutorials in our online Knowledgebase (http://www.coffeecup.com/color-schemer/help/), or contact our fabulous tech support team (http://www.coffeecup.com/help/)!

TUTORIALS
Step-by-step instructions for commonly used features in the program. Getting to know the Website Color Schemer workspace Website Color Schemer quick-start guide Picking out colors Adding colors to a scheme Editing colors Finding matching colors Previewing your scheme Adding your colors to a website Keyboard shortcuts

GETTING TO KNOW THE WEBSITE COLOR SCHEMER WORKSPACE

Heres a quick overview of the major features of the Website Color Schemer workspace:

WEBSITE COLOR SCHEMER QUICK-START GUIDE

With Website Color Schemer, you can put together stunning color schemes for your website. What exactly is a color scheme? Its a set of colors and color information you can use as a reference when designing your website. In Website Color Schemer, schemes contain a color swatch and RGB and hex values. Before we get started, we want to remind you to save often! You never know when there might be a power outage or a computer issue, and you dont want to lose any of your hard work. There are several different options for saving your work. Choose whichever you like best, and do it often! Click the Save button in the toolbar Go to File > Save Use the keyboard shortcut Ctrl+S Read on to learn how to use the tools and functions in this program to create your color scheme.

Step 1: Picking Out Colors

When you first open Website Color Schemer, it looks like this:

For this first step, were going to be working with the three tabs in the center of the workspace to pick out some colors. The reason why there are three tabs (plus that grid at the bottom) is because theres no one right way to pick out color. Its all a matter of personal preference, so we gave you three easy ways to pick out colors, plus three more intuitive tools that well also discuss in this section.
4

To select a color, just click it. It will open in the Base Color area on the right-hand side of the program. This allows you to edit it, which well talk about more in Step 3.

Color Grid
The color grid appears at the bottom of the Color Wheel, Honeycomb, and Color Picker tabs. Click a color to select it. It will show up in the color wheel or color picker gradient.

Color Wheel
The color wheel is a great option if you want to see the relationships of colors in a basic, straightforward way. The base color is located at the top, and inside the main circle are lighter shades of each color. To change the base color at the top of the wheel, select it from elsewhere on the wheel, click somewhere on the color grid, or adjust the color using the tools in the Base Color area on the righthand side of the workspace.

For more information about the tools and options in the Base Color area, read Step 3: Editing Colors.

Color Picker
The color picker displays a wide range of color, allowing you to pick the exact hue you want. Adjust the color in the gradient using the slider on the right-hand side. You can also select a color from the grid at the bottom or adjust the color using the tools in the Base Color area on the right-hand side of the workspace.

For more information about the tools and options in the Base Color area, read Step 3: Editing Colors.

Capture Color From Screen

If theres a specific color on your computer screen that youd like to use in your color scheme, you can select it using the Capture Color From Screen tool. Go to Tools > Capture Color From Screen. This minimizes Website Color Schemer and opens a window that contains a zoomed-in view of where your mouse cursor is located, as well as color information.

When you have found the color you want to add, click it. This automatically opens the color in the Color Wheel or Color Picker tab (depending on which one you have open), as well as the Base Color area.

Photo Color Schemer

Lets say you have a photo or image youd like to use colors from. You can use the Photo Color Schemer to select those colors and work with them in Website Color Schemer. To open this tool, go to Tools > Select Colors From Photo.

Click Open to browse your computer for the image you want to use. Next, click the colors in the image you want to use. This adds a color swatch to the top of the window and an anchor to the image. To adjust the number of colors you can pick from the image, use the drop-down list in the upper right-hand corner. If you cant decide what colors to use, try clicking the Randomize button. This tool selects colors at random from the picture. When youre done deciding which colors to use, click the Add to Scheme button. For more information about adding colors to a scheme, read Step 2: Adding Colors to a Scheme.

Color Mixer
The Color Mixer lets you take two colors and mix them into a gradient. To open it, go to Tools > Color Mixer.

First, drag and drop the start and end colors from the workspace into the provided swatches (or enter the RGB codes). Next, use the slider to select the number of steps you would like in the gradient. The more steps there are, the more subtle the shift in color will be. Next, select the color you would like to add to your color scheme and click Add Selected Color to Scheme. If you want to add all the colors to your scheme, click Add All Colors to Scheme.

Step 2: Adding Colors to a Scheme

In the last section, you learned that the Color Mixer and the Photo Color Schemer allow you to add colors to your scheme with the click of a button. But how do you do that when you have picked out a color using the Color Wheel, Honeycomb, Color Picker, Grid, or Capture From Screen method? Simple: Either double-click the color, or select it and click the Add to Scheme button in the Base Color area. Both these methods add the color to the Scheme Colors list on the left-hand side of the program. Now any time you want to reference or edit that color (which well talk about in the next step), youll know right where it is.
8

Step 3: Editing Colors

If you decide at any point that you want to edit a color before you add it to your scheme, afterward, whenever you can do so using the options in the Base Color area. Just click the color you want to edit, and then make your adjustments. Heres what everything in the Base Color area does.

Hex Code
The hex code for the selected image. A hex code is a sixcharacter code consisting of letters and/or numbers that represents a color in an HTML or CSS document.

History
This drop-down menu expands to show you a list of the colors you have worked with.

Red, Green, and Blue Sliders

Use these sliders to adjust the amount of red, green, and blue in your color. (FYI, computers create colors not from the primary colors red, blue, and yellow, but instead in red, green, and blue.)

Brightness
The amount of black and white in the color. A brightness of 0 is pure black, and a brightness of 255 is pure white.

Saturation
The vibrancy of the color. A saturation of 0 is white, and a saturation of 255 is a given color at its most vibrant. When youre done making adjustments to your color, click the Update Color button. This updates the color in your scheme. If you would rather keep the original color and save the changes as a new color in your scheme, click the Add to Scheme button. One last edit you can make to your colors is giving them custom names. This is a good way to keep track of your colors and what role they will play in your web design. For instance, you could name colors after the page elements you will use them in, such as Header Green or Sidebar Yellow. To give your color a custom name, just select the color in the Scheme Colors area and go to Scheme > Rename Color. This opens the Rename Color window.

Enter the name the Color Name field, and then click OK. The name will be changed in the Scheme Colors area.

Step 4: Finding Matching Colors

A color scheme with only one color isnt going to look very good, but how do you find matching colors? There are a couple different methods. If you have a good sense of how colors work, you could check out the relationships between the colors in the color wheel, honeycomb, gradient, or grid. If you dont have that kind of color intuition, you can use the color relationship drop-down list near the bottom of the Base Color area. Just select a relationship from the list, and if you like the associated colors, click the Add Colors to Scheme button.

Step 5: Previewing Your Scheme

All right, now that youve picked out all the colors in your scheme, lets see how they work together! After all, colors can look awesome next to each other in the Scheme Colors area, but how will they look in a webpage? To find out, go to Tools > Webpage Preview. This opens the Webpage Preview window.

10

To add a color to one of the sections of the sample webpage, just drag it from the workspace to the Webpage Preview window. You can change the color of the background, header, sidebar, body area, text, and links. Once youve figured out which colors will play which roles in your design, its time to add them to your webpages!

Step 6: Adding Your Colors to a Website

The process of adding your colors to your webpages varies depending on which web design program you use. Well discuss some of the most common ones here, but you may need to consult the documentation for your web design program.

Style Sheets
Adding your custom colors to a style sheet is as simple as adding a line of CSS. Just copy the hex or RGB code from Website Color Schemer and plug it into your styles, like so: body { background-color: #66CC33; } You can also use RGB codes: body { background-color: rgb(102,204,51); }

HTML Pages
We just have to mention here that we dont advise setting colors in an HTML document. After all, as all good designers know, CSS is for style and HTML is for structure, and color falls firmly into the style category. However, if you simply must specify a color in HTML, the process is basically the same as adding them to your style sheets. Just plug in the color information, like so: <p style=color:#66CC33;>This paragraph will be green.</p>

Visual Site Designer

Lets say youve created a shape in Visual Site Designer, and you want to fill it with a color from Website Color Schemer. In Visual Site Designer, select the shape, and then click the Fill button in the Toolbar. Next, select Single color and click the color swatch to open the Color window.

11

Next, enter the RGB values from Website Color Schemer into the provided fields. You can save this color in the Custom Colors list by clicking the Add to Custom Colors button. When youre done, click OK. The shape will be the color you have just specified.

Shopping Cart Designer Basic or Pro

Lets say you wanted to set one of your custom colors as your shop background. Open Shopping Cart Creator Pro, and from the drop-down list on the right-hand side of the program, select Page Properties. Next, enter the hex code from Website Color Schemer including the leading hash into the provided color field. It couldnt be simpler! Hey, congratulations! You now know how to use Website Color Schemer to add the perfect splash of color to your website. Happy scheming!

12

KEYBOARD SHORTCUTS
You can perform the most commonly used functions in Website Color Schemer using keyboard shortcuts. Below is a complete list of all the keyboard shortcuts available in the program: New Color Scheme Ctrl+N Open Ctrl+O Save Ctrl+S Save As Ctrl+Shift+S Import Ctrl+I Export Ctrl+E Print Preview Ctrl+Alt+P Undo Ctrl+Z Redo Ctrl+Q Copy Hex Code Ctrl+C Select All Ctrl+A Show Small Color Box Shift+Ctrl+F5 Show Color Names in List Shift+Ctrl+F6 Show Expandable Color List Shift+Ctrl+F7 Lighten Ctrl+Alt+L Darken Ctrl+Alt+D Increase Saturation Ctrl+Alt+S Decrease Saturation Ctrl+Alt+E Random Color Pick Ctrl+R Add Base Color to Scheme Ctrl+Alt+A Capture Color From Screen Ctrl+U Select Colors From Photo Ctrl+L Color Mixer Ctrl+M Webpage Preview Ctrl+G Clear Color History Ctrl+Y Help F1

13

HOW TO USE THIS GUIDE

Welcome to the CoffeeCup Website Color Schemer Quick-Start Guide! This is the place to go to learn the ins and outs of this program. You can navigate through this guide using the table of contents in the PDF reader interface or by just reading it straight through. You can also jump around using links, which are formatted in bold, TK text, and in bulleted lists like this one. Youll also see links to webpages containing additional information formatted like this: http://www. coffeecup.com/. Just click them, and your default web browser will open the page. Weve included some handy icons to help highlight important information.

For More Information

Links you to a tutorial or frequently asked question that explains the tool or function in more detail.

Online Resource
Links you to a website containing information that may be beyond the scope of this manual.

Use This Tool With

Links to another tool or function that can be used with the tool or function being described.

Watch Out!
Look for this icon to see common user errors that may occur when using the tool or function. We hope this helps! If you have any questions, comments, or suggestions about how this guide can be improved, wed love to hear them. Shoot us an e-mail at wordnerd@coffeecup.com. (Any technical support requests should still go to http://www.coffeecup.com/ help/myroom/.)

14

CONTACT US
We give you more then just software. We have a mission when it comes to support: Be extraordinary! When you buy our software, what you get goes well beyond what you expect from a software company. We do not offer tech support we offer coaches and counselors to help you with the software and web design. We are here for you so you can be a successful webmaster, not just learn a piece of software.

Registered customers always get:

The software you paid for, of course. Free e-mail support (ask a question, get an answer within 24 hours). Free upgrades for life and access to download software at any time. Access to our user forums (http://www.coffeecup.com/forums/) where you can talk about web design or share business tips. Exclusive discounts and sneak peeks at new software or services.

Trial Support Services:

We are always happy to help you with your questions about our software. If you are using a trial version of our software you can use the online Knowledgebase (http://www.coffeecup.com/help/) or e-mail our support staff any time. Feel free to ask us your questions, and we will reply as soon as possible. Get priority support and access to our Support Center (https://www.coffeecup.com/help/) when you order our software. Our mission is to provide the best possible service to our customers. Join the ranks of webmasters worldwide and order our software today. Youll be happy you did. :)

Our Address:
CoffeeCup Software 165 Courtland Street Suite A, Box 312 Atlanta, GA 30303 USA Phone: (678) 495-3480 http://www.coffeecup.com/

Thank You!
To all our users you know who you are... Without the support and feedback of those who download and buy our software, we wouldnt be here. We are very lucky to have had so many people over the years think our software is great, and we are proud that you still do. Thank you, everyone!

15