• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Colors Quiz

Q1: What does HEX #000000 represent?

A. White
B. Black
C. Transparent
D. Blue

Q2: Which property sets the text color?

A. color
B. font-color
C. text-style
D. background

Q3: What is the alpha value range in rgba()?

A. 0–100
B. 0–1
C. 1–255
D. None

Q4: Which CSS function defines color with hue, saturation, lightness?

A. rgb()
B. rgba()
C. hsl()
D. color-mix()

Q5: What does rgba(255, 0, 0, 0.5) mean?

A. Semi-transparent red
B. Fully transparent red
C. Blue with opacity
D. Black with opacity

Q6: Which of these is NOT a valid color format in CSS?

A. #fff
B. rgb255,255,255
C. rgba(0, 0, 0, 1)
D. hsl(0, 100%, 50%)

Q7: What does the background-color property do?

A. Sets the background color
B. Sets text color
C. Adds border
D. Adds image

Q8: How to make a color fully transparent in rgba()?

A. rgba(0, 0, 0, 1)
B. rgba(0, 0, 0, 0)
C. rgba(0, 0, 0, 100)
D. transparent(black)

Q9: Which named color is a shade of green?

A. Tomato
B. Lime
C. Navy
D. Maroon

Q10: What is the purpose of color-mix() in CSS?

A. Mix images
B. Mix two color values
C. Gradient background
D. Change text-shadow
← Previous Next →
Login
Go Back Top