Except for typography & layout, colour has a more significant influence on designing and building websites. This short tutorial will provide you with good information about CSS colours.
Notation for Colour Value
There are various sorts of notation in CSS colours. The critical thing to remember is that – ‘You must select which style is ideal for you after considering Cross-Browser Compatibility & Other Constraints.’
With the emergence of displays capable of showing millions of colours, our choices for tints & contrasts have shifted over time.
The syntax we use to define a precise shade in our code might appear as one of several colour values that assist the browser in understanding precisely what we want it to produce (and where).
Notation for Hexadecimal Values
The hexadecimal value is the most prevalent approach for describing the CSS colours. It’s been around from the beginning and all the major web browsers do support it.
For instance: The hexadecimal colour value for green is #00ff00.
In RGB notation, a hexadecimal colour value begins with the hash (#) character. There are 3 or 6 hexadecimal digits written after this character.
Because it covers a more extensive variety of colours, hexadecimal value notation is still widely used. The whole credit goes to its precision.
Notation for RGB Values
CSS incorporates the use of hex codes, many designers are unaware that the other RGB colour notation scheme has been around for just as long.
We may display our selections in an easier-to-read style by utilizing 0 to 255 numbers for each of the red, green, and blue values that make up our RGB colours (or by using percentages instead).
Notation for HSL Values
There’s also HSL, the newest kid on the street. HSL was created to work with the current RGB system, integrating Hue, Saturation, and Brightness into a single statement.
Because you declare lighter or darker hues by raising or reducing other values, HSL makes predicting colours simpler (against the base hue).
Please Note:
Degrees of the colour circle (from 0 to 360) expressed shades, percentages expresses brightness & saturation.
X11 and Colour Keywords
CSS notation may appear daunting to newcomers at this point, especially if hexadecimal numbers and colour computations aren’t your things. Don’t be concerned. Colour keywords are a set of precisely expressed alternatives which you may find difficult to remember initially, but with time, you will get used to it.
One of the easiest ways to describe CSS colours is to use the colour term. Instead of utilizing some strange notation almost alien to the ordinary end-user, supply a set of values representing the colour by a familiar phrase.
System Colours
Finally, we are going to mention one more set of colour terms. Designers can use system colours to match particular colour selections to the system’s default scheme. Consider – ‘How can you change system text colour, the backdrop, title bars, and other things in Windows?’
Answer: The keywords ask the browser to mimic these.
On the other hand, system colour keywords are outdated and potentially detrimental to your website’s accessibility. Why? Because they let the user’s OS decide about colours and native look.
Transparency and colour opacity
We’ve covered the fundamentals of colour value notations so far, and you would believe that telling the browser what colour you want is all there is to it.
However, the introduction of CSS3 adds a new level of colour control, allowing us to overlay semi-transparent or opaque effects onto objects. The results of opacity and transparency on web pages may be subtle and rather lovely.
There are various ways to accomplish this, just as with standard colour notation.
Safe Colours
You’d think that compatibility would be given with something as vital as colour. However, the situation is far from ideal in actuality.
Web browsers do not support X11 colour scheme universally.
HSL, HSLa, and RGB are new features to CSS3, so they can’t depend on previous browsers. Why? Because their system colours have become outdated, and opacity & alpha-transparency support are a nightmare!
Real Safe Colours
It is really fascinating to mention that – ‘Real Safe Colours were used when people did use 8 bit monitors.’
Web Safe Colours
It is the one that most designers are familiar with (and some still use). Only 216 colours (256 total) were accessible, primarily for older monitors.
The question arises: ‘Are CSS Colours a Ranking Factor for Google?’
“We normally don’t consider colour as a factor,” Google’s John Mueller stated on Twitter.
“But CSS adjustments may encompass a lot more than simply colour changes,” he continued.
Here’s an example of the reaction in context:
We understand that site modifications can influence your ranks, however as John has stated multiple times, colour changes should not impact your rankings.
Of course, using CSS to shift information around, conceal content, or do anything else can affect your rankings.
It applies to the primary navigation and architecture and the body content. On certain significant days, I even modify the general style of this site. These kinds of modifications should not affect the site’s overall rankings.
Final Comments!
CSS Colours do cause a pleasing effect on the eyes of the visitors, but they are not necessary to focus on if you are trying to elevate your ranking.
The web designers must have a good knowledge about the colours. If they do not have it, they must work hard to become familiar with what suits a website. But again I would like to emphasize that colour has nothing to do with the rankings.
Please Note: For obtaining the maximum benefit from web design Toronto, please consider Kinex Media.
