• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Colors

← Previous Next →

🔹 What are HTML Colors?

HTML colors are used to change the appearance of text, backgrounds, borders, and more. You can apply colors using the style attribute with properties like:

  • color (for text)

  • background-color

  • border-color

🔹 Ways to Define Colors in HTML

  1. Color Names
    Example: red, blue, green, black

  2. Hex Codes
    Example: #FF0000 (red), #00FF00 (green)

  3. RGB Values
    Example: rgb(255, 0, 0) (red)

  4. RGBA Values
    Example: rgba(0, 255, 0, 0.5) — includes transparency

  5. HSL Values
    Example: hsl(240, 100%, 50%)

  6. HSLA Values
    Example: hsla(120, 100%, 50%, 0.3)

🔹 Example: Color Names
<p style="color: red;">This is red text.</p>
<p style="background-color: yellow;">Yellow background</p>
🔹 Example: Hex Codes
<p style="color: #00ff00;">This is green text.</p>
🔹 Example: RGB and RGBA
<p style="color: rgb(0, 0, 255);">Blue using RGB</p>
<p style="color: rgba(255, 0, 0, 0.5);">Red with transparency</p>
🔹 Example: HSL and HSLA
<p style="color: hsl(120, 100%, 25%);">Dark green with HSL</p>
<p style="color: hsla(240, 100%, 50%, 0.3);">Blue with transparency</p>
🔹 Applying Colors to Other Elements
<h1 style="background-color: lightgray;">Heading with background</h1>
<div style="border: 2px solid blue; color: white; background-color: black;">
  Colored box with text
</div>

Practice Questions

Q1. Create a paragraph with text color set to blue using a color name.

Q2. Use a hex code to make text green.

Q3. Apply a yellow background to a heading.

Q4. Use rgb() to display red text.

Q5. Display semi-transparent text using rgba().

Q6. Style a box with a background color and white text.

Q7. Use hsl() to color a paragraph dark blue.

Q8. Create a button with a colored border using style.

Q9. Add color to a table header using background-color.

Q10. Make a full section background orange and text black.

HTML Colors Quiz

Q1: Which property is used to change text color in HTML?

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

Q2: Which of the following is a valid hex code for color?

A. #00ff00
B. 00ff00
C. rgb(0,255,0)
D. green

Q3: What does RGBA stand for?

A. Red Green Blue Alpha
B. Random Grey Blue Alpha
C. Render Graphics By Alpha
D. Rich Gradient Background Alpha

Q4: What value in RGBA controls transparency?

A. R
B. G
C. B
D. A

Q5: What does the color #000000 represent?

A. White
B. Red
C. Black
D. Yellow

Q6: What is the maximum value for RGB components?

A. 1
B. 10
C. 100
D. 255

Q7: Which of these is a valid color name in HTML?

A. navy
B. fire
C. apple
D. neon

Q8: Which of the following will make text red?

A. <p style="color: red;">Text</p>
B. <p color="red">Text</p>
C. <font color="red">Text</font>
D. Both a and c

Q9: What does the “L” stand for in HSL?

A. Lightness
B. Luminance
C. Length
D. Level

Q10: Which color model allows transparency control?

A. RGB
B. RGBA
C. HSL
D. HEX
← Previous Next →
Login
Go Back Top