CSS Color Codes

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

 

Color Picker Background

#
R H
G S
B V

 
Hex
RGB
HSL
HSV
HWB
CMYK

Choose Multiple Colors

Compare up to 3 colors. Click in a field below, then select a color from the color picker... Try it!

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 a color tester where you can test different colors against the page background.

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 a color tester where you can test different colors against the page background.

How to use these Colors

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

Take blue for example.

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

/* Set a background color to the 'body' element */
body { 
    background-color: blue;
    }
    
/* Same as above, but using the CSS 'background' property instead */
body { 
    background: blue;
    }
    
/* Setting the text color for the 'h1' element */    
h1 { 
    color: blue;
    }

/* Setting a border color on the 'article' element */
article { 
    border-color: blue;
    }

/* Same as previous, but using the 'border' property instead (also sets border width and style) */    
article { 
    border: 1px solid blue;
    }

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.

body { 
    background-color: #0000FF;
    }
body { 
    background: #0000FF;
    }
h1 { 
    color: #0000FF;
    }
article { 
    border-color: #0000FF;
    }
article { 
    border: 1px solid #0000FF;
    }

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).

body { 
    background-color: rgb(0,0,255);
    }
body { 
    background: rgb(0,0,255);
    }
h1 { 
    color: rgb(0,0,255);
    }
article { 
    border-color: rgb(0,0,255);
    }
article { 
    border: 1px solid 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.

<!DOCTYPE html>
<html>
<head>
<title>Color Example</title>
<style>
    body {
        background: darkslategrey;
        font-family: sans-serif;
        font-size: 1.3em;
    }
    section {
        padding: 20px;
        margin: 20px;
        background-color: cornsilk;
        border: 6px solid gold;
    }
    h1 {
        color: coral;
    }
    p {
        color: orange;
    }
    a:link,
    a:visited {
        color: darkorange;
    }
    a:hover {
        color: orangered;
    }
    a:active {
        background: orangered;
        color: white;
    }
</style>
</head>
<body>
    <section>
        <h1>Basic Color Example</h1>
        <p>This is a basic example to demonstrate how colors can be applied to a web page using CSS.</p>
        <p><a href="/css/css_color_codes.cfm">More color codes &rarr;</a></p>
    </section>
</body>
</html>

Try it with the Online Editor

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.

  • CSS Named Colors
  • CSS transparent Keyword
  • CSS currentcolor Keyword
  • CSS 3-Digit Hex Codes
  • CSS 4-Digit Hex Codes
  • CSS 6-Digit Hex Codes
  • CSS 8-Digit Hex Codes
  • CSS rgb() Function
  • CSS rgba() Function
  • CSS hsl() Function
  • CSS hsla() Function
  • CSS hwb() Function
  • List of Color Properties

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

  • background-color
  • background
  • border
  • border-bottom-color
  • border-color
  • border-left-color
  • border-right-color
  • border-top-color
  • box-shadow
  • color
  • column-rule
  • column-rule-color
  • filter
  • opacity
  • outline-color
  • outline
  • text-decoration
  • text-decoration-color
  • text-shadow
  • 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!

    #FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00
    #FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
    #FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900
    #FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600
    #FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300
    #FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000
    #CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00
    #CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00
    #CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900
    #CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600
    #CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300
    #CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000
    #99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00
    #99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00
    #9999FF #9999CC #999999 #999966 #999933 #999900
    #9966FF #9966CC #996699 #996666 #996633 #996600
    #9933FF #9933CC #993399 #993366 #993333 #993300
    #9900FF #9900CC #990099 #990066 #990033 #990000
    #66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00
    #66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00
    #6699FF #6699CC #669999 #669966 #669933 #669900
    #6666FF #6666CC #666699 #666666 #666633 #666600
    #6633FF #6633CC #663399 #663366 #663333 #663300
    #6600FF #6600CC #660099 #660066 #660033 #660000
    #33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00
    #33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
    #3399FF #3399CC #339999 #339966 #339933 #339900
    #3366FF #3366CC #336699 #336666 #336633 #336600
    #3333FF #3333CC #333399 #333366 #333333 #333300
    #3300FF #3300CC #330099 #330066 #330033 #330000
    #00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00
    #00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00
    #0099FF #0099CC #009999 #009966 #009933 #009900
    #0066FF #0066CC #006699 #006666 #006633 #006600
    #0033FF #0033CC #003399 #003366 #003333 #003300
    #0000FF #0000CC #000099 #000066 #000033 #000000