Colours
In HTML, it is possible to specify a colour by using its name or RGB value using a decimal or Hex value.
Specifying a colour by name
In HMTL5, you will use CSS to change the colour of various elements. You can for example change the text colour by adding inline styles: <style="color:red">
| Formatted text | HTML markup required |
|---|---|
| * Red* Green* Blue* | |
Possible values for named colours are:
Specifying a colour by value
Hexadecimal RGB color values
The format of an RGB value in hexadecimal notation is a # immediately followed by either three or six hexadecimal characters. A general colour is specified in terms of the three primary colours red, blue and green. Each primary colour is defined as a one or two digit Hexadecimal number that representing the strength of that primary colour. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00, and #fff expands to #ffffff
In this specification hexadecimal 00 means 0% of the colour and hexadecimal ff means 100% of the colour.
For example, to specify red the hexadecimal number #ff0000 is used. In this number:
- The first two digits after the
#symbolffdefine 100% of red - The second two digits after the
#symbol00define 0% of green - The third two digits after the
#symbol00define 0% of blue
#f00 to specify the red colour.
| Formatted text | HTML markup required |
|---|---|
| * Red* Green* Blue* | |
| * Yellow* Aqua* Purple* | |
| * White* Black* | |
To convert an RGB color to its hexadecimal representation, you'll need to convert each of the Red, Green, and Blue components from decimal to hexadecimal and then combine them.
The formula to convert a decimal value to a two-digit hexadecimal value is often expressed as follows:
- Divide the decimal value by 16 to get the quotient and remainder.
- The remainder is the least significant digit (rightmost digit).
- The quotient is the most significant digit (leftmost digit).
- If the quotient or remainder is greater than 9, represent it using letters A-F (A for 10, B for 11, ..., F for 15).
Let's go through an example with the RGB color (135, 206, 250):
- Red Component (135):
- Quotient: 135 ÷ 16 = 8 with a remainder of 7.
- The hexadecimal representation is 87.
- Green Component (206):
- Quotient: 206 ÷ 16 = 12 with a remainder of 14.
- The hexadecimal representation is CE.
- Blue Component (250):
- Quotient: 250 ÷ 16 = 15 with a remainder of 10.
- The hexadecimal representation is FA.
Combine these results, and you get the hexadecimal representation for the RGB color (135, 206, 250) as #87CEFA.
To convert Hexadecimal to Decimal, for example the #87CEFA:
- Red: 87 in hexadecimal is (8 * 16 + 7 * 1) = 135 in decimal.
- Green: CE in hexadecimal is (12 * 16 + 14 * 1) = 206 in decimal.
- Blue: FA in hexadecimal is (15 * 16 + 10 * 1) = 250 in decimal.
Hexadecimal color mixer
Experiment with the color mixer by changing the red, green and blue values using the corresponding sliders.
Functional RGB color values
The format of an RGB value in the functional notation is rgb( followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ). The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF = #FFFFFF. White space characters are allowed around the numerical values.
| Formatted text | HTML markup required |
|---|---|
| Orange and Orange again. | |
RGBA color values
The RGB color model is extended in this specification to include "alpha" to allow specification of the opacity of a color. Unlike RGB values, there is no hexadecimal notation for an RGBA value.
The format of an RGBA value in the functional notation is rgba( followed by a comma-separated list of three numerical values (either three integer values or three percentage values), followed by an alphavalue, followed by ). The integer value 255 corresponds to 100%, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). White space characters are allowed around the numerical values.
| Formatted text | HTML markup required |
|---|---|
|
100% opacity: Orange 90% opacity: Orange 80% opacity: Orange 70% opacity: Orange 60% opacity: Orange 50% opacity: Orange 40% opacity: Orange 30% opacity: Orange 20% opacity: Orange 10% opacity: Orange 0% opacity: Orange | |
Changing colours of your page
You can change the global colors of the background and text by adding CSS rules. You will have detailed information in the CSS lecture. Until then, you can use some inline style attributes background-color: to specifies the background colour of the element, and color: to specifies the colour of the text. Adding these to the body tag will apply the colours specified to the whole document. For example:
<body style="background-color:#ccc; color:pink">.
Review Questions
- Question 1 - What is the colour code for a light blue in RGB using hexademical notation?
- Question 2 - What is the colour code for a light blue in RGB using functional notation?
- Question 3 - What is the colour code for a very transparent dark blue?
- Question 4 - What colour is #000080?
- Question 5 - Is #000080 exactly identical to #008?
- Question 6 - What is the six-digit hexadecimal colour code for #369?