Side bar

  Colour editing
  Image creation
  JS Tricks
HTML³: Colour Editing |

Colour editing

One of the things that got me started on writing HTML³ was the need to be able to edit the colours used in a web site quickly and easily; although some purists say that use of any colours other than the default red and blue links that the browser comes with by default is a sin, anyone browsing the Web with a modern computer will see that colour is as much a part of the identity of a site as the actual content is.

To this end, one of the first parts of HTML³ to be written was a 16 colour palette editor in the effects window, and soon after the header section sported a nice new body attribute editor. Various mouse clicks and icon combinations ensued, with the RISC OS colour picker and later lists of named colours available and on some windows the ability to lighten and darken colours. Well, as of HTML³ version 3.45 I introduced a new, standard colour editing window that allows any area in HTML³ to use the same interface and options to change any of the colours.

The main colour editing window

The new colour editing window

The window can be broken down into roughly five areas:
  1. The bit with all the numbers, top left
  2. The big coloured bit, top right
  3. The little bits underneath the big coloured bit (right, middle-ish)
  4. The bit near the bottom with the other block of colour
  5. The bottom line with the OK button.
Each of these will be explained in turn, although you might like to know straight away (if you don't like reading instructions) that you click on the big block of colour to get the RISC OS colour picker.

The bit with all the numbers, top left

Colour numbersIn a quest for greater accuracy and the ability to use consistent colours throughout a site, some users asked for a way of viewing the colour values without having to output a load of HTML. Going one better, you can now use these boxes to edit the colour values by hand as well.

Any changes made in these boxes will not activate until you press the [Return] (or [Enter]) key. However, pressing the return key will update the colour after reading all the numbers on the current row, so it you're used to changing something in a writable icon, pressing [Tab] or the cursor keys to move on, edit that value, move on and only then press return, this is catered for. Once return is pressed the whole colour editing window is updated, including the RISC OS colour picker if it's open.

One thing to watch out for is that, currently, the percentage row contains numbers which have been rounded down. Using the hex or decimal values gives better accuracy.

The big coloured bit, top right

Big block o' colour

Big block o' colour

It's just a big block of colour, showing you, well, how your colour looks. You can admire how it looks - dithering colours to try and give the best representation of the colour however many colours your desktop has (it makes a fair stab in the 16 colour desktop, but I'd recommend using at least 256 colours if I were you). Or you could do something useful like clicking on it to bring up the RISC OS colour picker.

RISC OS colour pickerThe RISC OS colour picker box is used in a variety of programs and should be fairly familiar to you by now; you can create colours in the RGB, CYMK and HSV colour models either by moving the sliding bars, inputting numbers to an accuracy of a tenth of a percent, or by clicking on the colour boxes that are provided. Just click on that big colour fade on the left and slide some of those bars; although you might be more familiar with the HSV colour model - it looks more rainbow-like.

If you're really not happy with the colour picker, there are other ways to edit the colour - like grabbing it from elsewhere, or selecting from a list of named colours.

The little bits underneath the big coloured bit (right, middle-ish)

There are currently five small icons under the main block of colour; the up and down bumpers the grab icon that you might have noticed on other HTML³ windows where grabbing text is possible; and a menu button for bringing up a list.

Colour shiftingAt the bottom, the bumper buttons give you a quick and easy way of lightening and darkening the current colour. Clicking on these buttons will change the colour by about 6%, or +/- 16 in decimal (+/- &10 in hex).

This came about because I realised that most link schemes are based on one colour - you have, say, a blue link, the visited colour is usually slightly darker, and the active version is much lighter (or vice versa).

I should point out that if you bleach or darken the colour too much you can't reverse the process, because if the red, green or blue channel of any colour exceeds the top or bottom of the colour scale it'll be "truncated", at which point reversing the brightness changes become impossible. Don't push the colour all the way up to white and then wonder why you can't darken it back to red again, it'll be giving you shades of grey (which is dark white). Just close the window, then click on the colour control again to bring the window back - the original colour will not have been changed until you press "OK".

Colour HistoryThe colour history button, the castle-style icon on the left; brings up the last 16 colours that have been used by the program. These include all single-use colours (effects; table/row/cell backgrounds; headlines etc.), and the body colours, but not the special FX colours (where all 16 colours of the current palette are used, and so would flood the entire history!). Click on a colour to copy it to the edit window. Although a window has been used instead of a RISC OS menu so I could get the colours on to it, it acts in a similar way to a menu - move off the window and it closes, click with the adjust mouse button and it stays open etc.

