Tutorial Manthra

Colors are one of the most powerful tools in web design. In CSS, you can apply colors to text, backgrounds, borders, and even shadows. There are several ways to define colors depending on how much precision you need.

In CSS, colors are not just for text. They are used to define the visual identity of a website, from backgrounds and borders to complex shadows and interactive outlines.

CSS Color Formats

The following table lists all possible formats used to define colors in CSS:

Applying Colors to Properties

Colors can be applied to various parts of an element. Here is how they are used:

• color: Sets the color of the text and text decorations (like underlines).
• background-color: Sets the solid color behind the element’s content.
• border-color: Defines the color of the line surrounding the element.
• box-shadow: Adds a colored glow or shadow effect around the element’s box.
• text-shadow: Adds a shadow effect specifically to the text characters.
• outline-color: Sets the color of the line outside the border (often used for focus states).

Example Code:

.card {
  color: #2c3e50;               /* Dark blue text */
  background-color: #ecf0f1;    /* Light grey background */
  border: 2px solid #3498db;    /* Blue border */
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2); /* Soft black shadow */
  text-shadow: 1px 1px 2px white; /* Subtle white text glow */
}

Color Control Properties

CSS Colour Examples

Background Colour

In CSS you can specify colour for a bckground like below

	<table width="100%" border="1" style="text-align: center">
  <tbody>
    <tr>
      <td style="background-color: red">Red</td>
      <td style="background-color: green">Green</td>
    </tr>
    <tr>
      <td style="background-color: orange">Orange</td>
      <td style="background-color: grey">Grey</td>
    </tr>
    <tr>
      <td style="background-color: aqua">Aqua</td>
      <td style="background-color: yellow">Yellow</td>
    </tr>
    <tr>
      <td style="background-color: violet">Violet</td>
      <td style="background-color: deeppink">Deep pink</td>
    </tr>
  </tbody>
</table>

Text Colour

You can specify dolour for a text in CSS

Red Text

Green Text

<p style="color: red";>Red</p>
<p style="color: green";>Red</p>

CSS Border Colour

In CSS colour can be applied to border also

Black Border

Red Border

<p style="border: 1px solid Black;"></p>
<p style="border: 1px solid Red;"></p>

How to apply colour to an Element

In CSS there are many ways by which you can apply colour to an element

Color Names

The easiest way is using color names. CSS supports 140 standard color names. These are easy to remember and great for quick styling.

In all the above example we used color names to apply color to an element, be it text background or border

h4 {
  color: Red;
}
p {
  color: DodgerBlue;
}

color: Red

color: DodgerBlue

RGB and RGBA Values

RGB stands for Red, Green, and Blue. Each parameter defines the intensity of the color between 0 and 255.

• RGB Syntax: rgb(red, green, blue)
• RGBA Syntax: rgba(red, green, blue, alpha) (The “Alpha” value is a number between 0.0 (transparent) and 1.0 (opaque)).

/* Solid Red */
h4 {
  color: rgb(255, 0, 0);
}

/* Semi-transparent Green */
p{
  color: rgba(0, 128, 0, 0.5);
}

color: Red

color: DodgerBlue

Hexadecimal Codes or HEX Codes

Hexadecimal (HEX) codes are the most popular way to define colors in web development. They start with a hash (#) followed by six characters (0-9 and A-F). Eg: #FF6735

The First 2 digit represent the red value, The next two digit the Green Value and the last two digit represent the Blue value. You can easily pick these values from any graphic software like photoshop, or advance paint. You can use upper case or lower case to represent these values.

• Format: #RRGGBB (Two digits each for Red, Green, and Blue).

Example

h4 {
  background-color: #f4f4f4; /* Light Grey */
}
p {
  color: #00ff00; /* Bright Green */
}

#f4f4f4; Light Grey

#00ff00; Bright Green

Tip : Tip: If the pairs are identical (like #ff0000), you can shorten it to three digits: #f00.

Short Hexadecimal Codes

This is the same Hexadecimal Codes, the only difference is that if all the two digits of the hexadecimal codes are similar you can shorten it an use a single digit instead of two digit. So #22FF66 becomes #2F6. All other rules are the same

h4 {
  background-color: #F00; /* Red */
}
p {
  color: #0F0; /* Bright Green */
}

#f00; Red

#0f0; Green

HSL Values

HSL stands for Hue, Saturation, and Lightness. This method is often more intuitive for designers.

• Hue: A degree on the color wheel (0 to 360). 0 is red, 120 is green, 240 is blue.
• Saturation: A percentage value (0% is grey, 100% is full color).
• Lightness: A percentage (0% is black, 50% is normal, 100% is white).

Example:

p {
  color: hsl(0, 100%, 50%); /* Pure Red */
}

HSL

HSLA Values

HSL stands for Hue, Saturation, and Lightness and the A stands for the transparancy like the A in RGBA

• Hue: A degree on the color wheel (0 to 360). 0 is red, 120 is green, 240 is blue.
• Saturation: A percentage value (0% is grey, 100% is full color).
• Lightness: A percentage (0% is black, 50% is normal, 100% is white).
• HSLA: Includes an Alpha channel for transparency.

Example

p {
  color: hsla(355,70%,50%,0.4);
}

HSLA

currentcolor Keyword

This is a special keyword that acts like a variable.

• Example: div { color: orange; border: 5px solid currentcolor; }
• Description: The border will automatically become orange because it “links” to the text color.

div { 
       color: orange; 
       border: 5px solid currentcolor;
 }

Browser Safe Colors

In the early days of the internet, monitors could only display 256 colors. “Browser Safe Colors” was a list of 216 colors that were guaranteed to look the same on all monitors. Modern Note: With today’s high-definition screens, you can use any of the 16.7 million possible colors. Browser-safe colors are no longer a restriction but remain a part of web history.