About us RCL 20 Projects Colour Selector Library
Colour Selector
Colour exploration tools
Preview text
Navigate colour
Mix colour
Make swatches
Blend colour
Colour schemes
About the Colour Selector
About this resource
Tool overview
Tool short-cuts
Tool calculations
Other colour resources

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.

Colour # R:  G:  B: 

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.

Variation amount: %

Colour # R:  G:  B: 

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.

Variation amount: 

Make  variations per row

Colour # R:  G:  B: 

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.

Variation amounts:
H S L

Make  swatches per row

Colour # R:  G:  B: 

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.

Make  blends per row

Colour # R:  G:  B: 

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:

  1. complement
  2. red (hue 0°)
  3. yellow (60°)
  4. green (120°)
  5. cyan (180°)
  6. blue (240°)
  7. 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.

Colour  # R:  G:  B: 

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