XHTML Lessons (Read-Only Folder)  -  Lesson 4 - Web-safe Colors (5012 views) Notify me whenever anyone posts in this discussion.Subscribe
 
From: Sheryl (MSCHAR) DelphiPlus Member Icon Posted by host12/7/04 2:17 PM 
To: All  (1 of 121) 
 11580.1 
Lesson 4 - Web-safe Colors

There are 216 different colors that are considered web safe. The best way to make sure you are getting a web safe color is to remember these: 00, 33, 66, 99, cc, ff

Those are HEXADECIMAL (base 16) numbers for 0, 51, 102, 153, 204 and 255

You don't really need to know anything about hexadecimal numbers if you just remember those six combinations, 00, 33, 66, 99, cc and ff

Computer colors are some combination of RED, GREEN and BLUE (or RGB) - two digits each - RRGGBB. To get black, you need 0 red, 0 green and 0 blue. To get white, you need 255 (the highest number) red, 255 green and 255 blue.

There are 255 shades of each color. In hex, 255 is ff. So to show black in Hex you would use the RGB combination of 000000 (00 red, 00 green and 00 blue) and to show white, you would use the RGB combination of ffffff (ff red, ff green and ff blue). All other colors fall somewhere between those two combinations.

To make it a bit simpler - red is all red, no green or blue - ff0000.

So using just ff and 00, green is 00ff00 and blue is 0000ff

Now we'll use them to color our text using the <span>...</span> tag and the color property. You will use the <span> tag when you want to add a style to a portion of your paragraph or line. This is called an inline tag. You can also add your style to almost any other tag; <em style="color:#00f;">This italicized text would be blue</em>

For simplicity, in most of the lessons when a new style is introduced, it will be shown using a <span> tag.

To make your text come out red, use <span style="color:#ff0000;">And your text will be red</span> (Don't forget the closing span tag!).

The color number has to be preceeded by a pound sign: # which tells the browser to read a hex number.

Tip: When using web-safe colors, you can shorten the code to one digit each for red, green and blue: #rgb or <span style="color:#f00;">This would be red</span> or #0f0, #00f, #cc0, etc.

Your Homework:
  • Try posting something in a color and in Lesson 5 I'll show you another shortcut!
  • If you are a DelphiPlus member using the WYSIWYG editor, you need to click SOURCE before typing in any code.
  • If you are a DelphiAdvanced member, check the box at the bottom of the input window that says "Check here if HTML tags are in the message"
  • If you are a DelphiBasic (free) member, you will need to upgrade to be able to use HTML in your messages.
  • You can post your homework or ask questions about this lesson as a reply to this message.
  • Edited 12/9/2004 11:58 pm ET by Sheryl (MSCHAR)
 
 Reply   Options 

 
From: Angela (ANGEHOWE) DelphiPlus Member Icon12/17/04 5:58 AM 
To: Sheryl (MSCHAR) DelphiPlus Member Icon  (2 of 121) 
 11580.2 in reply to 11580.1 

Char, what shortcuts do you have for using colors?

Is there a Master List for those 3-digit colors?

 

 
From: DWIEST DelphiPlus Member Icon12/19/04 7:00 PM 
To: Sheryl (MSCHAR) DelphiPlus Member Icon  (3 of 121) 
 11580.3 in reply to 11580.1 
Gee, Char... Normally when I have to do some computer lesson that involves the use of color, I see red! However, this doesn't seem all that bad for this color-challenged person. ;-)

Thanks,
Skip


  • Edited 12/19/2004 7:04 pm ET by Skip (DWIEST)
 

 
From: Dee (DLAINEDEE) DelphiPlus Member Icon Posted by host12/20/04 12:51 PM 
To: DWIEST DelphiPlus Member Icon  (4 of 121) 
 11580.4 in reply to 11580.3 

Hi Skip

Very good. :-)

Just so you'll know and understand... You can use the div, as you did, but it wasn't really needed. The paragraph tag <p> would have been a better choice for your post above, and in most all circumstances.

However, you cannot use a <span> as a stand alone tag, it must be in a block element (tag). And you never use two single line breaks <br /> together. Those must be used inside a block tag also, such as the paragraph tag <p> ... <br /> ... </p>

This is what you have:

<DIV>
<SPAN style="COLOR: #0000ff">Gee, Char... Normally when I have to do some computer lesson that involves the use of color, </SPAN><SPAN style="COLOR: #ff0000">I see red</SPAN><SPAN style="COLOR: #00ff00">! However, this doesn't seem all that bad</SPAN> <SPAN style="COLOR: #000000">for this color-challenged person. ;-)<BR /><BR />Thanks,<BR />Skip</SPAN>
</DIV><BR />

