How to choose CSS Colors for your Website 2nd CSS tutorial


Choosing CSS Colors

Welcome to 2nd CSS (Cascading Style Sheets) tutorial as in earlier tutorial, we got an introduction to CSS. In this tutorial we will learn how to use CSS Colors for your website. As we know all formatting and sizing for website parts and components can be programmed in CSS. Also we can use CSS colors to make website more colorful. To make a web interface more eye catching and keep difference between web controls and menus. Its great solution to give different colors to different objects will create a look where all components and menus will appear separately. So user can easily reach to specific part of website with better interaction.


Be very selective while choosing CSS Colors

As every user has its own choice we can’t fill every color to provide users colors of their choice. So be very selective and careful while choosing colors to your website. I created many website projects and I got suggestions form users about website colors. So the conclusion was to choose very simple and few colors for your whole website structure. I mean three or four colors are enough for a template. And also be careful while combining different colors try to use light colors. Don’t use sharp and shiny colors. For example if your are using CSS colors to separate two menus. If both menus has darker shade and opposite colors that will affect the user experience. Bad interface will make the use to leave your website. Make sure to use colors which provide comfort while reading for their eyes and brain also. Better CSS color selection can really make a comfortable user interface for your website.



Using CSS Colors

We can use CSS colors by color identification. We can use color identification by following ways.

1. By using valid color name like, Red, Green, Blue etc.
2. By using valid HEX color value like. #fg0900.
3. Using RGB color value like, RGB(250,20,100).


CSS Valid Color Names

We can use valid color name to get a specific color for website. But if we want to use a custom color that would not be covered by color names. Because for a specific custom color shad or depth we don’t have names.


CSS RGB Colors

RGB colors is a technique in which CSS RGB colors are mixed. In CSS RGB colors we provide color depth and intensity in numeric value. For example RGB (Red,Green,Blue)
In this example we will pass a numeric value of Red color in first parameter and in second parameter we will pass the Green color intensity value and blue as well, to mix these three primary colors. And we will get a new CSS custom color as result.


CSS HEX Colors

CSS hex colors are little bit more advanced then RGB colors. CSS hex colors provide more depth and intensity to create better shads. And very high level of custom colors.
So we can say that hex colors can provide more colors then RGB. We can target colors using hexadecimal value of every color. There are many tools available that can be used to get a hex color value over the color, even the chrome browser also have extensions to get these features inside your browser. So you can easily check a hex color value on live web page by using chrome hex color extensions.

In next tutorial we will learn How to use CSS colors in HTML with source code examples. If you like our tutorials don’t forget to share with your friends on social media.

Colors should be selected carefully while working with CSS colors keep in mind to enhance user experience for different types of readers. So they can easily read with out getting color distraction.


Related Posts

Share with friends