Scribd
Upload
125 views16 pages

Lec 14 (Colors)

The document discusses different ways to specify colors in HTML, including using color names, RGB, HEX, HSL, RGBA, and HSLA values. It provides examples of how to set colors for background, text, borders, and describes the syntax for RGB, HEX, HSL, RGBA, and HSLA values. There are over 500 predefined color names but it is recommended to use HEX values for performance reasons when code is minified.

Uploaded by

Informational Videos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
125 views16 pages

Lec 14 (Colors)

The document discusses different ways to specify colors in HTML, including using color names, RGB, HEX, HSL, RGBA, and HSLA values. It provides examples of how to set colors for background, text, borders, and describes the syntax for RGB, HEX, HSL, RGBA, and HSLA values. There are over 500 predefined color names but it is recommended to use HEX values for performance reasons when code is minified.

Uploaded by

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

HTML Colors

HTML Colors
▸ HTML colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.
▸ In HTML, a color can be specified by using a color name.

2
Background Color
▸ You can set the background color for HTML elements

▸ Syntax:
▹ <body style="background-color:DodgerBlue;">

3
Text Color

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

<p style="color:DodgerBlue;">Welcome To My Class</p>

<p style="color:MediumSeaGreen;">We are learing colors</p>

4
Border Color
▸ You can add the border color for HTML elements

<h1 style="border:2px solid Tomato;"> CR Nazeer</h1>

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

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

5
Color Values
▸ There are 500+ html colors.
▸ In HTML, colors can also be specified using RGB values, HEX values,
HSL values, RGBA values, and HSLA values.
▸ It is recommended to use hex values than html color names because it
occupies less space. Whenever you minify your css file, it uses hex color
value replacing html color names.

6
Color Values

7
Color Values Example

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


<h1 style="background-color:#ff6347;"> Are your there?</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">I am your brother</h1>

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


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">Getout from class</h1>

8
RGB Value
▸ In HTML, a color can be specified as an RGB value, using this formula:
▸ Rgb (red, green, blue)
▸ Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.
▸ For example, rgb(255, 0, 0) is displayed as red, because red is set to its
highest value (255) and the others are set to 0.
▸ To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
▸ To display white, set all color parameters to 255, like this: rgb(255, 255,
255).
9
RGB Value

10
RGB Value
▸ RGBA color values are an extension of RGB color values with an alpha
channel - which specifies the opacity for a color.
▸ An RGBA color value is specified with:
▸ rgba(red, green, blue, alpha)
▸ The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all)

11
Color Values Example

<html>
<head><title> Working with colors</title></head>

<body>

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


<p style="background-color:rgba(255,99,71,0.1);"> RGBA </p>

</body>
</html>

12
HEX Value
▸ In HTML, a color can be specified using a hexadecimal value in the form:
▸ #rrggbb
▸ Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00
and ff (same as decimal 0-255).
▸ For example, #ff0000 is displayed as red, because red is set to its highest
value (ff) and the others are set to the lowest value (00)

13
HSL Value
▸ In HTML, a color can be specified using hue, saturation, and lightness (HSL) in
the form:
▸ hsl(hue, saturation, lightness)
▸ Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.
▸ Saturation is a percentage value, 0% means a shade of gray, and 100% is the
full color.
▸ Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100%
is white
14
HSL Value

15
THANKS!
Any questions?

16

You might also like