Working on Color.module is my project for this summer. Throughout the summer I will be periodically updating here. Of course, nothing here is written in stone and your suggestions, ideas and comments are greatly appreciated.

Color in websites

I have taken the time to look through many drupal sites.

Most sites use simple coloring. This has been historic throughout the internet. It is only recently that sites have begun to come sensitive color to following a color scheme.

In website interfaces, most background colors that use images are limited to change in hue. For designers, it's simpler to use a gradient of the same hue changing lightness. Much of the time this is against a zero-saturation color, usually black or white.

Furthermore, many graphics with multiple hues are likely an image not meant to be altered. These includes logos, icons, animations and photography.

Many of these patterns are not limited just to website designs, but interfaces in GUI. Windows Vista and Ubuntu all over color changing of themes, and generally it's a single hue. Also operating systems include graphics which aren't meant to be altered by means of color alteration, like icons.

Themes and content management systems

When webmasters use a content management system they often do so for the functionality. Choosing a web template or look is part of creating the site. The lion share of templates for drupal are limited to a single color scheme. Same holds true for most web templates on the internet for anything.

Webmasters want to choose colors geared toward their website. When browsing for a theme many are attracted by the interface and the way the colors interact. Sadly, when a theme cannot meet their color needs they may be forced to look elsewhere.

Theme developers

This is where theme developers come in. Before beginning on a theme they need to ask themselves what sites they are catering to. In most cases this is universal, so it makes most sense to create sites with color support.

For the most part you don't even have to learn much. Developers should consider use of CSS for coloring websites. For the most part, most designers are already doing this.

Instead of using colored gradients for the theme, use gradients of 0 saturation (black, white or anything in between) against transparency. When saved as a PNG file, they can blend in with backgrounds on web pages. In the very little extra time spent doing this, one allows the image to work with any color. If you were planning on rendering the same graphics in different colors through your image editor anyway, you just saved a fortune in time.

Then a few minutes are spent declaring what classes and ID's in your theme you want colorable. Then if you like a few color sets.

Color picker demo

Using Color.module's Farbtastic.js color picker by Steve Wittens.

Image manipulation via Color.inc

Things we need to consider are:

• Lack of desire for themers to re-slice their themes
• Provide support for current themes to have color support without starting from scratch
• Multiple gradients and fills
• Simplicity

Example of what could be done:

<?php

$info = array(

  // Classify by jQuery selector (http://docs.jquery.com/Selectors)
  // and a single .css property change (http://docs.jquery.com/CSS/css#namevalue)
  // You can also use a filename of an image for a background (included generated ones)
  // If no array for field is provided, it will default to theme-wide hex search
  array('color_fields') => array(
    'background',
    'site text' => array('body', 'color'),
    'site bg' => array('body', 'background-color'),
    'left sidebar bg' => array('div#left-sidebar', 'background-color'),
    'right sidebar bg' => array('div#right-sidebar', 'background-color'),
  ),
  
  // define schemes, make sure they correspond with the amount of fields you have!
  'schemes' => array(
    '#0072b9,#027ac6,#2385c2,#5ab5ee,#5ab5ee,#494949' => t('Blue Lagoon (Default)'),
    '#464849,#2f416f,#2a2b2d,#5d6779,#5ab5ee,#494949' => t('Ash'),
  ),
  

/*
 * Pure CSS/JS themes can end here and stay in instant mode.
 * If these features below are enabled color.inc will stay in image mode
 */
 
  // images, generated from scratch
  'generate_images' => array(
    // a gradient from scratch
    'header.png' => array(
      // type: gradient, fill
      'type' => 'gradient'
      // size: (width, height)
      'size' => array(1, 100),
      // gradient: you refer to color by the fields
      'gradient' => array('left sidebar bg', 'right sidebar bg'),
    ),
  ),
  
  'modified_images' => array(
    // filename of image presiding in /color
    'filename.png' => array (
      // hex color to find, replace (field)
      'fill' => ('#2f416f', 'left sidebar bg'),
    ),
  ),

);
?>

Functionality

Instant mode

On a theme with no image manipulation (with pure CSS), the theme can show full preview on the fly and not need to generate a new theme for every color set.

Image mode

Themes that use image manipulation. Will generate a new folder for the colors and images in /files.

Web Browser support

Web browsers prior to Internet Explorer 7.0 do not support PNG transparency. Internet Explorer 6.0 only supports it with a special javascript.

There are a few legitimate excuses for visitors having older browsers. Many of these can upgrade or use an alternative free of cost. Web designers often feel obligated to support back to the last major version or two, especially in the case of Internet Explorer 5 through 7.

As of May 1st, 2008, here is how long browsers have been out:

• Internet Explorer 5: 3332 days, or 476 weeks (Released 3/18/1999)
• Internet Explorer 5.5: 2861 days, or 408 weeks and 5 days (Released 7/1/2000)
• Internet Explorer 6: 2465 days, or 352 weeks and 1 day (Released 8/1/2001)
• Internet Explorer 7: 561 days, or 80 weeks and 1 day (10/18/2006)

The gap between the release of Internet Explorer 6 and 7 is very drastic. The support for CSS and Javascript of Internet Explorer 6 and earlier is tragically cut short. Offering support for either of these browsers take extreme patience and in some instances is impossible.

The current color module is based of on a transparent PNG anyway (the wheel).

Websafe colors don't really have a use anymore because of support for truecolor.