Printable View
I'm just learning HTML and planning my first web site. I'd like some advice from more experienced people. Question: What background colors do you like to use? I realize someone might say, "What does it matter?" But I want something that will be easy on my viewers eyes. Some of my pages might have a good bit of text too. What background/text color combinations have you found to be pleasing to the eye and less likely to cause eye straing and/or annoyance on the part of the page viewer? Thanks. :)
You can not beat white as the best color for a web background. All other colors provide a contrast and are highly visible. Just my personal opinion.
Black text on a white background tends to be easiest to read, hence it is the default for most browsers. Choose completely opposite shades or else you'll end up with an unreadable mess, and *never* use complimentary colours (yellow/purple, red/green, blue/orange) together as they will make an absolute mess of things and will look blurred to anyone who doesn't have the latest LCD monitor.
Make sure you use a bright text on a dark background (or vice versa), don't use complimentary colours and don't use different shades of the same colour and you should be okay. If you're ever stuck, just fall back on black on white. :D
Okay guys,
I've decided to go with a white back ground and black text, and to use red a main color theme. Thanks for you imput. :)
Your question reminded me of a wee bit of DHTML i saw a while ago so I dug out the code for you......it creates 3 sliding bars on ur web-page that control the RGB vlaues of the background colour - a bit of a gimic with no real use but fun to play about with :)
just copy the code below into a new txt document and save as html
v_LnQuote:
<html>
<head>
<title>Slider</title>
<meta name="Author" content="Ronald H. Jankowsky">
<meta name="Description" content="Slider-Script">
<style>.drag {position: relative; cursor: hand}</style>
<SCRIPT LANGUAGE="JavaScript1.2">
// Slider script by Ronald H. Jankowsky (http://rj-edv-beratung.de), parts of code (draglayer, movelayer) by DynamicDrive.com
// This script is free for use, please leave this notice intact
var sPosition;
var showPerc=100;
document.onmousedown=dragLayer
document.onmouseup=new Function("dragMe=false")
var Color= new Array();
Color[0] = "00";
Color[1] = "11";
Color[2] = "22";
Color[3] = "33";
Color[4] = "44";
Color[5] = "55";
Color[6] = "66";
Color[7] = "77";
Color[8] = "88";
Color[9] = "99";
Color[10] = "AA";
Color[11] = "BB";
Color[12] = "CC";
Color[13] = "DD";
Color[14] = "EE";
Color[15] = "FF";
// Demofunction to change bg-color by moving slider
var rVal,gVal,bVal, cCol
function chgBg() {
cCol = document.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2);
ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
// If more sliders are used, each of them has to be handled separately
if (kObj.id =="knobImg") document.bgColor="#"+Color[ind]+gVal+bVal;
if (kObj.id =="knobImg1") document.bgColor="#"+rVal+Color[ind]+bVal;
if (kObj.id =="knobImg2") document.bgColor="#"+rVal+gVal+Color[ind];
}
// Drag and move engine (original code by DynamicDrive.com), don't change unless explicitely indicated
var dragMe=false, kObj, yPos,direction
function moveLayer() {
if (event.button==1 && dragMe) {
oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos;
// Limit movement of knob to stay inside layer
if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}
// Set working variable 'showPerc' depending on 100 or 250 scaling
sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5;
// The following line should be replaced by the function-call with the actual task to perform
chgBg();
return false; }
}
function dragLayer() {
if (!document.all) return;
if (event.srcElement.className=="drag") {dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; document.onmousemove=moveLayer; }
}
</script>
</head>
<body bgcolor="#FFFFFF">
<!-- Each of the 'outerLyr#'-divs creates a slider element.
There can be as much sliders as needed. Just make sure,
they have different names, especially the img (knob is referred and acted on by name)-->
This is an impressive demonstration of using DHTML to create adjust bars. Here in the demo, the bars function as color adjusters, though, through modification, can be set to do virtually anything.
<div id="outerLyr" style="position:absolute; width:23px; height:120px; z-index:1; left: 155px; top: 111px; background-color: #000000">
http://www.antionline.com/
<div id="innerLyr" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
<div id="barLyr" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div>
</div>
</div>
<div id="outerLyr1" style="position:absolute; width:23px; height:120px; z-index:1; left: 185px; top: 111px; background-color: #000000">
http://www.antionline.com/
<div id="innerLyr1" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
<div id="barLyr1" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div>
</div>
</div>
<div id="outerLyr2" style="position:absolute; width:23px; height:120px; z-index:1; left: 215px; top: 111px; background-color: #000000">
http://www.antionline.com/
<div id="innerLyr2" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
<div id="barLyr2" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div>
</div>
</div>
<input type="radio" name="perCent" value="false">Prozent
<input type="radio" name="perCent" value="true" checked>255
</body>
</html>
-Have just noticed that I've become a senior member....never realised I had posted that much :) funky ;)
In my humble opinion it depends on what kind of page you like to make...
I for one prefer darker backgrounds (eg BLACK) because the contrast you create for images in this way creates a certain mood that I am looking for in my pages..
If I use black as background color, then I rarely use white for the text.. then the contrast is too high.. maybe something soft blue (close to white) or something makes it better to read.
I would advise you:
a. Look around on pages.. study the pages you like and think "Why do I like these pages".
b. Try for yourself.. don't be afraid to experiment, play around.. there so many options to play around with that just by playing you discover things one never thought of before..
c. Take a break from time to time, because sometimes your own page blinds you. Taking a break and then looking back at the page makes you a hell of a lot more critical.
d. Have phun in what you are doing! <-- most important:)
cheers
Just whatever you do avoid using #ECFE12 <- most hatefull color for txt EVER!!
ewwww bright yellow, could there be anything more straining on the eyes?
v_Ln
Hi valhallen. Im not sure if this code only works in IE, but I put it up on my site and it didnt work with Mozilla. If you want to see it check out http://skriptkittysecurity.cjb.net/slider.htmlQuote:
Originally posted here by valhallen
Your question reminded me of a wee bit of DHTML i saw a while ago so I dug out the code for you......it creates 3 sliding bars on ur web-page that control the RGB vlaues of the background colour - a bit of a gimic with no real use but fun to play about with :)
just copy the code below into a new txt document and save as html
v_Ln
-Have just noticed that I've become a senior member....never realised I had posted that much :) funky ;)
yeah soz i 4got to mention that - the site I took it from (link in code)seems to only do code for IE and netscape - havn't checked to see if it works in netscape atm (am running flash 5, cd player, IE, psp, dreamworks, and mirc - my wee 166mhz cpu couldn't handle netscape 6 as well :()
but that page worked fine in IE 5
soz again
v_Ln
I have a few questions. First of all, I am making my first site in HTML. Here is the code so far, tell me what you think:
<html>
<title>Nitro Evolution Home</title>
<body bgcolor="#CCCCCC">
[img]images/NITE2.gif[/img]<font size=4><font face="Eurostar Black Extended">
<font color="#000000">N i t r o<font color="#CCCCCC">d</font color>
E v o lu t i o n<font color="#CCCCCC">d</font color>H a c k e r s</font>
</font color></font size>
<hr>
<font face="Verdana"><font size=1><font color="navy">
<td><marquee>Welcome to Nitro Evolution. We are a group of computer enthusiasts
who have come together to show the world the legal side of hacking. We do not condone
illegal activity, and if you do it's out the door with you. This site was coded and
programmed by Silentstalker. Thank you and please come back soon!</font>
</font size></font color></td></marquee><hr>
<h4>Navigation</h4>
<font color="#800000">BBS</font></font><font color="#800000">
</font><font color="navy">
<font color="#800000">IRC</font><font color="#800000">
</font>
<font color="#800000">Staff</font><font color="#800000">
</font>
<font color="#800000">Join The Staff</font><font color="#800000">
</font>
<font color="#800000">Links</font><font color="#800000">
</font>
<font color="#800000">Text Files</font><font color="#800000">
</font>
<font color="#800000">Programs</font><font color="#800000">
</font>
<font color="#800000">Affiliates</font><font color="#800000">
</font>
<font color="#800000">Live Hacker Chat</font><font color="#800000">
</font>
<font color="#800000">Comments</font><font color="#800000">
<a href="coding.htm"><font color="#800000">Coding And Programming</font></font color>
<font color="#80000">Web Design and Development</font color>
<script>
scrolly ("Welcome to N.I.T.E. (Nitro Evolution). Enjoy!")
function scrolly(tx)
{
if (document.scrollText == null) {
document.scrollText = "";
for (i = 0; i < 200; i++) {
document.scrollText = document.scrollText + " ";
}
document.scrollText = document.scrollText + tx;
document.scrollNum = 0;
document.scrollMsg = "";
document.scrollGo ="1";
}
if (document.scrollText != null && document.scrollGo == "1") {
for (k = document.scrollNum; k < document.scrollText.length; k++) {
document.scrollMsg = document.scrollMsg + document.scrollText.charAt(k);
}
window.status = document.scrollMsg;
document.scrollNum++;
document.scrollMsg = "";
}
if (document.scrollNum == document.scrollText.length) {
document.scrollText = null;
}
ab1 = window.setTimeout("scrolly('"+ tx +"');", 50);
}
</script>
That script was a little something I added ;)
Anyway, if you guys code provide me with the following codes, it be great :)
Text Box Tag(s)
And How To Make Something Follow your cursor on a screen
Thanks in advance
Page looks a bit plain yet silentstalker but i guess u've still got alot of content to add....
All works fine tho :)
v_Ln
Hey all,
My post doesn't really answer the initial question, but this seemed like an appropriate thread to place it in (rather than start a new one).
If you want to actually "see" the color of a background before having to enter and preview hex color codes all day, try this site:
Hexadecimal Color Codes
It also has links for "soft" colors and "browser safe" colors. Interesting site, plus it lists all those nice little alpha-numeric, sometimes alpha, sometimes numeric combinations or just the plain textname...
i like using colors of the same hue,(example: dark blue bgcolor, light blue text)
http://tampabay.portal.dk3.com
Another reason to avoid using red/green combos is due to the possibility of having visitors who are color blind. Mixing dark red with black background is quite common, specially in '1337Z H4x0r kiddie pagez'. This essentially means no respect towards the user, and i must feel happy you wish to mantain an accessible web page. :cool: Since i am not color blind, dont know how they would see dark red/black, but its a pain even for me.
I preffer having the color set in a Style sheet file, linked to the document by... Link! This means:
1) You can change presentation without changing the page itself;
2) Users may disable the CSS so that they may chose the best looking configuration;
3) It is just cool, and I am a fan of it (OOOOHHHH, what a reason.. :p )
Avoid using background property in body tags and things like that, for they are deprecated in the newest version of HTML and in XHTML. Use css to control how it will be displayed.. it will look great (I hope)
silentstalker: dont forget marquee, AFAIK, is an IE-specific tag. It might have changed, but im not sure about it..