Scribd
Upload
82 views11 pages

Topic 6 HTML Colors PDF

HTML supports specifying colors in several ways: by predefined color names, RGB values, HEX values, HSL values, RGBA values, and HSLA values. Colors can be used to style the background, text, and borders of HTML elements using inline styles. Over 140 standard color names are supported in HTML. RGBA and HSLA values allow specifying colors with an additional alpha channel for transparency.

Uploaded by

Karyl Tayo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
82 views11 pages

Topic 6 HTML Colors PDF

HTML supports specifying colors in several ways: by predefined color names, RGB values, HEX values, HSL values, RGBA values, and HSLA values. Colors can be used to style the background, text, and borders of HTML elements using inline styles. Over 140 standard color names are supported in HTML. RGBA and HSLA values allow specifying colors with an additional alpha channel for transparency.

Uploaded by

Karyl Tayo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML Colors

HTML Colors
HTML colors are specified with predefined color names, or
with RGB, HEX, HSL, RGBA, or HSLA values.

HEX – Hexadecimal ex. #fee6f0, #8a66ff


HSL – Hue, Saturation and Lightness
RGBA - Red Green Blue Alpha
HSLA – Hue, Saturation and Lightness Alpha
Color Names
In HTML, a color can be specified by using a color name:

HTML supports 140 standard color names


Background Color

• You can set the background color for HTML elements:

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


• <p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
• You can set the color of text:

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


• <p style="color:DodgerBlue;">Lorem ipsum...</p>
• <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
• You can set the color of borders:

• <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>
Color Values
• In HTML, colors can also be specified using RGB values, HEX values,
HSL values, RGBA values, and HSLA values.
• The following three <div> elements have their background color set
with RGB, HEX, and HSL values:
• The following two <div> elements have their background color set
with RGBA and HSLA values, which add an Alpha channel to the color
(here we have 50% transparency):
Code for using color values

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


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

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


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
End of topic
Quiz 2.1
Get ¼ sheet of paper and answer the question

Give the names of the following colors supported by HTML. (10pts)

You might also like