CSS Colors
So guys we discussed about CSS in our earlier posts now we
are going to discuss about Coloring our document using CSS. CSS coloring can
make your document colorful and visualized. You can color your window, form,
div, section, background and lots of more. basically we use to provide below terms
for coloring.
*{
background-color: red;
border-color: gray;
color: blue;
}
But the question is which term is use and where?
So when you have any container like DIV, section, header,
footer, etc. there you have to use term “background-color” to change the background.
Background color also use to change full page body color.
Whenever you have any special terms like icon or you are
indicating font, that time “color” is suitable term to changing the color.
When you wants to change the color of border of any div or section
or button, that time you can use term “border-color”.
Defining a Color in CSS:
In CSS you can define the color by 3 types:
- Color by name
- Color by Hex color code
- Color by RGB and HSL values.
What are HTML Color
Codes?
Color codes are ways of representing the colors we see every-day
in a format that a computer can interpret and display. Commonly used in
websites and other software applications, there are a variety of formats,
including Hex color codes, RGB and HSL values, and HTML color names, amongs
others.
HEX Color Code:
Color-hex gives information about colors including color models
(RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous
colors calculated in color page. Color swatches are defined by using the
hexadecimal code for the color and are sorted by the hexadecimal code. The
color names are descriptive and shouldn't be used to specify a color unless you
are using the 16 named colors or SVG colors.
RGB Color Code:
RGB
color space or RGB color system, constructs all the colors from the combination
of the Red, Green and Blue colors. The red, green and blue use 8 bits each,
which have integer values from 0 to 255. This makes 256*256*256=16777216
possible colors.
RGB
≡ Red, Green, Blue
Each
pixel in the LED monitor displays colors this way, by combination of red, green
and blue LEDs (light emitting diodes).
When
the red pixel is set to 0, the LED is turned off. When the red pixel is set to
255, the LED is turned fully on.
Any
value between them sets the LED to partial light emission.
Why to use Color Code
instant of naming?
Color is an element of visual language that people process
before they are consciously aware of it. It ‘pops out’ at viewers in the early
stages of vision. Because color is a potent element of visual communication, we
need to think through how and why we are using it. Some of important reason of
use coloring is:
- Colors are helpful for your viewers to get the target information early.
- Creative uses of different colors can also make your UI look nicer and less boring.
- It’s easier for users to mentally map out smaller chunks of a navigational space, such as one section, than the whole space at once
- Different browsers may not agree on what some color names mean. There are not names for all 16 million 24-bit colors. In fact there are only 17 W3C-standard color names.
- Once you start playing about with JavaScript. With Hex (also RGB and HSL) it is much easier to adjust the colors in predictable ways.
List of Common
HTML Color Codes
Color
|
Color Name
|
Hex Value
|
RGB Value
|
White
|
#FFFFFF
|
RGB(255, 255, 255)
|
|
Black
|
#000000
|
RGB(0, 0, 0)
|
|
Green
|
#008000
|
RGB(0, 128, 0)
|
|
Aqua
|
#00FFFF
|
RGB(0, 255, 255)
|
|
Silver
|
#C0C0C0
|
RGB(192, 192, 192)
|
|
Gray
|
#808080
|
RGB(128, 128, 128)
|
|
Red
|
#FF0000
|
RGB(255, 0, 0)
|
|
Yellow
|
#FFFF00
|
RGB(255, 255, 0)
|
|
Blue
|
#0000FF
|
RGB(0, 0, 255)
|
|
Navy Blue
|
#000080
|
RGB(0, 0, 128)
|
|
Lime
|
#00FF00
|
RGB(0, 255, 0)
|
|
Purple
|
#800080
|
RGB(128, 0, 128)
|
So check the below example:
Code
<!DOCTYPE
html>
<html>
<head>
<title>CSS
Color</title>
<style
type="text/css">
body{
background-color:
tomato;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
}
.div1{
width:
50%;
height:
25vh;
background-color:
red;
}
.div2{
width:
50%;
height:
25vh;
background-color:
#ffffff;
}
.div3{
width:
50%;
height:
25vh;
background-color:
rgb(0, 0, 0);
}
</style>
</head>
<body>
<div
class="div1"></div>
<div
class="div2"></div>
<div
class="div3"></div>
</body>
</html>
Explanation:
So in above example we have taken 3 div elements which are
classified with div1, div2 and div3. The first div background-color we defined
with color name. the second div color we defined with HEX color value and the
third div element background color is defined with RGB color value. So now you
can understand that how to use the coloring scheme and values in HTML.
Here is the result:
Now we will see the different coloring method like:
background, text, border etc.
Let’s checkout below code:
Code
<!DOCTYPE
html>
<html>
<head>
<title>CSS
Color</title>
<style
type="text/css">
body{
background-color:
tomato;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
}
div{
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
padding:
10px;
border:
5px solid;
border-color:
lime;
}
h1{
font-family:
"Ubuntu";
color:
aqua;
}
h3{
font-family:
"Dancing Script";
font-size:
45px;
color:
tomato;
}
p{
font-family:
"Raleway";
color:
#ffffff;
}
.div1{
width:
50%;
height:
25vh;
background-color:
red;
}
.div2{
width:
50%;
height:
25vh;
background-color:
#ffffff;
}
.div3{
width:
50%;
height:
25vh;
background-color:
rgb(0, 0, 0);
}
</style>
</head>
<body>
<div
class="div1">
<h1>A Quick Brown Fox
Jumped Over The Lazy Dog.</h1>
</div>
<div
class="div2">
<h3>a quick brown fox
jumped over the lazy dog.</h3>
</div>
<div
class="div3">
<P>A QUICK BROWN FOX
JUMPED OVER THE LAZY DOG.</P>
</div>
</body>
</html>
Explanation:
So above you can check that there are 3 type of attributes
are highlighted in yellow, red and purple color.
The yellow color attribute is defined the color of border
for all div elements present in the document. If you want to give different color
to different div borders, you have to define the same under their class section
of style element.
The attribute highlighted under red is showing the color of
fonts which are described under div elements.
The purple color is defining the background of div elements.
So here is the result:
So that’s all about CSS Colors. Hope you enjoyed the
article. Please share your comments.
Thank you
Colours are very important element in blogging and has being covered with incredible detail by your post.
ReplyDeleteThe confusion I had about CSS coloring got cleared after reading this post. Good explanation 👌
ReplyDeleteThis post cleared my confusion regarding colour
ReplyDeleteAwesome, but CSS seems to be more difficult than HTML
ReplyDeleteThis is an intelligent write up bro.
ReplyDeleteKeep it up!
CSS is awesome but it makes a web page more heavier to load. Check out my website : Live Amazon Sale.com
ReplyDeleteIt's nicely explained but I think it's a bit difficult
ReplyDeleteGood one👍
ReplyDeleteNice to know about css thanks for sharing
ReplyDelete