Codecademy - CSS 6: Colours

What i've learnt from the colours lesson of Codecademy's CSS course.

• Colors in CSS can be described in three different ways:

  • Named colors — English words that describe colors, also called keyword colors
  • RGB — numeric values that describe a mix of red, green, and blue
  • HSL — numeric values that describe a mix of hue, saturation, and lightness

• When you style an elements colour you can either style the foreground colour or the background colour. You would use these properties for this:

  • color - this property styles an element’s foreground color.
  • background-color - this property styles an element’s background color.

• There are many different colours to choose from...here are just some!

Hex

• Hexadecimal colours can be used. These are 3 or 6 digit numbers that begin with a hash character. The numbers and letters represent values for red, blue and green.

.green {
  background-color: #8FBC8F;
}

RGB

• As an alternative to hex colour codes, RGB codes can be used. There isn't a right or wrong choice, its a matter of personal preference. However its best to stick to one format throughout your CSS.
• The first number represents the amount of red, the second is green, and the third is blue.

h1 {
  color: rgb(23, 45, 23);
}

HSL

• Another colour scheme is HSL or hue-saturation-lightness.
• HSL is laid out similarly to RGB except the numbers mean different things.
• The first number represents the degree of the hue, and can be between 0 and 360. The second and third numbers are percentages representing saturation (intensity of the colour) and lightness respectively (50% is about normal lightness). Here is an example:

.box {
color: hsl(120, 60%, 70%);
}

• The first number is the hue and it refers to an angle on the colour wheel below.
• HSL is useful because you can change things like the lightness by changing one number, rather than affecting each number in the code.

Opacity and Alpha

• You can change the opacity of elements so they show the elements beneath them.
• You can adapt your RGB and HSL properties to include an opacity value that is called an alpha.
• To change the HSL you add an a onto the property and a fourth value.

color: hsla(34, 100%, 50%, 0.1);

• To change the RGB you also add an a onto the property and a fourth value.

color: rgba(234, 45, 98, 0.33);

• The alpha values can be between 0 and 1. Zero is completely transparent and one is opaque. Half transparent is 0.5.

• You can think of the alpha value as, “the amount of the background to mix with the foreground”. When a color’s alpha is below one, any color behind it will be blended in. The blending happens for each pixel; no blurring occurs.

• Alpha can only be used with HSL and RGB, not hex or named colours.

• There is a value for completely transparent which is equivalent to rgba(0, 0, 0, 0) which is:
  

color: transparent;