A brand should always display their colors in visual identity systems. This provides an additional “recognition cue” and makes their look and feel consistent on all platforms. This project is intended to go along with the brand system you have been working on, and should include the colors that are featured in your current logo (unless you intend to adjust the logo) and include tertiary colors that can be included for various typographic and element hierarchies. This can include colors that should be attributed to all icons, or the colors that links could be on a website.
Selecting the Right Colors
You can select the right colors for any project using a few different methods, depending on what you already have done with the project. Creating an entire look from scratch can feel daunting, so you may want to research color palettes that are either within the realm of your idea (you have chosen cool colors, and want many different variations of blue) or you need inspiration to come up with the look alltogether. You may have some existing colors in an Illustrator file already, and want to find other colors that you think will work with these.
Review the three main methods shown below to find the best way to create color swatches for your project.
Method 1: Generate a Palette
You can use a color palette generator (the website Coolers is a quick tool to try) to see what colors may look useful for your project. Not all palettes will be perfect, so you may get some good ideas from these, or you may find one that you think would effectively communicate with the brand identity.
Hit the space bar to keep generating new palettes. When you find one that you like, take a screen shot (Shift-Command-4) and drag the box around the section with your colors. This will save to wherever screen shots exist on your computer, typically the desktop on a Mac.
Method 2: Discover a Palette
Adobe Color allows you to select various shades, and adjust them, based on your preferences. The color menu to the left allows you to select the following from the Color Rule menu: Analogous, Monochromatic, Triad, Complementary, Compound, Shades, or Custom. This provides a more custom function to finding and selecting colors than a generator allows.
Dragging the circle icons (used as cursors) will rotate through the entire color wheel until you decide on your next swatch. When you’re happy with your decisions, you can copy and paste the Hex Value and input it into Illustrator (more on that below under Method 3, Diagram 4).
Method 3: Create a Palette by Selection
Adobe Illustrator makes creating, selecting, and converting color swatches and generated color space codes very simple when done properly. You can create colors by using the Color Palette tool (Diagram 1), found under Windows menu, then Color. You can then slide the selectors for various color spaces from side to side until you have found a color that works.
You can also use the Color Guide (Diagram 2), found under Windows menu, then Color Guide. This generates palettes that work with the swatch you have already selected. You can also use the dropdown menu found in the Color Guide window to generate a selection of swatches that fall into certain categories, such as Complementary, High Contrast, Shades, Compounds, and more.
When you select a color, a fill swatch of that color will show at the bottom of the main Toolbar. If you double-click on this fill color, a the Color Picker window will pop up (Diagram 3). This allows you to select colors in various ways. You can mouse over different areas of the first area box and drag the selector arrows on the right up or down to move through the color wheel. You can also manually adjust color spaces for HSB, RGB, CMYK, or Hex (#).
Hex Codes, shown to the right of the # sign at the bottom (Diagram 4) can be copied from various locations on the web. This includes Adobe Color which we discussed above in Section 2, where the codes are found below each swatch. Hex Codes are extremely important when dealing with anything involving the web, because they translate all color properties found there and ensure color matching to a CMYK or RGB swatch as accurate as possible (monitor calibration aside.) You can copy any Hex Code into this location in the Color Picker or you can take a CMYK swatch and select the color picker in order to view the appropriate Hex Code # (which is always 6 digits) so you can use it for web design and development, which will be covered in Web Design 1.
Creating the Palette
After you have selected all of your colors, make sure that you have your colors available in an Illustrator file. You can create a box and fill each one with the appropriate main color. You will not need to save this file after you create your final Color Palette file.
Download the Color Palette Design template, and create a main color for the 6 palette blocks, which are shown and named as samples:
- Deep Teal
- Medium Mint
- Light Aqua
- Light Slate
- Medium Slate
- Deep Slate
Copy and Paste the color swatch squares into your template file. “Save as” your first initial and last name after ColorPalette_, so it shows as “ColorPalette_MHale.ai” as an example.
Ensure that you append the proper file format of AI (Adobe Illustrator) at the end, as you will save this again as your final in PDF format.
(Diagram 1) Change all of the 6 swatches shown to the swatches you pasted into the file. Use the Eye Dropper tool on the main Tool Bar to select the template swatch box and then select your color swatch square to accomplish this. Repeat this for each of your color swatches.
You will then need to think about how to name your colors. Color names usually have a collective theme, such as a group of gem stones, or fruit, or color names already known with the addition of a value word such as Dark, Deep, Light, Medium, Muted, etc. Be creative with this; Brand Sheets are always seen by those who make decisions. Edit the color names for each corresponding swatch.
(Diagram 2) Now select each value box that sits underneath your main color swatch. Use the Eye Dropper tool again to change each of these to the main color, and then select the correct Opacity in the top Application Bar. You can accomplish this easy by just typing in the number instead of using the slider dropdown.
(Diagram 4) Edit all of the lower text that provides the appropriate number codes for RGB, CMYK, and Hex values. You can do this by using the explanation for color selection in Method 3: Create a Palette by Selection, Diagram 4. Repeat this for each color.
Pre-Flighting & Saving
Once you are happy with your color palette template sheet, follow these steps to ensure proper delivery of your file.
These steps are part of a process known as pre-flighting. Pre-flighting ensures that your files are properly setup for printing and viewing; as not everyone has the same fonts installed on their computer as the designer, it’s important to have both your native file as well as a final export file. The native file is the file that you can open and edit and continue to work on or take elements out of, while the the final export file converts all of your fonts to outlines so that they transfer and can be read.
You can zoom in on the images below by clicking on each to open a lightbox.
Use Command S (⌘A) to save your final AI file.
Now select “Save as” under the top File menu. In the Format dropdown menu, select Adobe PDF (pdf).
Upload your finished file so these color palettes can be discussed in class.