How do I specify colors in css?

hoodedvul

CSS colors can be specified using rgb and rgba 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.0

Here 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