Colors 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.
|
1 2 3 4 5 |
/* simplecodetips.com css color */ .myrgbaclass { background-color: rgba(43, 51, 161, 0.6); } /* RGBA method: blue with 0.6 opacity */ .myhexclass { background-color: #ede02b; } /* HEX method: yellow */ /* */ |
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.