CSS Color Codes

• CSS Reference
• CSS Color Tools

Use the following color picker or color charts to pick a color that you can use within your CSS code. The color picker provides the color values in hexadecimal and RGB. The color chart provides them in hexadecimal, RGB, and their color names.

Color Picker

 

◯

◯

#
R H
G S
B V

 

Hex

RGB

HSL

HSV

HWB

CMYK

Basic CSS Colors

Here is a table of the basic color names that have been in CSS since CSS1 (except orange, which was added in CSS 2.1).

Try clicking on a value. This will open the color in Quackit's online editor so you can see how it looks (and grab the code). There's also a link to a color tester where you can get another preview of the color.

CSS Color Names

Here is a full list of the CSS named colors as specified in CSS3 (CSS Color Module Level 4). These are based on the X11 color set. The above basic colors are also included in this chart.

Try clicking on a value. This will open the color in Quackit's online editor so you can see how it looks (and grab the code). There's also a link to a color tester where you can get another preview of the color.

More Color Charts

How to use these Colors

Each color can be represented in many different ways. For example blue can also be represented as #0000ff, #00f, rgb(0,0,255) and many other ways. It doesn't matter which one you choose as long as it's a valid color.

You can apply any of these colors to a website or blog by using the relevant CSS code.

• To set a background color, use background-color.
• To set the text color, use color
• To set a border color, use border-color.

Take blue for example.

Below are quick CSS code examples for applying this color to various HTML elements.

Check out some basic color code examples using color names in the online editor.

In Hexadecimal Notation

Here is the same color, but this time using hexadecimal notation instead of the color name.

So the color code is now 0000ff.

This needs to be prefixed with a hash symbol, so it will become #0000ff when written in the code.

Check out some basic color code examples using hexadecimal values in the online editor.

In RGB Functional Notation

Here is the same color, but this time using RGB functional notation.

So the color code is now 0,0,255. This needs to be placed inside the rgb() function, so it will look like this rgb(0,0,255).

Check out some basic color code examples using RGB functional notation in the online editor.

Full-Page Example

Here is an example of where CSS color codes can fit into an HTML document.

This example uses embedded style sheets. 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.

Transparent Colors

CSS also enables us to add transparent colors to our HTML elements. This means that you can add a color that's semi-transparent — so that you can see the element behind it.

Here's an example of adding transparency to a color using the rgba() function.

List of Color Values

Here's a list of color values you can use with CSS.

List of Color Properties

Here's a list of color-related properties you can use with CSS.

Web Safe Colors

This chart displays the 216 "web safe" colors. Click on a color to display it in a new page.

With current day monitors being able to display millions of colors, there's little need to use the web safe colors any more. But it's a great way to pick some basic colors nice and quickly. And hey, it's still a nice looking chart!

• CSS Reference
• CSS Color Tools