Friday, July 26, 2024

HTML Color Codes

HTML color codes are used to define colors in web design, specified using hexadecimal, RGB, RGBA, HSL, and HSLA values. Hexadecimal codes are six-digit combinations of numbers and letters, starting with a #, like #FF5733. RGB values use the format rgb(255, 87, 51) to specify red, green, and blue intensities. RGBA adds an alpha channel for opacity, such as rgba(255, 87, 51, 0.5). HSL and HSLA define colors using hue, saturation, lightness, and optional alpha values. These codes help customize the visual appearance of web elements.

Examples:

<p style="color: #FF5733;">This text is in hex color #FF5733.</p>

<p style="color: rgb(255, 87, 51);">This text is in RGB color rgb(255, 87, 51).</p>

<p style="color: rgba(255, 87, 51, 0.5);">This text is in RGBA color rgba(255, 87, 51, 0.5).</p>

<p style="color: hsl(9, 100%, 60%);">This text is in HSL color hsl(9, 100%, 60%).</p>

<p style="color: hsla(9, 100%, 60%, 0.5);">This text is in HSLA color hsla(9, 100%, 60%, 0.5).</p>


HTML Code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Tutorial</title>
</head>
<body>
    <h1>HTML Color Codes</h1>
    <p>HTML supports various color codes, including named colors, hexadecimal, and RGB values.</p>

    <p style="color: #FF5733;">This text is in hex color #FF5733.</p>
    <p style="color: rgb(255, 87, 51);">This text is in RGB color rgb(255, 87, 51).</p>
    <p style="color: rgba(255, 87, 51, 0.5);">This text is in RGBA color rgba(255, 87, 51, 0.5).</p>
    <p style="color: hsl(9, 100%, 60%);">This text is in HSL color hsl(9, 100%, 60%).</p>
    <p style="color: hsla(9, 100%, 60%, 0.5);">This text is in HSLA color hsla(9, 100%, 60%, 0.5).</p>

    <h2>Named Colors</h2>
    <pre>
        &lt;p style="color: red;"&gt;This is red text.&lt;/p&gt;
        &lt;p style="color: green;"&gt;This is green text.&lt;/p&gt;
        &lt;p style="color: blue;"&gt;This is blue text.&lt;/p&gt;
    </pre>

    <h2>Hexadecimal Colors</h2>
    <pre>
        &lt;p style="color: #ff0000;"&gt;This is red text using hexadecimal code.&lt;/p&gt;
        &lt;p style="color: #00ff00;"&gt;This is green text using hexadecimal code.&lt;/p&gt;
        &lt;p style="color: #0000ff;"&gt;This is blue text using hexadecimal code.&lt;/p&gt;
    </pre>

    <h2>RGB Colors</h2>
    <pre>
        &lt;p style="color: rgb(255,0,0);"&gt;This is red text using RGB values.&lt;/p&gt;
        &lt;p style="color: rgb(0,255,0);"&gt;This is green text using RGB values.&lt;/p&gt;
        &lt;p style="color: rgb(0,0,255);"&gt;This is blue text using RGB values.&lt;/p&gt;
    </pre>

    <h2>RGBA Colors</h2>
    <pre>
        &lt;p style="color: rgba(255,0,0,0.5);"&gt;This is semi-transparent red text using RGBA values.&lt;/p&gt;
        &lt;p style="color: rgba(0,255,0,0.5);"&gt;This is semi-transparent green text using RGBA values.&lt;/p&gt;
        &lt;p style="color: rgba(0,0,255,0.5);"&gt;This is semi-transparent blue text using RGBA values.&lt;/p&gt;
    </pre>

    <h2>HSL Colors</h2>
    <pre>
        &lt;p style="color: hsl(0, 100%, 50%);"&gt;This is red text using HSL values.&lt;/p&gt;
        &lt;p style="color: hsl(120, 100%, 50%);"&gt;This is green text using HSL values.&lt;/p&gt;
        &lt;p style="color: hsl(240, 100%, 50%);"&gt;This is blue text using HSL values.&lt;/p&gt;
    </pre>

    <h2>HSLA Colors</h2>
    <pre>
        &lt;p style="color: hsla(0, 100%, 50%, 0.5);"&gt;This is semi-transparent red text using HSLA values.&lt;/p&gt;
        &lt;p style="color: hsla(120, 100%, 50%, 0.5);"&gt;This is semi-transparent green text using HSLA values.&lt;/p&gt;
        &lt;p style="color: hsla(240, 100%, 50%, 0.5);"&gt;This is semi-transparent blue text using HSLA values.&lt;/p&gt;
    </pre>

    <nav>
        <br />
        <a href="https://simplilearnat.blogspot.com/p/html-tutorial.html">Home</a> | <a href="https://simplilearnat.blogspot.com/2024/07/html-quotations.html">Back</a> | <a href="https://simplilearnat.blogspot.com/2024/07/html-comments.html">Next</a>
    </nav>
</body>
</html>

The Output of the above code:


HTML Tutorial

HTML Color Codes

HTML supports various color codes, including named colors, hexadecimal, and RGB values.

This text is in hex color #FF5733.

This text is in RGB color rgb(255, 87, 51).

This text is in RGBA color rgba(255, 87, 51, 0.5).

This text is in HSL color hsl(9, 100%, 60%).

This text is in HSLA color hsla(9, 100%, 60%, 0.5).

Named Colors

        <p style="color: red;">This is red text.</p>
        <p style="color: green;">This is green text.</p>
        <p style="color: blue;">This is blue text.</p>

Hexadecimal Colors

        <p style="color: #ff0000;">This is red text using hexadecimal code.</p>
        <p style="color: #00ff00;">This is green text using hexadecimal code.</p>
        <p style="color: #0000ff;">This is blue text using hexadecimal code.</p>

RGB Colors

        <p style="color: rgb(255,0,0);">This is red text using RGB values.</p>
        <p style="color: rgb(0,255,0);">This is green text using RGB values.</p>
        <p style="color: rgb(0,0,255);">This is blue text using RGB values.</p>

RGBA Colors

        <p style="color: rgba(255,0,0,0.5);">This is semi-transparent red text using RGBA values.</p>
        <p style="color: rgba(0,255,0,0.5);">This is semi-transparent green text using RGBA values.</p>
        <p style="color: rgba(0,0,255,0.5);">This is semi-transparent blue text using RGBA values.</p>

HSL Colors

        <p style="color: hsl(0, 100%, 50%);">This is red text using HSL values.</p>
        <p style="color: hsl(120, 100%, 50%);">This is green text using HSL values.</p>
        <p style="color: hsl(240, 100%, 50%);">This is blue text using HSL values.</p>

HSLA Colors

        <p style="color: hsla(0, 100%, 50%, 0.5);">This is semi-transparent red text using HSLA values.</p>
        <p style="color: hsla(120, 100%, 50%, 0.5);">This is semi-transparent green text using HSLA values.</p>
        <p style="color: hsla(240, 100%, 50%, 0.5);">This is semi-transparent blue text using HSLA values.</p>
at
Labels: