CSS

Last Updated: 10/18/2022

Colors

  • Colors are specified using the following ways
    • Predefined color names,
    • RGB,
    • RGBA
    • Hexadecimal,
    • HSL,
    • HSLA

Predefined Color Names

  • In CSS, a color can be specified by using a predefined color name
  • Eg Red, Orange, LightGray etc

References

Background Color

You can set the background color for HTML elements

div {
	background-color: orange;
}

Text Color

You can set the color of text

h1 {
	color: dodgerblue;
}

RGB

rgb(red, green, blue)

  • RGB represents RED, GREEN, and BLUE
  • Use rgb function to represent color.
  • Each parameter in the function defines the intensity of the color between 0 and 255.
h1 {
	color: rgb(255, 0, 0);
}

Red - rgb(255, 0, 0)
Green - rgb(0, 255, 0)
Blue - rgb(0, 0, 255)
Black - rgb(0, 0, 0)
White - rgb(255, 255, 255)

RGBA

rgba(red, green, blue, alpha)

  • RGB color values with an alpha channel,
  • Alpha channel specifies the opacity for a color.
  • Alpha is a decimal value which ranges from 0 to 1
  • 0 - Transparent, 0.5 - Semi transparent, 1 - Opaque

Hexadecimal

#RRGGBB

  • A hexadecimal color is specified with #RRGGBB
  • rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
h1 {
color: #ff0000;
}

3 Digit HEX Value

  • The 3-digit hex code is a shorthand for some 6-digit hex codes
  • The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each component.

6 digit hex value color: #aabbcc

3 digit hex value color: #abc

HSL

  • HSL stands for hue, saturation, and lightness.
  • Hue is a degree on the color wheel from 0 to 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 a percentage. 0% is black, 50% is neither light or dark, 100% is white
color: hsl(240, 100%, 50%)
color: hsl(240deg 100% 50%)

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

HSLA Value

  • HSLA color values are an extension of HSL color values with an alpha channel
  • The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (opaque)

hsla(9, 100%, 64%, 0.6)

Previous
Next