CSS Colors



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
 

9 Comments

  1. Colours are very important element in blogging and has being covered with incredible detail by your post.

    ReplyDelete
  2. The confusion I had about CSS coloring got cleared after reading this post. Good explanation πŸ‘Œ

    ReplyDelete
  3. This post cleared my confusion regarding colour

    ReplyDelete
  4. Awesome, but CSS seems to be more difficult than HTML

    ReplyDelete
  5. This is an intelligent write up bro.
    Keep it up!

    ReplyDelete
  6. CSS is awesome but it makes a web page more heavier to load. Check out my website : Live Amazon Sale.com

    ReplyDelete
  7. It's nicely explained but I think it's a bit difficult

    ReplyDelete
  8. Nice to know about css thanks for sharing

    ReplyDelete