With CSS, colors can be specified in different ways:
By color names
As RGB values
As hexadecimal values
As HSL values (CSS3)
As HWB values (CSS4)
With the currentcolor keyword
Color Name
In this, you can write the name of the color which you want.
Example,
Red,
Blue,
Pink,
Orange etc.,
There are some different colors other than normal colors which you can also use.
Example:
AliceBlue
AntiqueWhite
Aqua
Aquamarine
Azure
Beige
Bisque
Black
BlanchedAlmond
Blue
BlueViolet
Brown etc.,
Syntax:
background-color: red;color: blue;Example:
<!DOCTYPE html>
<html>
<style>
div {
padding:5px;
}
</style>
<body>
<h1>Colors using their Names</h1>
<div style="background-color:orange">
<h1 style="color:white">Heading H1</h1>
</div>
<div style="background-color:blue">
<h2 style="color:White">Heading H2</h2>
</div>
</body>
</html>Output:
RGB (Red, Green and Blue) Colors
RGB color values are supported in all browsers. Each parameter defines the intensity of the color as an integer between 0-255.
Syntax:
rgb(Red, Green, Blue)RGB Values:
Red (255,0,0)
Olive (128,128,0)
Dark Green (0,100,0)
Blue (0,0,255)
Purple (128,0,128)
Slate Gray (112,128,144)
Black (0,0,0)
White (255,255,255)
Example:
<!DOCTYPE html>
<html>
<style>
div {
padding:5px;
}
</style>
<body>
<h1>Colors set using RGB Values</h1>
<div style="background-color:rgb(255,165,0)">
<h2 style="color:rgb(255,255,255)">RGB Value for Orange </h2>
</div>
<div style="background-color:rgb(0,0,255)">
<h2 style="color:rgb(255,255,255)">RGB Value for Blue</h2>
</div>
</body>
</html>Output:
Hexadecimal Colors
RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.
Syntax:
Hexadecimal Value:
Example:
<!DOCTYPE html>
<html>
<style>
div {
padding:5px;
}
</style>
<body>
<h1>Colors set using Hexadecimal Values</h1>
<div style="background-color:#800080">
<h2 style="color:#FFC0CB">Hexadecimal value for Purple </h2>
</div>
<div style="background-color:#4B0082">
<h2 style="color:#FFFFFF"> Hexadecimal Value for indigo</h2>
</div>
</body>
</html>Output:
HSL Value (Hue, Saturation and Lightness)
HSL represents a cylindrical-coordinates of colors. Hue is a degree on the color (0-360 degree) is red, 120 is green and 240 is blue. Saturation is percentage value from 0% - 100% where 0% is gray and 100% is full color. Lightness is also percentage from 0% - 100% where 0% is black and 100% is white
Syntax:
hsl (hue, saturation and lightness)HSL Value:
Yellow hsl(60, 100%, 50%)
green LED hsl(99,98%, 51%)
light blue hsl(195, 64%, 82%)
Navy Blue hsl(240, 60%, 35%)
Purple hsl(277, 87%, 53%)
maroon hsl(322, 66%, 33%)
White hsl(0, 0%, 100%)
Black hsl(0, 0%, 0%)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(0, 100%, 40%);}
#p4 {background-color:hsl(32, 100%, 50%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(210, 100%, 50%);}
</style>
</head>
<body>
<h2>HSL (Hue, saturation, Lightness)colors</h2>
<h4>Hue is from 0 to 360 (red = 0°; green = 120°; blue = 240°)</h4>
<h4>Saturation is from 0% to 100% Where 100% full saturation and 0% is a shade of gray).</h4>
<h4>Lightness is from 0% to 100% (100% is white, 0% is black, 50% is 'normal')</h4>
<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Red</p>
<p id="p4">Dark Orange</p>
<p id="p5">Violet</p>
<p id="p6">Slate Blue</p>
</body>
</html>Output:
HWB Value(Hue, Whiteness, Blackness)
The hwb() functional notation expresses a given color according to its hue, whitness, and blackness. An optional alpha component represents the color's transparency.
Hue is a degree on the color (0-360 degree) is red, 120 is green and 240 is blue. Whiteness specifies the amount of white to mix in and is in percentage from 0% to 100% where 0% is no whiteness and 100% is full whiteness
Syntax:
hwb[a](H W B [/ A])Example:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<style>
div {padding:16px;}
</style>
<body>
<h3>HWB(Hue, Whiteness, Blackness) Colors</h3>
<div data-w3-color="hwb(0, 0, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 0, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(120, 0, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(180, 0, 0)">
<p>London is the capital city of England.</p>
</div>
<div data-w3-color="hwb(60, 80%, 0)">
<p>London is the capital city of England.</p>
</div>
<script src="/lib/w3color.js"></script>
<script>w3SetColorsByAttribute();</script>
</body>
</html>Source: W3School
Output:
Currentcolor Keyboard
It refers to the value of the color property of an element. It allows you to use the current value of the color property, without writing the actual color value. You can write the value once but can use it multiple times in multiple places.
Syntax:
#div
{
color: color-name;
border: 5px solid currentcolor;
}Example:
<!DOCTYPE html>
<html>
<head>
<style>
#div {
color: red;
border: 5px solid currentcolor;
}
</style>
</head>
<body>
<h2>The Example of currentcolor Keyword</h2>
<p>The currentcolor keyword refers to the value of the color property of an element.</p>
<div id="div">
This div element has a red text color and a red border.
</div>
</body>
</html>Output:
The Tech Platform
コメント