Web Tools

MORE WEB TOOLS

Colours

rgb_additive_mixing

For computer work, there are two common ways to specify colours: subtractive and additive. The basic subtractive method is known as the CMYK colour model, where CMYK refers to the four colours of inks used in some colour printing: cyan, magenta, yellow and key (black). This system is used for printing inks, but the principles can be applied to paint. Other colour variations may be used in printing. The colours that you see on the computer monitor are created with light using the additive colour method. This system is known as RGB, from the initial letters of the three primary colours Red, Green and Blue (see photograph). In this additive colour system, light of different colours is mixed to form a new colour. It was used in the early days of colour photography, then with colour TV and finally on computers after the development of EGA[1] and then later VGA[2]. RGB is defined by giving a number to each colour.

For computers, the component values are integer numbers in the range 0 to 255, the range that a single 8-bit byte can offer, although high-end digital image equipment can use larger integer ranges for each primary colour. When using HTML code for web sites the colours are designated by using the symbol “#” and 6 additional symbols. The symbols 0–9 represent values zero to nine, and A, B, C, D, E, F (or lower case) represent values ten to fifteen. For example “FF” in hexadecimal represents number 255 in decimal. The first two symbols in HTML[3] colour code represent the intensity of red colour: 00 is the least and FF is the most intense, the third and fourth represent intensity of green and the fifth and sixth represent the intensity of blue. By combining the intensities of red, green and blue, a wide combination of colours can be represented. All colours lie between #000000 (black) and #FFFFFF (white).

Only 17 colours have been standardised, which can be specified by name in coding. The later X11[4] Color Set lists the names of an additional 123 colours that can be rendered in most browsers and are also listed in the SVG 1.0[5] standard. These additional colours must be specified using the RGB numerical system or the hexadecimal system. If you need to know how to specify a colour for use on a web site, there are several sites that will assist, of which my favourite is at URL:

html-color-codes_iconhttps://html-color-codes.info/

Colour Profiles

Every device showing images in colour does it differently and the differences can be measured using standardized tools. The measurements are saved in a standardized format called colour profiles. Profiles are set automatically by cameras, operating systems, software, and printers. By default, they’re set to the lowest common denominator standards, which means that the results may be adequate, but not the best that could be obtained if attention is paid to the profiles. This is very important in photography, where exact colour matches may be needed. Where such accuracy is necessary, reference can be made to the specifications and data in the ICC[6] profiles.

Many monitors have a colour profile similar to the standard sRGB[7] profile, and can’t be set to display advanced profiles. Although for JPEG and PNG images a profile may be embedded in the image, the monitor may not be able display it correctly. The majority of images on the Web, were designed to be displayed in the sRGB color profile.

Then there is the issue of the settings in the browsers. We have been surprised to find that a Web page design made using one browser may look different in another browser on the same monitor. In the case of an image, we can check the embedded color profile and that the monitor has the correct setting. However, the case that attracted our attention was the matching of a page background colour set in the CSS with the appropriate RGB value to that of the colour at the bottom of a header image. The page was designed using Firefox and a perfect match was obtained and similarly in Internet Explorer 11, Edge and Opera browsers. However, when checked in Chrome, Iron and Vivaldi, the background was darker and did not match the bottom of the header image. We found the reason to be that in recent versions, Chrome, Iron and Vivaldi browsers set the color profile flag to default at a more advanced level. The issue was corrected by resetting the color profile flag value on these browsers to sRGB.


1. EGA (Enhanced Graphics Adapter) was introduced by IBM in 1984 and 16 colours were standardised and given specific names. An additional colour name (orange) was added in CSS Level 2 Revision 1, 7 June, 2011. See also Item 7. below.
2. VGA Video Graphics Array was the display hardware introduced with the IBM PS/2 computers in 1987 and became an analogue computer display standard. It can also refer to the 640×480 pixel resolution.
3. HTML (HyperText Markup Language) is the main markup language used to creating web pages and other information that can be displayed in a web browser.
4. The X11 Color Set, 1987 comes from the X Window System, a windowing system for bitmap displays, common on UNIX-like computer operating systems and originating at MIT (Massachusetts Institute of Technology) in 1984.
5. Scalable Vector Graphics (SVG) 1.0 Specification, W3C Recommendation 4 September, 2001; Scalable Vector Graphics (SVG) 1.1 Specification, W3C Recommendation 14 January 2003, edited in place 30 April 2009; Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C Recommendation 16 August 2011; Scalable Vector Graphics (SVG) 2 W3C Working Draft 09 July 2015.
6. In colour management, an ICC profile is a set of data that characterizes a colour input or output device, or a colour space, according to standards promulgated by the International Color Consortium.
7. The sRGB (standard Red Green Blue) is an RGB colour space that HP and Microsoft created cooperatively in 1996 to use on monitors, printers, and the Internet. The ICC has issued specifications for various types of sRGB profiles and their uses.


Back to top

Recent Posts