A Tutorial For Html Color Codes

free web hosting
Free Web Hosting > Computers & Tech > How-To's and Tutorials > Websites and Web Designing

A Tutorial For Html Color Codes

Jaskaran
HTML Coloring System - RGB Values

RGB which stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255 (fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies. Below is an example of RGB in use.
Red, Green, and Blue Values:
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue

HTML Color Code - Breaking the Code
The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values. Hang in there it all makes sense shortly.

A Real Hexadecimal:
bgcolor="#FFFFFF"

The letter "F" is the maximum amount we can send each color and as you may deduce, this color (#FFFFFF) represents the color white. A formula exists to calculate the numeric equivalent of a hexadecimal.

Hexadecimal Formula:
(15 * 16) + (15) = 255

The formula is real simple. Take the first value (F) or 15 multiply it by 16 and add it to the second value, 15. The value 255 is the maximum allowed for any primary color.

Let's try another one.

Example 2:
bgcolor="#CC7005"

CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5

If you want to be absolutely sure your colors will not change, use paired hex values for color. Examples: "#0011EE", "#44HHFF", or "#117788". These are called True Colors, since they will stay true in hue from browser to browser.

Notice from vizskywalker:
Fixed small typo in the title

 

 

 


Reply

jlhaslip
A small colour table (3k),

and a considerably larger colour grid (86k).

*Edit* -- links should be good now

Reply

closed
I prefer using hex code e.g. #fff which is equal to #ffffff.
it also have an additional points; that you are sure that your color is in the range of 256 web palette. supported by most monitor even in 8 bit color depth/resolution.

Reply

.:Brian:.
This is a nice tutorial, thanks for taking the time to write it.

Also jlhaslip, thanks for those links. I really like some of those tables. Athough, usually when i am searching for a color, rather than try and try for it, or look at a table, I go into Paint Shop Pro (just one of the 100s of applications you could use), and i select a custom color, and go from the color selection thing there (just a glorified version of the standard windows custom color selector that shows the hex code in with the other ones, but the standard color selector works as well, and you can use the techniques that Jaskaran provided.

Reply

Orca239
Nice tutorial, I always used hexcode because I could look at a chart and tell which code to put in (although there are charts for those as well). This RGB code is much easier though because you can play with the numbers to get the right shade easier than with the hexadecimal code. I never used it because I didn't know how, lol. I think I'll start trying to use this code instead of the hexadecimal code now because I can play with it to figure out my shade. Plus I use grays and blacks alot so it really makes it easier for those. With gray you just make sure all three are the same number and bingo! there's a shade of gray. Then I can just move the numbers up or down to get whiter or more black. Thanks again for the nice tut!

Reply

Aequitas619
QUOTE(jlhaslip @ Jan 16 2007, 05:15 AM) *



The links dont seem to work!

Nice tutorial. Explains things very well!

Reply

Mandi
A good tutorial it explains the colour codes well, but the links you gave the colour table's do not work

Reply

jlhaslip
Fixed the links. I restructured the file system at my Hosting account. These links are good now:

A small colour table (3k),

and a considerably larger colour grid (86k).



Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

Recent Queries:-
  1. colour code for gg account - 5.45 hr back. (1)
  2. paint and "html color code" - 52.12 hr back. (1)
  3. how to make colour name in gg - 94.89 hr back. (1)
  4. html tutorial database-code - 156.99 hr back. (1)
  5. gg account color codes - 207.43 hr back. (1)
  6. explain html color codes - 547.01 hr back. (1)
  7. how to stop html color code efect - 632.75 hr back. (1)
Similar Topics

Keywords : tutorial, html, color, codes

  1. 4 Html Based Website Tips
    (4)
  2. Coding Html Properly In The New Age
    (15)
    In all your html there are things you want to follow. Always use lowercase for your HTML Tags
    Don't use upper case. Upper case is bad (this can be hard to do if your like me and tend to
    write and then for closing:P). CODE Types of Staff Administrators: SilverFox,
    Danmidas Above: Bad Code Below: Good Code CODE Types of Staff Administrators:
    SilverFox, Danmidas Use Self-Closing Tags In html certain tags (ex. img, br, hr) didn't
    need closing tags. However its best to write them with something called self-closing tags. ....
  3. Integrating Html And Css
    (9)
    QUOTE(the_aggie10 @ Trap17.com) Ok. Well i am writing this as a series of tutorials i will be
    doing on this subject, so enjoy. I hope this helps. Introduction
    to HTML and CSS HTML and CSS are to work together. HTML is what puts the characters
    on the page, while CSS is what makes everything look outreageous! For instance, I would use HTML if
    i wanted to put "Trap17 is the poop!" onto my page, although if i wanted to make it look nice like
    this by adding a font, and maybe some color, then I would use CSS. Learn the ....
  4. {} Changing Font Color / Size {}
    Basic HTML for beginners (14)
    Changing the Size of your Font: - So you've got basic text on your website but its JUST
    not what you want. Why not change the size of your font. It can both attract and reject viewers so
    becareful how you use it. This tutorial will show you how to do that in very easy, basic steps!
    Getting Started.. - Changing the size of your font is quite easy. It requires TWO tags. These two
    tags require the Brackets and ending brackets (tags) . If you do not put the ending tag, the font
    size will effect your entire website, changing it to that font size. Below is wha....
  5. {} Html'ing & Basic Codes {}
    Basic coding HTML for beginners! (0)
    ** I was looking through the tutorials page and I saw one tutorial on beginning HTML, I thought I
    would expand a little on it and show ya some basic codes you can use for your website if your
    beginning HTML! ** Beginning HTML HTML isnt all that hard. Once you get the hang of it, its
    quite a breeze, but sense your starting out new and would like some basic help on how to do simple
    things regarding HTML heres a little help for you! First off, lets start out with what HTML means
    and what you need to write it. * HTML - H ypertext M arkup L anguage which is a....
  6. Html Meta Tags Tutorial
    -What it is/does; how to utilize it- (21)
    So, you've got your beginning page started, your homepage is defined, neat, and it looks like
    everyone will love it - STOP. Do you really think your site will be even accidently view by anyone,
    even if you do have a bought domain?! Don't kid yourself; the fact of the matter is, you're
    just one infantesimle speck in the universe of much greater websites than yours. Don't worry,
    though - I got your back. Here, I'm gonna explain what meta tags are, and what they're used
    for. I'm also going to show how to utilize them for your site, to increa....
  7. Starting Your Website With Html
    To build a website, you need to know HOW (7)
    I was reading through the tutorials, and it seems throughout the tutorials, no one has ever really
    taught how to build a beginner's page using HTML. Not that it's anyone's fault, but
    if someone is unsure of how to begin and end a page with HTML, then they will not be able to make a
    page. So, I figured I'd lend a hand... -------------------------------------------- To begin
    your first webpage using HTML, you will need these tags* (in this order): CODE YOUR TITLE
    FOR YOUR PAGE THIS IS WHERE YOUR MAIN TEXT GOES To explain: The ....
  8. Upgrading Your Site!
    Move from HTML 4.01 to XHTML 1.0 (0)
    I planned to post 3 different parts because of the length, but so there's no confusion, I'll
    just make one big tutorial all together /cool.gif' border='0' style='vertical-align:middle'
    alt='cool.gif' /> . ====================================== (A note to the moderators: Alright,
    I've got this down now, so please delete all of my other posts besides this one, and any posting
    credits as well; thanks!) ====================================== Now the tutorial: Concerning those
    in the webmaster biz... If you are an aspiring experienced webmaster, then you sho....
  9. Creating Tooltips
    DHTML, HTML, CSS, Javascript... (7)
    Here is a little tutorial to make those small yellow-background boxes (tootltips) that pop-up for
    some links that describe them when you hover the mouse over them, it uses DHTML, CSS, HTML, and
    Javascript, so it gives us a much more wide range than my previous tutorials that just where on
    HTML. OK, so here we go... Put this right under CODE var offsetxpoint=-60 //Customize x
    offset of tooltip var offsetypoint=20 //Customize y offset of tooltip var ie=document.all var
    ns6=document.getElementById && !document.all var enabletip=false if (ie||ns6) var tipobj=doc....
  10. Three Html/ Css/ Javascript Tutorials
    (6)
    Here are some tutorials that always get great results when I post them. Lesson 1 HTML means Hyper
    Text Markup Language. HTML is a very common language used for many websites, is the base for more
    complicated and powerful langauges like php, HTML can seem hard, but you will find it is one of the
    easiest langauges one can learn. The core of HTML is the tag, a tage is just a set of two
    arrows-like brackets created by hitting Shift and the comma key, or Shift and the period key. They
    look like this... HTML HTML > Tags start a change in the way a webpage ....
  11. Uploading A Html Format Page
    (0)


      Looking for tutorial, html, color, codes






*SIMILAR VIDEOS*
Searching Video's for tutorial, html, color, codes
advertisement




A Tutorial For Html Color Codes