Tool overview

This is an overview of the colour exploration tools in the Colour Selector.

Preview colour

Preview colour allows you to check a colour to be used with text: as a background to black and white text and as the text colour on top of white and black backgrounds.

Black on #99CCFF	#99CCFF on white
#99CCFF on black	White on #99CCFF

Sometimes a design calls for a colour to be used both as background and a text colour; preview colour helps determine which colours contrast well with black or white.

Colours specified in HTML (e.g., bgcolor) will never dither; on 256-colour displays, they will shift to the nearest colour in the 216 palette. Colours in graphics will shift or dither when viewed on displays showing anything less than 24-bit true color.

Go to tool: Preview colour

Navigate colour

Navigate colour to explore colours near a specific colour, where you get to define what 'near' means.

For a given colour, 21 variations are shown:

6 plus and minus red, green and blue
6 plus and minus magenta (red & blue), yellow (red & green) and cyan (green & blue)
6 plus or minus hue, saturation and lightness
the inverse and complement colours

This tool provides a simple way of exploring colour - the inverse and complement transformations provide the biggest change in colour.

The variation amount (e.g., the amount of red added) starts off at 20% (or 20° for hue) but can be changed.

Note that additive RGB variations tend to produce lighter colours whilst subtractive RGB variations produce darker colours.

Go to tool: Navigate colour

Mix colour

Mix colour adds/removes varying amounts of all combinations of red, green and blue to a colour.

This results in seven sets of variations:

red, green, blue
cyan (green & blue), magenta (red & blue), yellow (red & green)
white (red & green & blue)

The variation amount (e.g., the amount of cyan added) starts off at 20% but can be changed.

Go to tool: Mix colour

Make swatches

Make swatches creates groups of co-ordinated colours intended to work together on the same page - that is, they won't clash when seen together.

This tool creates various colour schemes by varying each of hue, saturation and lightness. It also shows variations of hue, saturation and lightness for the complementary colour. Use the tool to create simple colour schemes in which colour vary by either hue, or saturation or lightness.

You can also use this tool to refine individual colours by saturation and lightness in colour schemes generated by the separate colour schemer.

As well as creating sets of swatches to use in designs, the tool can be used to finely tune colour choices by changing the individual variation amounts.

Go to tool: Make swatches

Blend colour

Blend colour blends the current colour with other colours by generating the intermediary colours.

This tool creates various blends of the current colour with up to seven colours which vary only by hue to the current colour. It creates a row for each set of blends:

complement
red (hue 0°)
yellow (60°)
green (120°)
cyan (180°)
blue (240°)
magenta (300°)

If the current colour has low saturation (less than 10%) the saturation of the target blend colours is set to 15%.

Blend rows are skipped if the target blend colour is the same as the current colour's complement or if the difference between the current hue and target hue is less than 15°

Go to tool: Blend colour

Colour Schemes

This tool generates colour schemes based on the current colour. The schemes contain 2-4 colours.

Most of the schemes are based on colours varying only by hue. These schemes are illustrated on (square!) colour wheels.

When the current colour is very dark, very light or very low saturated, the generated schemes might not have enough difference to be useful; schemes based on grey, black or white will result in schemes based entirely on the current colour.

To change the colour that the schemes are based on, enter a new colour value in the form, click on a coloured square or use the other tools to navigate the RGB colour space.

Go to tool: Colour schemes