CSS Color Codes

When coding CSS, you will often need to define a color for an HTML element. For example, you might need to create a red font, a yellow background, or a blue border.

In CSS, you define a color using either the hexadecimal color code, the RGB color code, or the actual color name. A benefit of using hexadecimal and RGB color codes is that you have many more options than just supplying a color name.

The color picker and chart on this page provide you with the hexadecimal color codes. The color picker also provides the RGB color code.

Hexadecimal color codes are often referred to as "hexadecimal colors", "hex colors codes", "color values" and a few other terms. "Hexadecimal color values" is probably the most accurate term as they are made up of hexadecimal numbers.

Color Picker

Use this color picker to find a suitable color. To use it:

  1. Use the slider on the right to change the hue.
  2. Click anywhere in the large square to pick a color.
  3. Once you're happy with the color, copy the hexadecimal value from the bottom field (the series of 6 digits/letters in bold (for example #FFFFFF).

 


R H
G S
B V

#
 

Choosing Multiple Colors (optional)
Choose/compare up to 3 colors. Click in a field below, then select a color from the color picker... Try it!

Color 1: # ____
Color 2: # ____
Color 3: # ____

CSS Color Names

The following color code chart contains the 17 official CSS color names (based on the CSS 2.1 specification) along with their hex RGB value and their decimal RGB value.

Clicking on a value will take you to a color scheme tester, where you can see your selected color as the background color of the web page.

X11 Colors

Here is a table of the X11 colors. These are supported by all major browsers.

Again, clicking on a value will take you to a color scheme tester, where you can see your selected color as the background color of the web page.

Web Safe Colors

Below is a chart covering the 216 hexidecimal color values from the web safe palette. Use this chart if you prefer to use colors from the web safe palette.

#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

For more about hexadecimal colors, see Hex Color Codes.

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites