CVGalleryGamesPreviewRandomJavaSiteWeb
Site updates
Testing New System now...

CSS Preview Help - Dialogues - Colour

The Colour dialogue is split into three parts.

The Left Column

At the top of the column is a swatch displaying the currently selected colour. "Store" will remeber a colour for later use. Transparent and Inverse are colour keywords, and Previous will fetch the colour set before the dialogue was opened. Once some colours have been stored, their swatches will appear at the bottom of the column. The buttons will remove the colour.

Picker Types

Top-right is the selector for picker types, see below for details on the individual pickers. It also contains a tick box "HSL colours as RGB". This works around browsers that don't support HSL colours by converting them to RGB before displaying or setting them. If your browser supports HSL colours, and you want to use them, untick this box.

The Pickers

X11

The X11 colour scheme is a set of named colours. By default, the colours are sorted in rough colour order. Users more familiar with the scheme can sort it by name. The "groups" option lumps together the light, medium and dark variants of a colour which would otherwise be separated. To pick on a colour, just click on the swatch.

VGA

The VGA colour set is a smaller set of primary and secondary colours, plus darker equivalents. To pick on a colour, just click on the swatch.

System

The system colours are a set of keywords which do not have fixed values. Instead, they mimic user interface elements for individual machines. They should be used with care, and never mixed with other colours as this the result could be unreadable.. To pick on a colour, just click on the swatch.

Websafe

Websafe colours are the ones guarenteed to work on both Windows and Mac machines that have low colour depth displays, without dithering. They prove useful if you wish to ensure absolutely everyone can use your site. To pick on a colour, just click on the swatch.

Numeric

The Numeric colour picker provides a quick way to enter hex colours (e.g. #0033CC) using only the mouse. Just click on the desired digits. The small black and white swatches quickly set these colours.

Sliders

The sliders come in two flavours, RGB and HSL. Dragging the paddle adjusts the value. Clicking the buttons shifts the value by 51 (1/5 of the way along). The "Automatically use" option will update the colour as it is changed. "Use this colour" is for applying the colour when Automatically Use is not selected. "With Alpha?" adds an alpha value to the colour, but there is no known browser support for this yet.

Explorer

The Explorer shows how various changes in hue, saturation and lightness will affect the colour. As above, the colour is not always applied as it is experimented with. The "Auto-use" tickbox will turn this on, or the Use functions will apply the colour as HSL or RGB as required.

Clicking on a swatch will set the colour as the one centring the strip and block of colours. If the range of colours is too great or too little, this can be set with the "Strip Range" and "Block Range" controls. The Hue, Saturation, Luminance radio buttons selects which variable sits on the strip.

Gradient

The gradient colour picker requires at least two colours to be stored before it works. It displays intermediate colours between the selected swatches. When the gradient has two colours, it is possible to select between RGB interpolation, and HSL interpolation in a clockwise or anticlockwise direction. For three- and four-colour gradients, only RGB gradients are currently possible. "Hide/Show" will hide the controls so the whole of a gradient can be seen.

Use: Colour dialogue - Other dialogues