CSS COLORS
INTRODUCTION
•Colors are specified using
predefined color names, or RGB,
HEX, HSL, RGBA, HSLA values.
•
Example
<html><body>
<h1>Specify colors using RGB values</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130,
238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body></html>
Exampl
e
<html><body><h1>Make transparent colors with RGBA</h1>
<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71,
0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99,
71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99,
71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99,
71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99,
71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71,
1)</h2></body></html>
HSL
Example
<html><style>
div {
background-color: hsl(170, 50%, 50%);
color: hsl(0, 50%, 50%);
padding: 20px;
}
</style><body><div>
<p>Example of
Lightness</p></div></body></html>
Output
Exampl
e<html><body>
<h1 style="background-color:hsla(120, 100%, 50%,
0.2);">hsla(120, 100%, 50%, 0.2)</h1>
<h1 style="background-color:hsla(120, 100%, 50%,
0.4);">hsla(120, 100%, 50%, 0.4)</h1>
<h1 style="background-color:hsla(120, 100%, 50%,
0.6);">hsla(120, 100%, 50%, 0.6)</h1>
<h1 style="background-color:hsla(120, 100%, 50%,
0.8);">hsla(120, 100%, 50%, 0.8)</h1>
</body></html>
CSS Color Names
• In CSS, a color can be specified by using a predefined color name:
Example 1
<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>
CSS Background Color
• You can set the background color for HTML elements:
Example 2
<html><body>
<h1 style="background-color:DodgerBlue;">Hello</h1>
<p style="background-color:Tomato;">
CPC Nagpur
</p>
</body></html>
CSS Text Color
• You can set the color of text:
Example 3
<html>
<body>
<h3 style="color:Tomato;">Hello </h3>
<p style="color:DodgerBlue;">Hello</p>
<p style="color:MediumSeaGreen;">Hello</p>
</body>
</html>
CSS Border Color
• You can set the color of borders:
Example 4
<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>
CSS Color Values
• In
CSS, colors can also be specified using RGB values, HEX values,
HSL values, RGBA values, and HSLA values:
• Same as color name "Tomato":
Example 5
<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>
Example 5
<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>
CSS HEX Colors
•Ahexadecimal color is specified with: #RRGGBB, where the RR
(red), GG (green) and BB (blue) hexadecimal integers specify the
components of the color.
HEX Value
• InCSS, a color can be specified using a hexadecimal value in the
form:
• #rrggbb
• Whererr (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).
• To display black, set all values to 00, like this: #000000.
• To display white, set all values to ff, like this: #ffffff.
Example
<html><body>
<h1>Specify colors using HEX values</h1>
<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>
</body></html>
• Shades of gray are often defined using equal values for all the 3
light sources:
<html><body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades
of gray:</p>
<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>
</body></html>
CSS RGB Colors
• AnRGB color value represents RED, GREEN, and BLUE light
sources.
• RGB Value
• InCSS, 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).
<html><body>
<h1>Specify colors using RGB values</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130,
238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body></html>
<html><body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of
gray:</p>
<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240,
240)</h2></body></html>
