CSS Colors

Color Names

You can use 140 standard colors name to define a color. For example red, black, blue, aqua, azure, etc. Use lowercase for color name as per standard. Otherwise color name is not case sensitive, Red, RED, red all are same.

RGB And RGBA Colors

RGB colors represent Red, Blue, and Green colors whereas RGBA colors represent RGB with Alpha (Opacity).

Use rgb(red, green, blue) or rgba(red, green, blue, alpha) syntax to define RGB and RGBA colors respectively.

Here red, green, and blue represent the intensity of the color ranging from 0 to 255.

Alpha ranges from 0.0 (fully transparent) to 1.0 (Not transparent at all).

Try Mixing These RGBA Values

Hex Colors

Hexadecimal colors are represented by #rrggbb, where rr(Red), gg(Green), and bb(Blue).

The value for rr, gg, and bb ranges from 00 to ff just like hexadecimal numbers.

You can also define alpha (opacity) just like RGBA colors for hex colors. Use #rrggbbaa to define hex colors with alpha where aa represents alpha with range from 00 to ff.

Try Mixing These HEX Values

HSL And HSLA Colors

HSL colors represent Hue, Saturation, and Lightness whereas HSLA represent Hue, Saturation, Lightness, and Alpha (opacity)

Use hsl(hue, saturation, lightness) or hsla(hue, saturation, lightness, alpha) syntax to define HSL and HSLA colors respectively.

Hue is the degree of the color wheel ranges from 0 to 360. Where 0 is red, 120 is green, and 240 is blue.

Saturation is the percentage value (normally shade of gray) where 0% means shades of gray and 100% means full color.

Lightness is the percentage value of light given to color where 0% means black and 100% means white.

Alpha ranges from 0.0 (fully transparent) to 1.0 (Not transparent at all).

Try Mixing These HSLA Values