Color Function
Description
Color names and simple hex values aren't the only way you can specify colors.
There are a number of functions that allow you to select a color.
- rgb(r, g, b) specifies a color using the RGB model.
Example: rgb(112, 128, 144) - rgba(r, g, b, a) specifies a color using the RGB model,
with the addition of an alpha value to specify opacity.
A value of 0 is fully transparent; a value of 1 is fully opaque.
Example: rgba(112, 128, 144, 0.4) - hsl(h, s, l) specifies a color using the hue, saturation, and lightness (HSL) model.
Example: hsl(120, 100%, 22%) - hsla(h, s, l, a) uses an alpha value to specify opacity.
Example: hsla(120, 100%, 22%, 0.4)
rgb(rrr.rr%,ggg.gg%,bbb.bb%) uses RGB
values in the range 0% to 100%,
with decimal values allowed (e.g., 75.5%).
The value for black would thus be rgb(0%,0%,0%),
whereas blue would be rgb(0%,0%,100%).
In rgb(rrr,ggg,bbb) the accepted range of values
is 0-255.
The range is the decimal equivalent of 00-FF
in hexadecimal.
In this format, green would be rgb(0,255,0),
and white would be represented as rgb(255,255,255).
The following table lists the color name, hex color values and rgb color values.
| COLOR | HEXCOLOR | RGB COLOR |
|---|---|---|
| Black | #000000 | rgb(0,0,0) |
| Red | #FF0000 | rgb(255,0,0) |
| Green | #00FF00 | rgb(0,255,0) |
| Blue | #0000FF | rgb(0,0,255) |
| Yellow | #FFFF00 | rgb(255,255,0) |
| Cyan | #00FFFF | rgb(0,255,255) |
| Magenta | #FF00FF | rgb(255,0,255) |
| Gray | #C0C0C0 | rgb(192,192,192) |
| White | #FFFFFF | rgb(255,255,255) |
Example
<!DOCTYPE HTML>
<html>
<body>
<p style="background-color:#C0C0C0">
Color set by using hex value <!--from w w w.j a v a2s .co m-->
</p>
<p style="background-color:rgb(192,192,192)">
Color set by using rgb value
</p>
<p style="background-color:gray">
Color set by using color name
</p>
</body>
</html>
In the code above we use color value in various forms to set the background color of a paragraph.