Using Adobe Color CC

Updated 23 July 2015

Adobe has a great free tool to help you design the color scheme for your web site. Adobe Color CC can be found at https://color.adobe.com. If you have an Adobe ID, sign in with that to download and share color schemes. You can also sign up (free) even if you do not have an Adobe ID. You do not have to sign up unless you want to save or download your color schemes.

There are three ways to choose a color scheme:

1. Pick one of the ones already developed by other Adobe Color CC users
2. Create a new one using the color wheel
3. Create a new one based upon an image (one you upload or select from Flickr)

Let’s look at each of these three and how you would use them for your web site.

Using Existing Color Schemes

Using the menu or search box on the left of the screen, select an item or enter in a search term, e.g., blue or water. In the second column from the left select one that you like or go to the bottom of the list and use the navigation icons to view more results. Click on the one that appeals to you in this column and then click on the box that directs you to “Make changes to this theme and view color values” that is over the description of the color scheme you selected in the main center column. You can make adjustments to any of the displayed colors by using the sliders below each color or by draggin its circle on the color wheel. When you have all the colors the way you want them, note the HEX characters displayed below each color swatch. This is what you will enter in your Cascading Style Sheet for various design elements for your web site (more on this later).

Using the Color Wheel

Click the Create link in the first column. Select one of the six “rules” at the top of the color wheel page. In the color wheel, drag the dot with the circle around it to your primary color choice. The other dots will move to new locations based upon your rule and primary color choice. It’s fun to play with all of the possibilities.

Using an image

Click the Create link in the first column of the Adobe Color home page. Select the “From an image” link in the upper left. Either upload an image using the “Upload” button located below the default image or select the flickr button. Select an image and then use the suggested colors from the photo or move the dots around the photo to pick up the colors you want to use. You can also change the “mood” to get a different set of swatches.