Scribd Logo
Upload

Welcome to Scribd!

  • Colors

    Uploaded by

    Kristopher Ong
    8 views20 pages
    The document discusses different ways to specify colors in HTML, including using predefined color names, RGB values, HEX values, HSL values, RGBA values, and HSLA values. Color names can be used to set background, text, and border colors. RGB, HEX, HSL, RGBA, and HSLA values allow specifying the same colors numerically. In addition to predefined names, colors can be specified using these number-based values or with transparency using RGBA and HSLA.

    Original Description:

    PowerPoint used to lecture about HTML Colors

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses different ways to specify colors in HTML, including using predefined color names, RGB values, HEX values, HSL values, RGBA values, and HSLA values. Color names can be used to set background, text, and border colors. RGB, HEX, HSL, RGBA, and HSLA values allow specifying the same colors numerically. In addition to predefined names, colors can be specified using these number-based values or with transparency using RGBA and HSLA.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    8 views20 pages

    Colors

    Uploaded by

    Kristopher Ong
    The document discusses different ways to specify colors in HTML, including using predefined color names, RGB values, HEX values, HSL values, RGBA values, and HSLA values. Color names can be used to set background, text, and border colors. RGB, HEX, HSL, RGBA, and HSLA values allow specifying the same colors numerically. In addition to predefined names, colors can be specified using these number-based values or with transparency using RGBA and HSLA.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 20

    HTML Colors

    HTML colors are specified


    using predefined color
    names, or RGB, HEX,
    HSL, RGBA, HSLA values.
    Color Names
    • In HTML, a color can be specified by using a
    color name:
    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="background-color:Tomato;">Tomato</h1>
    <h1 style="background-color:Orange;">Orange</h1>
    <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
    <h1 style="background-
    color:MediumSeaGreen;">MediumSeaGreen</h1>
    <h1 style="background-color:Gray;">Gray</h1>
    <h1 style="background-color:SlateBlue;">SlateBlue</h1>
    <h1 style="background-color:Violet;">Violet</h1>
    <h1 style="background-color:LightGray;">LightGray</h1>

    </body>
    </html>
    Background Color

    • You can set the background color for HTML


    elements:
    Example:

    <h1 style="background-
    color:DodgerBlue;">Hello
    World</h1>
    <p style="background-
    color:Tomato;">Lorem ipsum...</p>
    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="background-color:DodgerBlue;">Hello World</h1>

    <p style="background-color:Tomato;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
    erat volutpat.
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>

    </body>
    </html>
    Text Color
    • You can set the color of text:
    Hello World
    Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit, sed diam nonummy nibh
    euismod tincidunt ut laoreet dolore magna
    aliquam erat volutpat.
    Ut wisi enim ad minim veniam, quis nostrud
    exerci tation ullamcorper suscipit lobortis nisl
    ut aliquip ex ea commodo consequat.
    <!DOCTYPE html>
    <html>
    <body>

    <h3 style="color:Tomato;">Hello World</h3>

    <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet,


    consectetuer adipiscing elit, sed diam nonummy nibh euismod
    tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

    <p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam,


    quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
    aliquip ex ea commodo consequat.</p>

    </body>
    </html>
    Border Color

    • You can set the color of borders:


    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="border: 2px solid Tomato;">Hello World</h1>

    <h1 style="border: 2px solid DodgerBlue;">Hello


    World</h1>

    <h1 style="border: 2px solid Violet;">Hello World</h1>

    </body>
    </html>
    Color Values
    • In HTML, colors can also be specified using
    RGB values, HEX values, HSL values, RGBA
    values, and HSLA values:
    • Same as color name "Tomato":
    <!DOCTYPE html>
    <html>
    <body>

    <p>Same as color name "Tomato":</p>

    <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>


    <h1 style="background-color:#ff6347;">#ff6347</h1>
    <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

    <p>Same as color name "Tomato", but 50% transparent:</p>


    <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
    <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

    <p>In addition to the predefined color names, colors can be specified using RGB, HEX,
    HSL, or even transparent colors using RGBA or HSLA color values.</p>

    </body>
    </html>
    Study the following codes below for:
    • RGB Value
    • HEX Value
    • HSL Value
    • RGBA Value
    • HSLA Value

    Link below:
    https://www.w3schools.com/html/html_colors.asp

    You might also like