Home

Introduction

Choosing colours for a website can be a pain. You might do it as follows.

  • Find a colour somehow;
  • determine its hex code and enter it into your stylesheet;
  • reload the page.

If you want to make small tweaks to your colours, or if you have many colours which must all harmonise, then you will need many repetitions of the above, which will quickly become very tedious.

The solution

To help with this problem, I present a piece of software, written in Javascript, which provides a rapid and visual way to select colours on a website. Its name is Scinap (pronounced "SIGH-nap"), which stands for "Selecting colours is now a pleasure". It is currently at version 0.5.0, and is in the public domain.

Demonstration

A video (without audio) is available which shows a brief session with Scinap. (It's in Theora format, so you will probably be unable to view it if your browser is Microsoft Internet Explorer. One viewer which should work is VLC.)

Having viewed that, you may wish to play with a little demo. The page used is the same as in the video. (To get started, click on the green rectangle near the bottom right corner of the page.)

Overview of usage

To make use of Scinap, here's what you do:

  1. Decide what parts of your website you want to colour, then write a CSS stylesheet which colours them. The stylesheet should do nothing but define colours. At this stage, the actual choice of colours is arbitrary.

    Scinap understands all CSS 2.1 colour values, except for system colours.

  2. Download Scinap, extract it, and put it somewhere in your webspace.

  3. Incorporate Scinap into some page on your website.

  4. Load the page into your browser. Scinap will start.

  5. Use Scinap to set the colours you want. The end result is a modified version of the stylesheet you began with.

  6. (Optional) Terminate Scinap.

  7. (Optional) Remove Scinap from your website.

Step 3 is documented next, but I recommend that you first read about steps 4 and 5, which are documented separately.

How to load

Scinap is distributed in tgz and zip formats. Both archives contains a single top-level item, a directory called scinap-version. In what follows, I'll assume that you've downloaded one of the above archives, extracted it in the document root of your website, and renamed scinap-version to scinap.

To load Scinap, modify some page on your website as follows:

  • Put the following in the head of the page (i.e. inside the HEAD element).

    <link type="text/css" rel="stylesheet"
    href="scinap/third-party/jquery-ui/1.8.12/css/ui-lightness/jquery-ui-1.8.12.custom.css">
     
    <link type="text/css" rel="stylesheet" href="scinap/app/style.css">
    View

    (Use the "View" link if your browser makes a mess when you try to copy-and-paste.)

  • Put something in the head to load the colour stylesheet you created earlier.

  • Put the following anywhere in the page, after making a change explained below.

    <script type="text/javascript"
    src="scinap/third-party/phpjs.min.js"></script>
    <script type="text/javascript"
    src="scinap/third-party/jquery-1.5.2.min.js"></script>
    <script type="text/javascript"
    src="scinap/third-party/jquery-ui/1.8.12/js/jquery-ui-1.8.12.custom.min.js"></script>
    <script type="text/javascript" src="scinap/app/together.js"></script>
    <script type="text/javascript" src="scinap/app/namespaces.js"></script>
    <script type="text/javascript">
    scinap(
    {
    stylesheet_selector:
    'some jQuery selector'
    /*
    you need to change this string;
    see the documentation below.
    */
    }
    );
    </script>
    View

    If you know that you're not already using jQuery in your page, then it is safest to use the following code instead.

    <script type="text/javascript"
    src="scinap/third-party/phpjs.min.js"></script>
    <script type="text/javascript"
    src="scinap/third-party/jquery-1.5.2.min.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    </script>
    <script type="text/javascript"
    src="scinap/third-party/jquery-ui/1.8.12/js/jquery-ui-1.8.12.custom.min.js"></script>
    <script type="text/javascript" src="scinap/app/together.js"></script>
    <script type="text/javascript" src="scinap/app/namespaces.js"></script>
    <script type="text/javascript">
    scinap(
    {
    stylesheet_selector:
    'some jQuery selector'
    /*
    you need to change this string;
    see the documentation below.
    */
    }
    );
    </script>
    View

    Both pieces of code call a function named scinap, passing it a Javascript object which is used to configure the application. The object can have a number of properties, of which one, stylesheet_selector, is mandatory. Its value is a jQuery selector, which must uniquely identify the LINK or STYLE element which loads your colour stylesheet.

    If you're not familiar with jQuery selectors, don't worry: just specify a unique class for the LINK or STYLE element which loads your colour stylesheet, then use this class in the value of the stylesheet_selector property. For example, if the unique class is "my-colours-12345", then stylesheet_selector should have the value ".my-colours-12345" (note the leading dot).

The above instructions cause the browser to load jQuery 1.5.2 and jQuery UI 1.8.12, both of which are bundled with Scinap. Feel free to substitute compatible versions of these libraries.

Configuration options

There are a few configuration options apart from stylesheet_selector. (They have sensible defaults, so you can skip this section if you wish.)

economise_on_colors
true

Used when Scinap is generating a stylesheet and a value has been set for border-color.

If set to false, causes a border-color declaration with 4 components to be generated.

If set to true, causes Scinap to minimise the total number of border colours used. For example, the declaration "border-color: red blue red red;" uses 4 colours. If economise_on_colors is set to true, this would be output as "border-color: red; border-right-color: blue;" which has the same effect but uses only two colours.

restore_colors
false

As described elsewhere, using Scinap involves changing colours interactively on a page. When Scinap terminates, it doesn't change the colours back, unless restore_colors has been set to true.

use_color_keywords
false

Used when Scinap is generating a stylesheet. Causes colour keywords to be used where possible. For example, "color: #f00" is a possible declaration when use_color_keywords is false; but when use_color_keywords is true, the declaration becomes "color: red".

initial_initiator_position
{ bottom: '5ex', right: '5ex' }

The value of this property must be an object, which may contain the following keys:

top
bottom
right
left

These keys are used as CSS properties to set the starting position of the initiator (see the documentation on using scinap for an explanation of this term).

Namespace pollution

Scinap proper sets only one name in the global namespace, namely scinap. A few global variables are also set by the libraries on which it depends.

Deficiencies

"transparent" cannot be set as a colour, nor can it be used in the initial colour stylesheet.