The Frugal Café | Photo credit: 

Rebecca Anne, "Flora's Cup"</a> | Creative Commons License, Flickr.com
Photo credit: Rebecca Anne, "Flora's Cup" | Creative Commons License, Flickr.com

Frugal Café Philosophy
Save more.
Spend wisely.
Use resources responsibly.
Laugh often.
Kindle passion in life.
Give back.


 

 

 

 

 

 

 

 

Frugal Café Site Search:

 

 

Color Me Frugal: Hex Color Chart for Websites

By Vicki McClure Davidson

 

Many people are creating their own websites these days. Contracting a web designer can cost a small fortune, so a growing number of brave souls are forging ahead, teaching themselves the basic codes necessary for developing a simple, but attractive website. But, being frugal can be challenging. For many newbies, this uncharted cyberspace territory with its strange acronyms and code protocols can be frustrating and overwhelming. While there are a number of free templates available, this may not be the desirable cookie-cutter path. You want a site that looks like no other, that reflects your own creativity and the vision you have for the website.

Many of the tutorials on the Internet are complicated, intended for the serious coder with extensive background in coding. You may be thinking, "Good grief, I don't need any fancy Flash banners or JavaScript displays or nested tables. I just want to put in some colors, a few graphics, load the page with informative content and a couple URL links, and be done with it!"

When you're adding a given color to your web page using HTML (HyperText Markup Language, the predominant markup language for Web pages), sometimes you can just type in the name of the color. But preferably, you should always use the color's "hex code." This is an assigned color code that many different browsers can understand and display correctly; it's practically universal for that particular color. The hex code is comprised of six numbers and/or letters. When entering the hex code, you must be sure to tag it properly, or the browser won't know what in the heck it is.

All hex codes begin with a hash symbol, like this # (found on the "3" key on the top row of your keyboard: SHIFT-3). Hex codes must be encased on either side by quotation marks, and the entire code must be put within angle brackets, like this <   >. Color can be added to fonts, to table borders, to the page's background, and other areas of the page. You also need to include in the HTML code WHERE the color is going to be applied. There are a variety of HTML codes for this, and all must have an equals sign separating them from the hex code (see examples below).

You must also put in a bracketed code to close up, or end, the use of color, such as < /font>. This uses the slash symbol in front of the HTML code. For more information on the process of tagging and using hex codes, locate a Web design tutorial for instructions on the Internet.

 

Examples of coding using hex codes

 

Below is a handy-dandy "cheat sheet" chart to help you with selecting colors.

Choose a color from the chart and look to the left to get its hex code. Copy and paste the hex code (remembering to also copy the hash mark at the beginning) into your webpage. Computer monitors all differ, so be aware that the precise shade and hue of your selected colors may appear slightly different on other people's screens.

All hex codes start with a # symbol, followed by six digits. The first hex code in the color chart, #FFFFFF, is white, and the last one, #000000, is black.

 

Hex Code Color
#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF66CC
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3399
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000

Hex Code Color
#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
Hex Code Color
#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

Hex Code Color
#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
Hex Code Color
#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

Hex Code Color
#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

 

Related Reading:
Cell Phone & Landline Phone Info: Free 411 Help
8 of Our Favorite Freeware & Shareware Websites (You'll Like Them, Too)
Help Your Favorite Charity for Free: Search-Engine Clicking through GoodSearch.com Earns Money for Charities
Save Money by Paying Your Bills Online
Tremendously Useful Websites That Are Still Free to Access
Online Surveys: Earn or Burn?
Frugal Café Blog Zone: E-Waste First: Olympic Medals Made from Gold, Silver, & Copper Recovered from Electronic Waste
How to Fight Botnets and Trojans: Cyber-crime Attacks Could Cost You Money, Your Identity, Computer Data, and Credit Card Information