Learn Pinegrow, Bootstrap, CSS

CSS Colours, Alpha and Opacity

CSS can be used to apply colour (deliberate British spelling ;)  to HTML elements in your site in the following ways:

• Colour keywords
  • HTML understands only 16 colour keywords:
    • black
    • gray
    • silver
    • white
    
    
    • maroon
    • red
    • purple
    • fuchsia
    
    
    • green
    • lime
    • olive
    • yellow
    
    
    • navy
    • blue
    • teal
    • aqua
  • However CSS3 understands 147 different colour names (or 140 according to some). We're not listing them all here - but there are plenty of resources for learning about them elsewhere, eg.:
    • colors.commutercreative.com/grid (147)
    • w3schools.com/colors/colors_names.asp (140)
  • All three components having the value FF (the maximum) will result in the clour white.
     
• Hexadecimal codes (begin with #), eg. #000000 (black), #ff0000 (red), #0000ff (blue)
  • A hex-code consists of six digits, which can be a number from from 0 to 9 or letter from A to F (not case-sensitive); 0 is the minumum value and F is the maximum.
  • A colour is made of red, green and blue components. In a hex-code, each pair of digits represent one of these three component colours. The first two digits indicate the red, the second are for the green and the third for the blue component.
  • All three components having the value FF (the maximum) will result in the clour white.
     
• RGB values use the syntax: rgba(red, green, blue)
  • The red, green and blue values are integers (whole numbers) from 0 to 255
     
• RGBA values use the syntax: rgba(red, green, blue, alpha)
  • The red, green and blue values are used in the same way as in RGB values
  • The alpha (opacity) value is a number from 0 to 1, e.g. 0.1 is almost fully transparent and 0.9 is almost fully opaque.
     
• HSL values use the syntax: hsl(hue, saturation, lightness)
  • hue refers to a place on the colour wheel in degrees of rotation; 0 and 360 and red; 120 is green; 240 is blue.
  • saturation is the percentage fullness of colour.
  • lightness is a percentage too; 0 is black and 100% is white.
     
• HSLA values use the syntax: hsla([red], [green], [blue], [alpha])
  • The red, green and blue values are used in the same way as in RGB values
  • The alpha (opacity) value is a number from 0 to 1, e.g. 0.1 is almost fully transparent and 0.9 is almost fully opaque.
     
• Opacity allows you to set transparency for an element without involving colour values.
  • Use a number from 0 to 1, as with the alpha value for RGBA colours.

See the Pen CSS Colors, Alpha, Opacity in a Nutshell by Adam Frost (@adam-frost) on CodePen.

Click the HTML and CSS buttons above to see the code that created the Result.

Click the cube icon in top-right of the panel to edit the code at codepen.io where you can immediately see the effects of any changes you make.

If you've got the hang of using colours in CSS, on to the next topic: CSS Transitions