Learning to Code: Day 9— Introduction to CSS Part 6

Hey ya’ll. I’ve spent the last couple hours making a little mock-website testing most of the code we’ve learn’t so far, and I tried to figure out how to create a form which you could send the data of to an email address. I was going back and forth on Google and trying out different things, but as far as I’m aware, it’s a combination of multiple languages and requires PHP too. It’s all way down the road, but worth trying out things new to you right?

What did the .duck say to the .elephant? You’re not my type! *tumbleweed*

Let’s jump back into the learning and pick up where we left off and look at colours as the topic of today.

Hex Code for Colours

Hexadecimal code or Hex code for short, is written as a hashtag followed by a series of numbers which turns into a specific shade of colour in CSS. Here’s some info from Wikipedia on the subject.

There are sixteen distinct symbols made up of decimals, the numbers 0–9 which give a value of 0–9 and then A-F representing the values of 10–15. So counting on your hand you’d start on your thumb (1) as zero and then index finger (2) is one and so on. Altogether, these digits 0-F represent a digit in hexadecimal, which gives us 16 possible values.

Black is the darkest colour (and my favourite colour because life) so has the lowest Hex value and is written as #000000. So that’s a hashtag and six hexadecimal digits afterwards. They are split into 3 groups of 2 digits. The first two digits represent red(R), the third and forth represent green(G) and the last two represent blue(B). Lemme quickly scribble this down and show you what I mean (excuse my finger writing):

That makes up RGB together which as we know are the three base components to all other colours (16,777,216 to be precise).

The colour orange is pure red with some green and no blue. this is written as #FFA500. Those two zeros at the end are representing the blue (B) with no value (making it absent), and the the first two F’s represent the highest possible value in the red (R) component (meaning solid red). So I think we can say that if we count these on our hands, this would read as:

16(F)–16(F) | 11(A)–6(5) |1(0)–1(0). Understand me so far?

Abbreviating the Hex

Using RGB to Colour Elements

The number of possible values in Hex are the same as RGB because in the Hex code the highest value for one component group (R for example) is FF or 16x16 which makes 256 (including the value of zero which is in itself a value!), with the three components of RGB, that’s 256x256x256 = 16,777,216 possible outcomes. Boom.

Let’s write an RGB value into the code to change the background colour of the body element to black:


body {

background-color: rgb(0, 0, 0);



Just like Hex, you can make a combination of RGB values to produce a specific colour, for example the colour orchid ( a light pink colour) is rgb(218, 112, 214).

Aaaand let’s call it a day there.

That was fun wasn’t it? Man this is fun learning as we go learning something new everyday. Loving these and I really hope my explanations are clear enough! Please comment in the Responses if not.

See you tomorrow!



Frontend Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store