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
You know, there’s more than one way to define colours in HTML other than the words for each one.
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
The hexadecimal digits can be abbreviated to 3 digits instead of 6 after the hashtag if the two digits per group are the same value, for example #FF0022 can be abbreviated to #F02 (a solid red with a touch of blue). This brings the spectrum of colours down from over 16 million to just over 4,000 (4,096 actually if like me you did the math 16x16x16 cause why not). However browsers will interpret both the #FF0022 and #F02 as the same colour.
Using RGB to Colour Elements
You can also represent colours in CSS with RGB. The values range as brightness from 0–255 (256 total values) and are written as rgb(0, 0, 0) in the code. What colour is that? Well, there are no values for each of the numbers so it will produce… black!
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:
<style>
body {
background-color: rgb(0, 0, 0);
}
</style>
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!
