DEV Community

Ranjith srt
Ranjith srt

Posted on

Bootcamp 2 - CSS colors

1. Named Colors:
Enter fullscreen mode Exit fullscreen mode

You can use predefined color names like red, blue, or green. These are easy to remember and simple to use.

Example:

css

p {
  color: red;  /* Applies red color to the text */
}

-Some common named colors: black, white, yellow, orange, pink, gray, purple, brown, etc.
Enter fullscreen mode Exit fullscreen mode
2. Hexadecimal Colors (Hex)
Enter fullscreen mode Exit fullscreen mode

Hexadecimal colors are represented with a # followed by 6 characters, which are numbers (0-9) and letters (A-F). Each pair of characters defines the red, green, and blue components (RGB) of the color.

Example:

css

p {
  color: #ff0000; /* Red */
  background-color: #00ff00; /* Green */
}
Enter fullscreen mode Exit fullscreen mode

-#ff0000 means:

-Red: ff (255 in decimal, maximum value)
-Green: 00 (0 in decimal, no green)
-Blue: 00 (0 in decimal, no blue)
-Shortcut: If the hex code is repetitive (like #ff0000), you can shorten it to #f00 for red.

Example of shortcut:

css

p {
  color: #f00; /* Red (Same as #ff0000) */
}

Enter fullscreen mode Exit fullscreen mode
3. RGB (Red, Green, Blue): 
Enter fullscreen mode Exit fullscreen mode

RGB is a way to define colors using their red, green, and blue values. Each color component is represented by a number between 0 and 255.

Example:
css

p {
  color: rgb(255, 0, 0);  /* Red */
  background-color: rgb(0, 255, 0);  /* Green */
}
-rgb(255, 0, 0): Maximum red, no green, no blue (pure red).
-rgb(0, 255, 0): No red, maximum green, no blue (pure green).

Enter fullscreen mode Exit fullscreen mode
4. RGBA (Red, Green, Blue, Alpha) 
Enter fullscreen mode Exit fullscreen mode

RGBA is just like RGB, but it adds an alpha channel for opacity. The alpha value controls the transparency of the color, ranging from 0 (completely transparent) to 1 (completely opaque).

Example:
css

p {
  color: rgba(255, 0, 0, 0.5);  /* 50% transparent red */
  background-color: rgba(0, 0, 255, 0.3);  /* 30% transparent blue */
}

-rgba(255, 0, 0, 0.5): Red with 50% transparency.
-rgba(0, 0, 255, 0.3): Blue with 30% transparency.

Enter fullscreen mode Exit fullscreen mode
5. HSL (Hue, Saturation, Lightness):
Enter fullscreen mode Exit fullscreen mode

HSL is an alternative way to define colors based on:

-Hue: A number between 0 and 360 representing the color wheel (0 for red, 120 for green, 240 for blue).

-Saturation: A percentage value from 0% (gray) to 100% (full color).

-Lightness: A percentage value from 0% (black) to 100% (white).

Example:
css

p {
  color: hsl(0, 100%, 50%); /* Red */
  background-color: hsl(120, 100%, 50%); /* Green */
}

 `-hsl(0, 100%, 50%): Red with 100% saturation and 50% lightness. `

 `-hsl(120, 100%, 50%): Green with 100% saturation and 50% lightness. `
Enter fullscreen mode Exit fullscreen mode
6. HSLA (Hue, Saturation, Lightness, Alpha):
Enter fullscreen mode Exit fullscreen mode

HSLA is just like HSL but with an alpha channel for transparency.

Example:
css

p {
  color: hsla(240, 100%, 50%, 0.6); /* 60% transparent blue */
}

-hsla(240, 100%, 50%, 0.6): Blue with 60% transparency.

Enter fullscreen mode Exit fullscreen mode
7. CSS Color Functions:
Enter fullscreen mode Exit fullscreen mode

You can use CSS functions to define colors, such as currentColor and transparent.

1.currentColor: Inherits the color value from the parent element.

2.transparent: Sets the color to transparent, which makes the element invisible.

Example:

css

p {
  border-color: currentColor; /* Uses the color of the text */
  background-color: transparent; /* Background will be transparent */
}

Enter fullscreen mode Exit fullscreen mode

Image description

Tips for Choosing Colors: 
Enter fullscreen mode Exit fullscreen mode

1.Color Palettes: Use color palettes to find matching and visually appealing colors for your website. Websites like Coolors help generate color schemes.

2.Accessibility: Ensure sufficient contrast between text and background colors to make the content readable, especially for users with vision impairments.

3.Consistency: Maintain a consistent color scheme throughout your website to create a cohesive design.

Example Combining All Color Types:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: #ff5733; /* Hex color (orange-red) */
    }
    p.named {
      color: green; /* Named color */
    }
    p.rgb {
      color: rgb(0, 0, 255); /* RGB color (blue) */
    }
    p.rgba {
      color: rgba(255, 0, 0, 0.7); /* RGBA color (70% transparent red) */
    }
    p.hsl {
      color: hsl(240, 100%, 50%); /* HSL color (blue) */
    }
    p.hsla {
      color: hsla(120, 100%, 50%, 0.5); /* HSLA color (green, 50% transparent) */
    }
  </style>
</head>
<body>

  <h1>CSS Colors Example</h1>
  <p class="named">This is green text using a named color.</p>
  <p class="rgb">This is blue text using RGB color.</p>
  <p class="rgba">This is 70% transparent red text using RGBA.</p>
  <p class="hsl">This is blue text using HSL color.</p>
  <p class="hsla">This is 50% transparent green text using HSLA.</p>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

-<h1>: Uses a hex color.
-<p class="named">: Uses a named color.
-<p class="rgb">: Uses an RGB color.
-<p class="rgba">: Uses an RGBA color.
-<p class="hsl">: Uses an HSL color.
-<p class="hsla">: Uses an HSLA color.

Top comments (0)