What we did

July 2023 : This month we looked at how Colour works and Scrimba free courses.

For July at the suggestion of one of our members we looked at colour. How it works in real life and how it works on a screen.

In real life paint is made of three primary pigments Red Yellow and Blue. They are called primary because you can’t make them by mixing any other colours. By the way printed colour is usually a combination of Cyan, Magenta, Yellow, and Black.

Now on the other hand light or electromagnetic radiation consists of three colours Red, Green and Blue. This was discovered by Sir Issac Newton using prisms and mirrors. When white light is shone

through a prism it is split into the rainbow but if the colours Red, Green and Blue are re-combined we see white light. All other colours are combinations of those colours.

So, while pigments reflect; light screens are different they project. Therefore, the colour we see on the screen is created by radiation and must use Red Green and blue to make any other colour. Originally screens used three electronic “guns” to fire electrons on to a screen. Now we have LEDs with a red green and blue element. Each LED forms a pixel.

Which brings us to how we manipulate colour in our web pages.

Colour on the web can be defined in roughly four ways.

By Name, by RGB / HEX or by HSL.

You can find all these better defined in W3 Schools at CSS Colors.

By Name

Back in the early days of the web there were one hundred and forty named colours we could use.

See W3 Schools HTML Color Names

RGB

The main way colour is defended now is RGB. Each element of the three elements has a value between 0 and 255 or in percentages. The variation of those values creates 16,777,216 possible colours. To make white each element would be set at 255, 255, 255, while black is 0, 0, 0, by changing the value of the three elements in different proportions, we get those 16,777,216 deferent combinations. The same RGB can be defined in Hexadecimal or base-16. (See HEX below)

W3 Schools has a RGB number mixer were you “dial up” any combination.

To see how this works we made css element with a background colour of light blue.

Here’s the example. article { background-color: rgb (0, 191, 255) }.

RGB Test

RGBA

Before we leave RGB there is one other format to look at, RGBA. Here we use A to determine the alpha channel or transparency of the background. To the usual three elements we add a fourth which goes from 0, Fully transparent to 1, full colour.  In our example the same colour is given a transparency of 0.5 or a half.

Article { background-color:rgba(0, 191, 255, 0.5)}

RGBA Test

HEX

Now the other way we can describe RGB is by hexadecimal. Wikipedia defines it as “Unlike the decimal system representing numbers using ten symbols, hexadecimal uses sixteen distinct symbols, most often the symbols "0"–"9" to represent values 0 to 9, and "A"–"F" (or alternatively "a"–"f") to represent values from ten to fifteen.” So to describe an RGB in Hex we have a # tag and 2 integers  each for the red green and blue elements. The hexadecimal values are between 00 and ff.

Here is what the W3 Schools said on HEX along with their HEX mixer.

Using the mixer we have the same colour in Hex. Article { background-color: #00beff }

HEX Test

HSL

Then we have Hue Saturation and Light. The hue is the colour, here’s what W3 Schools said, “Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.” Black is 0  - 0% - 0% and white 0 - 100% - 100%

The saturation is the amount of colour you see. “Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.”

Finally, lightness is the amount of light or how dark or light the element is, “Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white”.

To find a shade of grey you set the hue and saturation to zero and vary the percentage between 0 (black) and 100% (white)

Here is what the W3 Schools said on HSL along with their HSL mixer.

So we still need a light blue background and here it is in HSL

Article  { background-color:hsl(196, 100%, 52%)}

HSL Test

Scrimba Web Design Courses

After the break we had a look at a site offering free tutorials. Scrimba offers a range of courses on all aspects of web design. There are a large number of free courses and two paid options available. Find out more at Scrimba.com

It has a unique learning method with instructive screens so as you listen to the lecture you can write the code. Here is what Scrimba said, “Our interactive screencasts let you edit the code whenever you want, just as if you were pair programming with the teacher.” Here is video demo.

Steve South

Web Design leader