• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Colors

← Previous Next →

🔹 What are CSS Colors?

CSS allows you to set the color of text, background, borders, and other elements using multiple formats:

  • Named Colors (e.g., red)

  • HEX Colors (e.g., #ff0000)

  • RGB (e.g., rgb(255, 0, 0))

  • RGBA (includes transparency)

  • HSL / HSLA

🔸 1. Named Colors

CSS supports over 140 predefined color names.

h1 {
  color: red;
}

🟢 Examples: blue, green, gold, tomato, navy

🔸 2. HEX Colors

A 6-digit hexadecimal value representing Red, Green, and Blue.

p {
  color: #00ff00; /* bright green */
}

Short form: #0f0 is same as #00ff00

🔸 3. RGB Colors

RGB stands for Red, Green, Blue.

div {
  background-color: rgb(255, 0, 0); /* red */
}

Values range from 0 to 255.

🔸 4. RGBA Colors

Same as RGB but with alpha (transparency).

div {
  background-color: rgba(0, 0, 255, 0.5); /* semi-transparent blue */
}

Alpha ranges from 0 (transparent) to 1 (opaque)

🔸 5. HSL and HSLA

  • HSL = Hue, Saturation, Lightness

  • HSLA = Same with Alpha (transparency)

p {
  color: hsl(120, 100%, 50%); /* green */
}

div {
  background-color: hsla(0, 100%, 50%, 0.3); /* transparent red */
}

🔸 Changing Text and Background Color

h2 {
  color: white;
  background-color: black;
}

🔸 CSS Color Functions (Modern CSS)

color: color-mix(in srgb, red 30%, blue);

⚠️ Supported only in modern browsers.

Practice Questions

Q1. Make the text color red using a named color.

Q2. Use #00ffff for background color.

Q3. Apply rgb(100, 150, 200) as heading text color.

Q4. Set a semi-transparent black overlay using rgba.

Q5. Color a div’s text in hsl(240, 100%, 50%).

Q6. Change background to transparent red using HSLA.

Q7. Apply a HEX color shorthand #0f0 to a paragraph.

Q8. Use color: white with background-color: navy.

Q9. Set heading text to 80% transparent using rgba.

Q10. Apply light gray background using a named color.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top