How do I specify colors in css?
-
CSS colors can be specified using
rgb
andrgba
values.The syntax for rgb is
rgb(red, green, blue)
Each color has a value from 0 through 255.For example specific a green color, with a mixture of red and blue
<p style="background-color:rgb(54, 216, 22);">This is a color</p>
The result is:
The rgb values can also have opacity included
rgba
using this syntax:
rgba(red, green, blue, alpha)
The alpha channel specifies the opacity level, with a range of 0.0 through 1.0Here is an example of the same color used above including the alpha channel.
<p style="background-color:rgba(54, 216, 22, 0.5);">This is a color</p>
The result is:
Other ways of specifying colors are:
- HSL, which stands for Hue, Saturation, and Lightneess. HSL also has the alpha channel for opacity, HSLA.
- HEX, Hexadecimal values. (most used)
HSL syntax is
hsl(hue, saturation, lightness)
- hue is in degrees of the color wheel from 0 through 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
For example:
<p style="background-color:hsl(0, 50%, 80%);">This is a color</p>
The result is:
HEX color are specified using hexadecimal values, the syntax is
#rrggbb
rr for red values, gg for green values and bb for blue values.For example:
<p style="background-color: #ec5383;">This is is a color</p>
The result is:
There is great amount of flexibility when using colors in CSS.
The w3schools website provides a way to try out different values: https://www.w3schools.com/css/css_colors.asp
© Lightnetics 2024