This would have been a little better:

<p style="color: #0000ff;">Gee, Char... Normally when I have to do some computer lesson that involves the use of color, <span style="color: #ff0000;">I see red</span><span style="color: #00ff00;">! However, this doesn't seem all that bad</span> <span style="color: #000000;">for this color-challenged person. ;-)</span>
</p>

<p>Thanks,<br />
Skip
</p>

You need only use the span tag when you want to change something to make it different from the main tag, in this case the paragraph tag.

Is your sig too BIG?
Downsize Your Sig

I completed all four levels!
 

 
From: Sheryl (MSCHAR) DelphiPlus Member Icon Posted by host12/23/04 12:00 AM 
To: Angela (ANGEHOWE) DelphiPlus Member Icon  (5 of 121) 
 11580.5 in reply to 11580.2 

Angela

Using colors is like mixing paint. It takes practice to learn how to just create the color you want. I know the higher the number the brighter the color as long as the other two are low numbers, but when the other two are also high, the colors become paler.

And knowing the order, RGB, and how the colors combine: equal amounts of RG = Yellow, RB = Magenta, GB = cyan and RGB = shades of gray from black to white - allows me to come up with just about any color.

Knowing FF FF 00 will give me bright yellow, I know if I reduce the green, I can get orange and if I reduce both numbers even further, I can get brown.

I don't normally use anything else, just trial and error until I come up with just the right color. Or you could do like Dee does if you are trying to copy a color and use color cop ;-)

edit: I just remembered I have a color thingy on my charhtml web site:

Web Color Combinations - this will allow you to see how different colors will look together as foregrounds and backgrounds. The foreground/background feature only works in MSIE, but you can click on a color in anything else and the background will change to that color. I guess I should fix that one of these days ;-)


Happy Holidays
(Carpenter 1974)
Delphi Forums Staff

Upgrade to DelphiPlus or DelphiAdvanced

Healthy Living
Char's Web Publishing Tutorials
Downsize Your Sig

Adversity has the effect of eliciting talents which in prosperous circumstances would have lain dormant.
--Horace

  • Edited 12/23/2004 12:09 am ET by Sheryl (MSCHAR)
 

 
From: angelfireibe DelphiPlus Member Icon12/26/04 8:55 PM 
To: Sheryl (MSCHAR) DelphiPlus Member Icon  (6 of 121) 
 11580.6 in reply to 11580.1 

The color of the rose was true red.

The color of the silk dress was blue

Can't wait to see the color of green in spring.

To keep a lamp burning we have to keep putting oil in it.
 

 
From: Sheryl (MSCHAR) DelphiPlus Member Icon Posted by host12/27/04 1:22 AM 
To: angelfireibe DelphiPlus Member Icon  (7 of 121) 
 11580.7 in reply to 11580.6 
Nice job on colors :-) I won't repeat the <br> stuff because I talked about it in another post. I did notice you used an <i> tag in this one, and that tag has been deprecated and shouldn't be used.


Happy Holidays
(Carpenter 1974)
Delphi Forums Staff

Upgrade to DelphiPlus or DelphiAdvanced

Healthy Living
Char's Web Publishing Tutorials
Downsize Your Sig

Adversity has the effect of eliciting talents which in prosperous circumstances would have lain dormant.
--Horace

 

 
From: angelfireibe DelphiPlus Member Icon12/27/04 5:42 AM 
To: Sheryl (MSCHAR) DelphiPlus Member Icon  (8 of 121) 
 11580.8 in reply to 11580.7 


Thanks for telling me.

 

 
From: Shari (sharonm44) DelphiPlus Member Icon12/30/04 8:56 PM 
To: Sheryl (MSCHAR) DelphiPlus Member Icon  (9 of 121) 
 11580.9 in reply to 11580.1 

so lets see what this does
and this does what?
now this is

 

 
From: Dark Angel (Raven_Star) DelphiPlus Member Icon1/3/05 6:35 PM 
To: Sheryl (MSCHAR) DelphiPlus Member Icon  (10 of 121) 
 11580.10 in reply to 11580.1 

More complications!
This should be centered and BOLD and red!

I think this is on the right side, in ITALICS and green?

This should be left, bold, italics, and BLUE!!

 

 
Navigate this discussion: 1-10 11-20 21-30 ... 101-110 111-120 121
Adjust text size:

Welcome, guest! Get more out of Delphi Forums by logging in.

New to Delphi Forums? You can log in with your Facebook, Twitter, or Google account or use the New Member Login option and log in with any email address.

Home | Help | Forums | Chat | Blogs | Privacy Policy | Terms of Service
© Delphi Forums LLC All rights reserved.