• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top