How to specify the css color property

red - green - blue - yellow - canvasColors in CSS can be specified with a few simple methods, but what is the best method for your project? Well, that can be a particular choice for every project, depending on how you choose to pick your colours.

Colors in CSS are most often specified by:

  • A valid color name – like "blue" (Predefined/Cross-browser color names)
  • An RGB value – like "rgb(255, 0, 0)" (Red Green Blue)
  • A HEX value – like "#ff0000" (Hexadecimal Colors)

But there are also other methods you can use:

  • RGBA colors – like “rgba(255, 0, 0, 0.3)” (RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity of the object)
  • HSL colors – like hsl(120, 100%, 50%) (HSL stands for hue, saturation, and lightness)
  • HSLA colors – like hsla(120, 100%, 50%, 0.3) (HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity of the object)

The most popular methods, as I’ve seen over the years are the HEX and the RGBA methods.

You can use a various free online tools to pick the right HEX or RGB variables for your colours, http://htmlcolorcodes.com is one of the most popular.

Also, you can be in style with the latest colours from PANTONE® the world-renowned authority on color and provider of color systems and leading technology for the selection and accurate communication of color across a variety of industries.

You can see a live DEMO and change settings to see how it works.