This article primarily covers the rgb() color model. In this example, we used rgb color values to change the colors on the page. These styles look something like this when we load them in the browser: Then in our style.css we can add the following: We can have a file, about.html, with some HTML code like this: This makes your code easier to read and sepates concerns, which is considered a best practise. css stylesheet with all the colors and styles you specify. The easiest way to apply color to your HTML elements is to write your HTML in a. They range from named colors, to hex colors, rgb() colors, hsl colors and more. Image from UnsplashĬSS lets you use of a wide variety of different colors and color systems. The color of the border ( border), the background ( background-color), or of the foreground ( color) – the text and text decorations on the page – have a huge impact, so you should put in some effort to get them right. But the wrong colors can make a project look garish, hard on the eyes, and can be difficult for users to interact with. The right choice of colors can make your designs and creations look clean, aesthetically pleasing, and modern. A color scheme can often make or break a site's overall appearance.ĭifferent colors create a different feel for your designs. But it's a great way to pick some basic colors nice and quickly.Choosing the right color for your web design project is a serious endeavour. With current day monitors being able to display millions of colors, there's little need to use the web safe colors any more. Click on a color to display it in a new page. This chart displays the 216 'web safe' colors.

Here's a list of color-related properties you can use with CSS. Here's a list of color values you can use with CSS. Here's an example of adding transparency to a color using the rgba() function.

This means that you can add a color that's semi-transparent - so that you can see the element behind it. Transparent ColorsĬSS also enables us to add transparent colors to our HTML elements. You can also move the styles to an external style sheet so that you can apply the styles across the whole site from one file. This is a basic example to demonstrate how colors can be applied to a web page using CSS. To set a border color, use border-color.īelow are quick CSS code examples for applying this color to various HTML elements.

To set a background color, use background-color.You can apply any of these colors to a website or blog by using the relevant CSS code. It doesn't matter which one you choose as long as it's a valid color. For example blue can also be represented as #0000ff, #00f, rgb(0,0,255) and many other ways. More Color Charts How to use these ColorsĮach color can be represented in many different ways.

Blue css color codes