Introduction
Good day (or evening) coders! 
We are going to dig deeper into the practical theory of colours. For those who are not aware of the principles of web design topic series, please check out the introduction page for further details. Also, if you have not read the last topic on the colour psychology, I would strongly recommend you to at least read and understand the meanings of colours.
In the last topic, we have looked at how colours hold a vital role in emotion and moods. Although you will still be learning about colours, this topic will be on a completely different perspective, and this is where you will learn how colours work and how we apply them in our design work. However, learning about colours in design theory is the most prominent topic out of all others, such as typography and layout. Therefore, we will look into creating a colour scheme and palette in the next topic (and the last one of the colours).
In this topic, we will first go into colour models and colour wheels. Without learning what they are, it is impossible to create your colour scheme. But, we also use them intensively in both design application and coding, which some people are not aware that they are doing so. Because of that, I will go into a small part of how colours models are used in design applications like a graphics editor.
After that, we will look into technical keywords that are used in the colour theory. I have noticed that in some design learning platforms (especially books) when they teach what those keywords mean, and they do in very basic terms. In my opinion, they seem to be not very informative, or they do not provide an example of how it works. For example, the subject of additive colours is usually kept brief when they are being explained. If the learner has a good knowledge of science, then that is okay. Otherwise, they may struggle to understand the concept. That is why I went deep into this keyword than all the others. Also, to make it engaging for everyone, I decided this may be the right opportunity to explain how to use the RGB colour slider and how to create your colour using it. I have to admit it was a tricky subject to teach as it involves science and I had to re-edit so many times as I have gotten carried away!
So, I hope this topic will be helpful to you when you are designing your website. Also, no tutorial in this one, but I have provided mini challenges instead.
Have fun reading! 
The Colour Wheel
The colour wheel is a simple illustration to demonstrate the colour model and its structure of the colour mixing process. As we can see from the image above, this particular colour model shows 12 standard colours laid out in a circle. The colours on the wheel are in a specific order, and every one of them is either a primary, secondary or tertiary colour.
A colour model is a system which is for creating a range of colours. It has been thought that in every colour model, they have a large number of colours directly, which is not technically accurate. There are only a few (usually three) colours in every colour model, and they are known as primary colours. But, these primary colours can be mixed and depending on what colours they are and how much was used, they can produce to make secondary and tertiary colours. Therefore, the colours that are within the range of the specific colour model are descendants of the colour modelâs primary colours. When we talk about the range of colours that are available within a colour model, we refer this to as the colour gamut.
There is more than one colour model, and each one has its colour gamut along with their own set of primary, secondary, and tertiary colours. In every model, their concept and purpose are different from each other. For example, one colour model (RGB) is used to work with colours on electronic devices screen, while other models (CMYK, RYB) are for producing colours with paints and ink and apply it to surfaces like paper. Therefore, the colour model system uses the colour wheel to show their form and layout of their range of colours and how they will appear on their platform (on-screen or on paper).
The colour models and their wheel were initially created based on science ideology. But, they became adopted and widely used in design theory, and the colour wheel now plays an essential role in art & design (including web) for various reasons. When a designer uses the relevant colour wheel to work with their product, they need to understand what colours are available in their colour gamut and how the colour-mixing process work by seeing the basic colours on the wheel.
But, designers also use the wheel to see the visual relationship of these colours to each other. They use them to see how the chosen colours work (or donât work) together. For example, using the colour wheel above, Yellow is opposite Blue, and a web designer will determine if they would work effectively in their web design layout. When designers compare colours together on the wheel, and they work in harmony, they add those colours to a collection. This method is known as creating a colour scheme, which we will go through on the next topic.
Some web designers have their preferences of what colour wheel to use when they are creating a colour scheme and looking for colours that work together for their web project. But, they only use the RGB colour model when web designers (and web developers) create their web layout and apply colours to it. So if we have used a different colour modelâs wheel to create a colour scheme set, we will need to understand how to produce these colours in the RGB colour mixing process.
RGB Colours
This colour model serves colours that are used on electronic screen devices. The image of the colour wheel above is the RGB colour model, and again it displays its 12 standard colours of RGB.
As we are now aware that a colour model can only directly contain primary colours, in this case, RGB has three primary colours, which are Red, Green, and Blue (hence the abbreviation RGB). All the other colours shown on its colour wheel are either secondary colours, and they were created using two specific primary colours. Or they are tertiary colours, which again it used two primary colours to form them, but this time on a certain amount of one primary colourâs intensity level.
Although those 12 colours represent on the colour wheel as RGB principal colours, technically there are just over 16 million colours in the RGB colour gamut. You are probably thinking how on earth can you pick a colour out of that massive range to apply on your web design layout? (I will get to that point along with the intensity level that I just have mentioned above). But, for now, think that the three primary colours are colour light (which they are) and we use the each colourâs light dimmer switch to turn them on and off and adjust the intensity of the colour.
Why do we even need to know the colour models?
Without knowing what a colour model is and that there is more than one system, we would struggle to understand on how to work with RGB colours and finding that particular colour shade in colour mixing process that we want to add in our web project.
But, even worse, we could also be using the wrong colour model in our design layout (which can and does happen in some cases), even though we wouldnât be aware of that if we have no idea what is a colour model in the first place, right? Luckily, with CSS, it only uses colour models, like RGB, that is for colours on the screen. However, in applications like graphic editors, they can have colour settings containing different colour models. That could become confusing when we may have to do some configuration on the document colour settings.
If you plan to become a web designer professionally, or you enjoy learning to design, you will need to use a graphics editor. There are specialised graphics editors that web designers use in their workflows such as Adobe Photoshop or Illustrator. They are great tools, but they can be costly. Luckily, I have heard the free alternatives like GIMP and Canva are also useful for beginners to start on an elementary level.
Web designers use graphic editors for a lot of things. They create design layouts so they can visualise how the layout will look like with contents set in place along with the colour scheme and font style. They can also use the application to create graphic components like icons. But, there are more to it than just creating design elements. When we have a client, they may give us their visual resources to include in the web design layout. That can consist of images, their logo and branding elements like font and colour scheme. The colours the client have presented to you must be shown the same when you apply it to the design layout.
Here are brief explanations of how web designers use colour models when using a graphics editor. Note that every graphic editor have their way of running the application, and some things mention below may not apply to it.
What colour models are included?
Most applications include two most used colour models, and that is RGB and CMYK. When applications have these two colour models, the app can generally create a document that targets different kinds of platform, such as for screen devices and print.Understand the basics of what CMYK colour model is and do
We are aware that RGB works with colours on Screen. On the other hand, the colour model CMYK:-
Is designed to work with physical tools like dyes and paints.
-
Is widely used in printing. Thus you may have heard of the four-colour printing process.
-
Is used when we create designs like the packaging for a product, book jacket and magazine cover, poster etc.
-
Is NOT to be used when you are creating designs for the digital platform!
-
Has a smaller range of colours than the RGB. For example, we can see the bright neon Yellow-Green colour on the screen in RGB format, but it is not available on surfaces like paper if it used in CMYK printing.
-
Their primary colours are Cyan, Magenta, and Yellow.
It is not a must as we would not use CMYK in web design, but it is handy to understand how they work so if you ever need to print visual documents like your photos that you took on your holiday.
Dealing and configuring with colour settings
Some graphic editor will prompt us to define a colour setting when creating a new document. Luckily so far, most applications that I have come across to set up a document have been relatively easy as they ask what is the document is designed for, using clear words such as print, web, mobile etc. When we select the type of document, the application will do the rest of the work of defining all (including colour) settings. Also, we can convert a document set in the predefined colour model to another. However, colours may change when this happens.The reason why graphic editors ask us this is because so we can see the correct colours on screen. Remember, CMYK has a smaller colour gamut and will not show us colours that are not within the CMYK range. I have provided two images below where the first image is the document set in RGB colour mode, and it shows a box filled with a bright neon colour. The second image show what happens when I converted the documentâs colour setting from RGB to CMYK. The bright neon colour doesnât exist in CMYK, so it had to find the nearest shade to replace it.
Remember
If we are creating a web document, its colour mode should be defined in RGB or for a print document, that will be CMYK colour mode.Note
Every electronic device brand and model have their way of showing colours on the screen, so it is important to remember that the colour we see on one screen will look different from another. There is not much we can do about this since we donât have control on usersâ screen monitor, but this is great to know so if you can explain this to your client if they ever address this issue.TIP
If you are working on a document that has a colour setting defined beforehand, converting a colour model to another can be tricky if you have no clue how to use the application and do a colour mode conversion. It isnât generally hard, but I would advise you to google for this kind of case (e.g. âconverting document colour model in[APP NAME]'. There usually are guides for doing configuration in the application setting.Common mistake that graphic editor users make
Another reason why graphic editors define the colour setting for our document is also to show the colour tools in the correct colour model. There is various kind of colour tools, but the colour slider is the most used tool to apply colour on elements. So in an RGB document, the colour slider should be showing three sliders of R (Red), G (Green), and B (Blue). Otherwise, if within a CMYK document, then it should have CMYK colour slider with four sliders of C (Cyan), M (Magenta), Y (Yellow), K (Black).However, some graphic editors, like Adobe Illustrator, can give us more control by using the colour tool in a different colour model. The problem is that some users have used the CMYK colour slider when working on an RGB document. That is because of the misconception that the CYMK having four colour slider brings more control of creating a specific colour. They also think that the CMKY have a more extensive range of colours than the RGB, because of an extra slider. That is not correct because if we remember, the RGB has a larger colour gamut. So, it is advisable to stick to the colour tool that has the same colour model as the document itself.
Therefore, by knowing the fundamentals of the colour models, we would be aware of which colour model to use in an individual situation appropriately. If you want to be a good web designer and have a good understanding of design principles, knowing the basic of the colour models and its wheel would make a big difference.
Technical Terms
I will be going through colour terminology in particular order. I will start with the ones that are provided with long explanation and examples. The last few terms will have brief information. However, it is good to know all of those keywords because you may come across them when using an application to create a design or someone (like a designer or a client) could throw these terms at you. Therefore, this is to help you to avoid becoming confused or have a wrong assumption of what they mean.
Additive vs Subtractive colours
The terms - additive and subtractive are a method of colour mixing. It is a process of what happens when three primary colours are mixed, and that depends on their colour models. This process involves some science. But, I will try to avoid going into concepts in that field on a higher level as I aim to explain this in a simple way where everyone can understand.Here is short information for those who do not know what is precisely colour and how does it work. Light is a form of energy, and we get light from the sun. When light travels down to Earth, it comes in waves, and those waves come in different length (they are known as wavelength). But, that light (that we can see) is composed of different colours, and each colour comes in different wavelengths. When all these waves (of every colour) are combined, that is how the White light is created. Thus in science, White is a colour as it contains all the mixed colours, and Black is not since there is no sign of colour and is just a dark and empty space.
Before I start, I want to point out that I will be explaining intensively on additive colours and minimal on subtractive colours because additive colours are colours that we would see on the screen.
In short, the RGB colour model is additive, and by knowing how additive colours work, we would understand the RGB colour values and how to work with them using a colour tool like a colour slider. I have found an online RGB colour slider, which is handy to use in your web projects. The greatest thing about it is they provide you with the hex colour number for that colour you have made.
Additive Colours
As mentioned above, when the light of all colours is together, we see a White light. That is how additive colours work. When a mixture of different colour lights of Red, Green, and Blue creates a colour, that colour is additive.The RGB colour model is additive because our eyes can only see the primary colours, Red, Green, and Blue. Our eyes canât see other colours like Yellow or Green. Confused? Imagine that there is a wall, and we have three spotlights that are Red, Green, and Blue. Right now, all spotlights are off, and the wall is dark (Black). Then, we turn on all spotlights, which is hitting on the wall in a different area. We know what colour each spotlight are because our eyes can see them.
But, if we move the Green light and overlap it on the Red light, our brains are telling us that light is now Yellow, which if we look at the RGB wheel, it is a secondary colour. Technically, that light is not Yellow, but it is how our brains tell us to perceive it as that colour. That is the same case if we use the other two different primary colour light to create different colour light, which is secondary colours:
Red + Green = Yellow
Red + Blue = Magenta
Green + Blue = Cyan
Did you notice that the RGBâs secondary colours are the primary colours of the CMYK? That means the CYMK can also contain additive colours (despite this colour model are technically subtractive). When all three spotlights are placed together in the same area, the spotlight becomes White. Therefore this is how RGB model work to show colours on screen.
In scientific theory, my demonstration is not precisely the same, but my simplified explanation achieves the same outcome of how we see those colours on screen.
Imagine that every single pixel on a screen has their own three (RGB) spotlights, and when one is turned on, it will shine on the whole area of that pixel. When another spotlight also is turned on, it will overlap the first spotlight and show a secondary colour light in the pixelâs whole area. I will let you guess what colour is the pixel if all three spotlights are turned on.
How RGB Slider work with additive colours + Technique Examples
I would suggest you use that online RGB colour slider that I have provided above and follow along what I am doing so you can see what is going on and absorb what you have learned. On the site, it shows a swatch box to show what colour you have made. Think of that swatch box as one large pixel.To turn on or off a light, we use a light switch. The RGB colour slider work in that similar concept, only it is more like a light dimmer switch. Again, it has three sliders for three different primary colour light (Red, Green, and Blue), and each of these sliders is there to turn on and off their primary colour spotlight. But we can also adjust how much of that colour spotlight in term of intensity.
For example, if we donât want to show too much colour light of Red, then on the Red slider. We would make a small adjustment and drag the Red slider to, letâs say, 100.
Right now, if we can see the swatch box, it looks like a very dark Red colour. If we remember when all spotlights are off, the area is dark and Black and when that happens, it means all three RGB sliders are switched off at 0. Since we have only used little power of Red light and show a bit of light, the swatch box is still dark, but we can tell there is an existence of Red light.
If we want to see the swatch box in bright Red light, then we slide the Red adjuster (light dimmer switch) to the full power of 255.
These numbers we are seeing - 0, 100, 255 - are RGB colour values and they are to show the intensity level of a primary colour. Each colour light has a scale starting from 0 going to the way up to 255.
Remember
-
0 means the light is switched off and is completely pitch Black
-
255 means the light is on at full power and is completely bright
Keeping the Red slider at 255, adjust the Blue slider to 255. The swatch box should be showing a bright Magenta (secondary) colour light. But, letâs say we want to apply Magenta as a background for a webpage. At that level of intensity, the Magenta colour may be too harsh for our eyes. So, to create a darker shade of Magenta colour is to lower the colour lights (of both Red and Blue) evenly. Adjust both Red and Blue sliders to 200 to see the darker Magenta shade. I would suggest playing around with the numbers equally just to see how many shades you can create with Magenta or even another secondary colour.
To create a lighter shade of a secondary colour is to have two primary coloursâ intensity level at full blast (255) and then increase the third primary colour to the number that we feel is the right shade. To create a light Magenta colour, adjust both Red and Blue slider back to 255, and I chose to increase the Green slider to 127.
Think this technique as when the primary colour sliders are at full intensity levels. The third primary colour will act as a lightness slider for the secondary colour.
Remember
The higher the RGB number, the more light is added. If all colour sliders are at 255, we will create a White light.If we wanted to create a warmer or cooler tone of colour, we would adjust either the Red (warm) slider or Blue (cool) slider, but only by a subtle amount. Here is an example:
If I want to have a warmer tone of Magenta, the RGB slider should have the values
R: 255G: 0
B: 220*
If I want to have a cooler tone of Magenta, the RGB slider should have the values
R: 220*
G: 0
B: 255
If we have noticed, regardless of what tone, the Magenta appears less vivid. That is because we have lower the colour light intensity of one primary colour (even if it is by a smaller amount). To get that vividness back, increase the third primary colour by roughly the same amount that we have subtracted light from the other primary colour. Here is an example:
R: 220* <- 255 - 220 = 35
G: 35*
B: 255
*does not have to be that exact value. Use your own if desired.
I hope that you have now understood how to create
- A secondary colour
- A darker or lighter shade of a secondary colour
- A warmer or cooler tone of a secondary colour
If you are feeling up for a challenge, try to create a few secondary colours that are warmer or cooler, AND it is lighter or darker.
The colour mixing process to create a tertiary colour is slightly different. We use two primary colour lights, only one of them is halfway on the level of intensity (not bright but also not dark). Looking back at the RGB colour, to create a tertiary colour Azure:
R: 0
G: 127
B: 255
Tertiary colours are considered more sophisticated because the intensity of those colours feels more balanced to the eye. That doesnât mean it is not right to use primary and secondary colour lights in design, but because of their high intensity levels, we would need to think about balance them out in our web design layout. As I have mentioned above, using Magenta for a websiteâs background colour may strain our eyes since it is an intense colour, where a tertiary colour, Rose, the nearest colour to Magenta, may be more suitable for our eyes to handle.
That is exactly how the colour mixing process works with RGB additive colour light, and when I have mentioned that RGB colour model contains 16+ million, they are just different shades and tones of the colours that we see on the colour wheel. How there are that amounts of colours is we multiply the RGB values of each primary colours together:
255 * 255 * 255 = 16, 581, 375 colours
Case Example - an image on a mobile screen device
I have taken a picture of a mobile device, which is showing this image I have found. I also took a shot of it again, and this time, I have managed to intensively zoom in to the point that we can see all the pixels on that device. In that picture, we can see various shades of the Orange colour on the right side and every single pixel that portrays the Orange shades have their spotlights on. I would say that the spotlight is roughly using almost a full amount of Red light, half amount of Green light, and maybe a tiny amount of Blue light. On the left side, which is supposed to be one area of a tree, all the pixelsâ spotlights are off, or it is using deficient levels of light of any primary colours.
Mini Challenges
Challenge 1
See if you can create RGB tertiary colours yourself using the online RGB colour slider. If you do, why not either print the RGB colour wheel shown above and label the RGB colour values next to it? Or keep it as a PDF file and find a way of marking it from there? Next time you are doing a project in FCC, you can use your RGB wheel to:-
just apply the standard colour to your page
-
use one colour and tweak the colour values to make it darker/lighter/warmer/cooler. By doing this and adding those colours to your web design, you are adding a unique touch.
Challenge 2
One thing I havenât told you is how to create Grey colours. Try to create a few shades of Grey and look at the pattern in the colour values. The clue is which RGB colour sliders were used to make White and why each one was at 255? Let us know how you work it out! đSubtractive Colours
I will be keeping this one brief as this colour mixing process will involve more science, but more importantly, it does not include with colours on the screen, which is our area of learning.In design, we use subtractive colours when we mix colours with paint or through a printing process. It does the opposite of how additive colours are mixed. When additive colours are mixed, it adds light, when subtractive colours are mixed, it subtracts light. Therefore, when we mixed paints of subtractive colours on a White paper, that mixed colour gets darker.
How that happens is a long explanation. However, it is an interesting theory, and I encourage you to look into it if you have any interest. If you would like to know more, I have found an article that can explain this further and it will be linked below in the resources section.
Shade vs Tint
Generally speaking, we tend to say we like this shade of Yellow or this light Blue shade when we see that particular colour set at its brightness level. There is nothing wrong with this meaning, and even in the dictionary, it has the same explanation. However, in design terminology, the definition of shade is different. I am going to use the concept of paints to explain what exactly is a shade or another term called tint.Shade
Letâs say I wanted to create a dark Orange colour paint in the artwork. To do this is to mix two colour paints - the standard Orange (that we would see on the colour wheel) and Black. Depending on how dark we want the colour to be, a certain amount of Black must be carefully used to achieve that colour of Orange. The more Black we add, the darker the Orange will be. That is how we are creating a shade.Tint
It is the opposite of shade. If I wanted to create a light orange colour paint, then I would mix that same standard orange paint and White to get that tint of orange. The more we add White to the orange, the lighter that tint of orange will be.How shade and tint are used digitally
In some graphics software, they provide shade and tint colour tool. It is a collection of swathes showing shades and tints for a specific colour that we have made.Also, in HTML and CSS, there are ways to create either a shade or a tint for an element. One technique is you create an <div> element that has an image or a colour as a background. On top of it is another <div> element that has a translucent Black or White background, we can still see the image, but it is darker or lighter than before. That is one way to create a shade or a tint in coding.
Remember
-
Shade - to produce colour and increase darkness to it.
-
Tint - to produce colour and increase lightness to it.
Hue vs Colour
It is widely thought that the two words - colour and hue are the same thing. Technically, it doesnât have the same meaning.Hue
On the RGB wheel, those 12 colours are hues. That is where people will get it confusing that I have just used the colours and hues of the word interchangeably. Before I explain further, I want to point out that Black, White, and Grey are NOT hues, you will see why in a moment.
These 12 colours are hues because they are primary, secondary, and tertiary colours and they are at their purest form. To understand this better, imagine that the RGB colours are paints. I have three primary colours, and they are in their original and pure form, meaning nothing were used to mix and make those colour. We know that to make a secondary or tertiary colour requires two primary colours and that is why they are also hues because again, nothing other than the primary hues were used to make them.
Think of it like this: the primary colours are the parent hues, and the secondary and tertiary colours are the children hues.
Colour
However, if we want to create a darker or lighter colour of a hue, in painting, we would use Black or White paint to mix with a hue. When that happens, it is no longer a hue as it is not pure. That is the same case when we apply Grey into the colour mixture as well.
Looking at the last image, I have created six colours of different shades of the hue orange, and I have added 5% of Black more every time I created the new shade.
The colours may no longer be in its purest form. However, they still have a relation to their hue itself. Therefore, the hue on any colour wheel is also a colour family group. They are the standard colour, and they act as the head of the family. The hue is there to represent all the colours that are related to them.
How the structure of hues in the RGB colour system involves mathematical and scientific concepts, and I will not be going into this. But, when web designers talk about colours and hues, they tend to use those terns based on colour theory.
So, when we hear a sentence âAdd a colour Lavender (pink hue) to the background colourâ, this means to use the pink hue and shade of Black to create this lavender colour. That would be helpful to designers to know this because Lavender can also be created using a Purple hue or even a Blue hue.
Colour Temperature
That means if the colour has warmness or coolness base to it. I have explained in the last topic how a colour with a warm base can make a massive difference to a cool base of that same colour when expressing emotion and mood.When we look at the colour temperature scale where the colours are measured in the degrees of kelvin, Blue is the coolest colour and Red is the warmest. To see how the colours are measured, I found this chart to demonstrate this.
In colour theory, what is considered to be a warm colour is different, not just from the colour temperature scale, but even each colour model varies from each other. Blue is still regarded as the coolest colour and on the colour model wheel, whatever the colour is opposite Blue is the warmest.
With the RGB colour wheel, the warmest colour is Yellow. Any colours that are near to Yellow are considered warm colours (Orange and Chartreuse) and colours surrounding Blue are cool (Violet and Azure). When we look at Red and Cyan, we would automatically think Red is more of warm colour and Cyan as a cool colour.
However, every hue on the wheel has a family representing colours that descended from the hue itself. Letâs look at one hue, Red on the wheel. All the colours that are Red and have cooler base would be on the right side nearer the hue Blue. While the more warm base of Red would be on the left side nearer to Yellow, however, regardless of the warm and cool tones, we would still overall see Red as more as a warm colour than cool colour.
That is the same case where if we look at the hue Violet, its standard shade is cooler, but a Red-based Violet is warmer, and a Blue-Violet is cooler than the hue itself.
Saturation
Saturation means the intensity of the colour. Magenta and Cyan have a full intensity level. We would generally say they are saturated. But, what it means is the colour is not being weakened as they are not being mixed with Black, White, or Grey to tone down that intensity.If your client or anyone says that your element on your web design layout is too heavily saturated, they will probably mean to keep the colour, but tone down that intensity. However, if you make a big adjustment, the colour may look too dull as the colour will be a shade of more Grey and less whatever the colour was.
Tone
In colour theory, the tone is when we use a hue and mixes it with a neutral Grey colour. When creating a tone, some of the hue vividness will be lost, and it can appear dull if we use too much Grey.Conclusion
And there you have it! I would like to think that after reading the last two topics, you have a full understanding of how colours work, but on a completely different perspective. Now, with more tools added to your belt, in the next topic you will (finally!) learn about the colour scheme and its methods to create one. This is where you will use your knowledge of colours that you have learned and apply it to your chosen technique to create a colour scheme. There will be a tutorial for this topic, and I also will be happy to tell you how I create my own colour palette when I donât use the colour wheel.Please post a comment below to discuss anything you want to know on the colour theory and also general design concepts as well. This applies to questions and advice you want to give out.
Until then, see you soon.
Handy Tools
[1] 0to255.com
This is a website where it shows a layout of random but nice unique swatches of colours. When you find a colour you like, click on it, and it will present you with all the shades and tints of that colour.
Or (my preferable way) if you found a colour you like somewhere, and you have the hex number, you can add it to the box on the top right corner, and it will do the same for you. I will be using this website as part of the tutorial for the next topic.
This is great since you do not have to worry about finding the right shade or tint using the RGB colour slider, which can be time-consuming for those who are still trying to get used to it.
[2] ColorZilla
This is supposed to be one of a popular extension for Chrome browser. I have to admit it does have some great features. If you canât have a graphics editor, this colour picker will help you to find the colour you want through its interface and provide you with information about it. Then there is this really cool feature called âwebpage Color Analyzerâ. If you use it, it will give you swatches of colours that are being used on that page. If you click on one of the swatches, it will show a list of colour information for that colour.
The only downside is it doesnât work on all websites, and the eyedropper feature is not good (in my opinion).
[3] ColorPick Eyedropper
This is a Chrome extension tool and what it does say in its name. If you click on the extension in the window bar, it will show you a floating box by your cursor. When you hover over the content on the webpage, it will give you the hex number for that colour. This is great if you wanted to know a particular colour shown in the image.
[4] Pixolor
I LOVE this mobile app! What this does is it has a colour picker circle floater sitting in the screen, and it will detect a colour if you drag the circle over anywhere. If you have taken a picture and you like a particular shade, you can turn on the app and drag the ring over that colour. It will tell you what colour it is (âRedâ, âAmberâ etc.) and provide you information such as hex number and RGB colour value. Have a play around with it to get an idea of how to work with it.
Sadly, this only works on the Android platform.
[5] Swatches: Live Color Picker
I have never used this app, so I am not sure it does a similar job to the Pixolor app, but according to reviews, they say it is a great app. Check it out and let me know if it is same as Pixolor.
UmâŚOops?? 
I love the control of choosing colours but without breaking the colour harmony method. In my next topic, I will be explaining about creating colour schemes and palettes, and I definitely will include this in the handy tools section. Thank you for this, I really appreciate this. 
you are welcome!