These colours are stored in a standard palette file when you quit the program, and will re-load automatically when you next start the program, so that they persist over sessions. As with all the other defaults they are saved in the current save area, so if you maintain many sites and use external data apps for saving the options for each site you get a separate colour history for each site also.

Yoink!The grab button is the same as the text grabbing you can do in other areas of HTML³ - if you've just created the perfect shade of purple-green somewhere in the header section, you can start editing another colour and simply use this button to grab a copy of the original header version without having to fiddle around trying to replicate the same settings. Alternatively you can also use the Push option at the bottom of the colour editor window to shove the current colour to other areas instead of grabbing them.

As with the history function this window mimics a menu in most respects - it uses a window so that the colours can be displayed, but clicking with the left mouse button selects an item, the right does the same but keeps the window open, moving off the window closes it and so on.

If you can't define your own colours very well, you might try using the pre-defined palettes in the Effects window or the colour schemes in the Headers window and then copy them around to where you want them.

Colour ListFinally on the far right we have the menu button which gives you a list of colours. Click on a name in the menu-like window which appears and the colour editor will use this colour.

There are a number of files available, the default is Simple - a list of colours based on my ArtWorks defaults, a selection of colours I've found useful.

The RISC OS file has the standard 16 RISC OS desktop colours, plus a few extra colours from around the RISC OS scene.

NetNames contains the 144 colours that most browsers know by name; HTML³ always uses numeric values so that you can edit them, but this list at least allows you to select by Net name.

NetSafe has 156 colours made by just using increments of 20% (&33) - colours that are supposed to be "safe" on all browsers and operating systems.

Vivid and KangColour are based on ArtWorks colour files from the Gatherer brothers (Kell and Nigel), and similar files are to be found inside PhotoDesk. This means that you can have some consistancy between your graphics creation package and your HTML layout around those graphics. For this reason I'll also release the Pantone file, which is another conversion of someone else's palette; I can't guarantee that this correlates exactly to the official Pantone colour list however.

And finally XWindows gives what is basically an extended version of the NetNames file - pretty much the same colours but in four shades. Note that this last list is huge and so slow to generate, so I don't recommend using it on anything less than a StrongARM RiscPC!

The files defining these lists are kept inside !HTML³.Resources.ColFiles - you can choose which list you see in the Choices window. As they are only text files, and they are loaded in as soon as you OK the choices window, you could try editing them or adding to them - or even creating whole new lists. But don't forget to email me any good ones! :-).

The bit near the bottom with the other block of colour

Net safe colours control

Net safe colours control

Whenever any change is made to the colour editor window, this function will automatically adjust on the fly to show the nearest Net safe alternative to your colour. Simply by clicking on the buttons that show either the hex text or the (smaller) colour block will use this version over the old, non-safe version.

Why is this necessary? Well, some older browsers and/or operating systems use what is known as a 216 colour cube - using colours that are all multiples of 20% in the red, green and blue channels. Any colours which don't conform to these 216 can look a bit naff on these older systems. The fact that the Risc OS 256 colours don't match hardly any of these 216 colours (unless you count pure black and white) means that you're probably going to get dithered colours on one system or other anyway, and to be honest I usually assume that people are going to be browsing using at least a browser capable of dithering (especially with colours in images). But hey, some people are perfectionists. That's probably why I spent so much time getting this function to round up or down to the nearest 20%, rather than just rounding down.

The bottom line with the OK button.

Colour pushBy clicking OK your edited colour will be sent back to the colour area you were editing; however, you should know me well enough by now to know that I won't let it rest there. You can choose from the list marked Send to: to push it to another area of HTML³ entirely. As you can grab colours too, and clicking on OK with the right mouse button will perform the colour change without closing the window, you can either push the current colour to lots of other places, or use the colour editing window to move colours all over the place!

There's a special option called Text stream that'll just output the current colour definition to your text editor; note that there's a Save hex colour list option from the Effects window if you want to output all or lots of the colours from HTML³ in a plain text format.

The shape of things to come

I was planning to introduce a colour snatcher into version 3.45, which first introduced this window - an option to pick a colour from anywhere on the desktop, be it from an icon on the icon bar or an image displayed in a browser, DTP package or whatever. However, it's not very reliable so I'll have to give this more thought.

HTML³: © Richard Goodwin 1997-2002