How Web Designers Should Create A Color Scheme?

Posted on October 23, 2012 by

Any web designer knows that a web development project can experience some unexpected hiccups, one of these being poor implementation of colors. Understanding ideas behind color selection and how colors may render differently on each computer is a good step in ensuring your website looks as intended. In addition to choosing colors that work for you, you should also develop a unique color scheme for your web design project.

Colors on your computer screen are essentially combinations of red, green and blue (RGB). There are essentially 256 hues, with black represented with a RGB value of 0,0,0 and white with 255,255,255.

Because there are 256 hues, with RGB schemes we can come up with more than 16.7 million of color combinations (256 x 256 x 256). Unless your computer is made before 1994, it should be able to accurately handle all 16.7 million color values. Some “old-timers” still adhere to 216 web-safe colors in web design, with the assumption that these colors will fit well on most devices, including those that support only 256 colors. However, this standard has nearly vanished with advances in display technology.

When creating colors, web designers should use hexadecimal notation (HEX value) to define a specific RGB color combination. A HEX value is preceded with the # sign and followed by six characters, with 00 as the lowest value and FF (255) as the highest. Again, #000000 is the HEX value for black and #FFFFFF for white.

Creating and importing color swatches
Creating color swatches is relatively easy; depending on the number of colors you use and the complexity of your design. Some designers are lucky enough to have a knack for pairing colors and create a wonderful color scheme from scratch. However, many still need to find inspiration from external sources, such as web design websites and the nature. There are many ways to develop color schemes; while some web designers have the eye to create a marvelous color scheme; for many, using colorful photographs or flipping through color books are more reliable ways. If you want to create a great color scheme, remember to include proper color combinations for all website sections, such as background, header, sidebar, navigation bar, links and text colors.

Many web designers find digital camera indispensable; they can snap pictures on objects of certain themes, such as forest during fall or clear sky. They can open photographs in Adobe Photoshop and choose preferred hues using the eyedropper tool. It is also important to write down HEX values of any color you capture, which allow you to recreate the color scheme quickly.

Many web designers don’t want to start from scratch, consequently they can use a variety of free online tools that allow them to create, download and import multiple color palettes in a short duration of time. Color schemes can be created quickly using complementary shades of a single color. These are some useful tools that allow you to get specific color mixes:

• ColorBlender: It creates a palette instantly from six colors you specify. You can also download colors from Photoshop Color Table as starting points. The blends usually have a lot of range and are generally nice.

• This website offers a huge library of preset color combinations that are searchable by hue and come in the form of five-color schemes. Each displays CMYK, RGB and HEX values for each color. You can download these schemes as a .PNG file and use the eyedropper tool to capture specific hue. The website also allows you to create various custom color combinations.

• Color Palette Generator: It is an automated way of generating a color scheme instantly from an image or photo. Users can use upload their own photographs or use preset images to get a custom palette. Although color combinations are generally nice, it is not possible to download them. Instead, you need to hover the mouse cursor over each hue to get the HEX value.

• Color Scheme Designer: It is one of the most visual color selection tools available. Like many other similar programs, it helps you to create multi-color scheme; but it also allows you to preview how the color scheme might look on your website. A large color wheel helps users mix various hues and schemes can be developed quickly using options such as analogic, accented, mono, complementary, triad and tetrad. A color scheme can be downloaded in various formats, including text (HEX and RGB values), Photoshop palette options, HTML and XML.

Organizing swatches
Swatch libraries are the most straightforward way to manage swatches in Illustrator and Photoshop. There are many tasks you can perform in swatch libraries, such as setting up, saving and opening specific schemes for web design projects. Out of the box, Illustrators and Photoshop come with some preset libraries that are quite nice including some Pantone swatch sets.

Adding new colors to the swatch library is easy, as you only need to open the Swatches palette. When the default swatch panel opens, choose “new swatch” to add the custom color mix or if you want to import a downloaded color scheme, simply choose “load swatches”. You can arrange colors in the palette in any way that works for you.

Managing a wide variety of color swatches can be cumbersome sometimes. Consider creating a new file for each project, so you can go back to them repeatedly. To make your work easier, keep the palettes small and trim them regularly, by removing colors you never use. Name swatch libraries based on you project, such as “Website A”, to makes it easier for you to associate libraries with projects. You shouldn’t save color swatches to a library for occasional projects. It may be a waste of time, because libraries work better for recurring projects.

By understanding how colors work and how to properly create a color scheme with complimentary tones, you are more likely create great colors for your next project. It would be more efficient to create color combinations that are project-appropriate by playing with colors for awhile. Keeping your swatches nicely organized can improve your workflow. In the Adobe Creative Studio, you can use the organizational tools to make the most of the color management system. Name and if necessary, group your colors in a way that sync with how they are normally used.

Author :

  • Adam Scott