It is helpful if we can plan and choose some basic website colors before we start coding our website. Here is a way you can do this…
First what color do you want, it is a simple question, Red, Orange, Yellow, Green, Blue, Violet. Remember our primary and secondary colors, well, they apply here. Don’t worry, if you want something else, it is no problem. I suggest you start with a middle color, from around 4′s to 6′s as this will allow you to have complementing colors easily… Then we will build a table…
Basic Black
The code for the above black square is:
<table style="font-weight: bold;">
<tbody>
<tr><td style="color: white; background-color: #000000;">#000000</td></tr>
</tbody>
</table>
The only difference between this code and the first is this is #432100 instead of #000000.
Complementary Colors
Now to make some variations, we will just ad 222222 to our code of #432100 to get #654322 so our code is:
<table style="font-weight: bold;">
<tbody>
<tr><td style="color: white; background-color: #432100;">#432100</td></tr>
<tr><td style="color: white; background-color: #654322;">#654322</td></tr>
</tbody>
</table>
And it looks like this…
Expanding From Dark To Light
So lets extend that some more to get this…
<table style="font-weight: bold;">
<tbody>
<tr><td style="color: white; background-color: #432100;">#432100</td></tr>
<tr><td style="color: white; background-color: #654322;">#654322</td></tr>
<tr><td style="color: white; background-color: #876544;">#876544</td></tr>
<tr><td style="background-color: #a98766;">#A98766</td></tr>
<tr><td style="background-color: #cba988;">#CBA988</td></tr>
<tr><td style="background-color: #edcbaa;">#EDCBAA</td></tr>
</tbody>
</table>
And that looks like this…
| #432100 |
| #654322 |
| #876544 |
| #A98766 |
| #CBA988 |
| #EDCBAA |
No Conflicts
You will notice that just by adding 222222 to any color that we get colors that go together. Just start with any color that had no number greater than 4. You could also add 111111 instead of 222222 and that would give you more colors to work with. Like this…
| #432100 |
| #543211 |
| #654322 |
| #765433 |
| #876544 |
| #987655 |
| #A98766 |
| #BA9877 |
| #CBA988 |
| #DCBA99 |
| #EDCBAA |
| #FEDCBB |
Here is the code for that last table…
<table style="font-weight: bold;">
<tbody>
<tr><td style="color: white; background-color: #432100;">#432100</td></tr>
<tr><td style="color: white; background-color: #543211;">#543211</td></tr>
<tr><td style="color: white; background-color: #654322;">#654322</td></tr>
<tr><td style="color: white; background-color: #765433;">#765433</td></tr>
<tr><td style="color: white; background-color: #876544;">#876544</td></tr>
<tr><td style="color: white; background-color: #987655;">#987655</td></tr>
<tr><td style="background-color: #a98766;">#A98766</td></tr>
<tr><td style="background-color: #ba9877;">#BA9877</td></tr>
<tr><td style="background-color: #cba988;">#CBA988</td></tr>
<tr><td style="background-color: #dcba99;">#DCBA99</td></tr>
<tr><td style="background-color: #edcbaa;">#EDCBAA</td></tr>
<tr><td style="background-color: #fedcbb;">#FEDCBB</td></tr>
</tbody>
</table>
The Final Step
This looks pretty good! Just pick your colors from this chart and you will have a website that looks really good!
The Real World
For this example I went and Picked a Starting Color, Baker’s Chocolate (bakerschocolate) #5C3317
This number has primary numbers and secondary numbers. Primary numbers are the odd position numbers, the 1st, 3rd and 5th numbers from the left. Secondary numbers are the even position numbers, the 2nd, 4th and 6th numbers from the left. Below, the red numbers are primary and the black numbers are secondary. Below is our bakers Baker’s Chocolate number with the primary numbers in red and the secondary numbers in black…
5C3317
The first thing I notice is my 1st primary number, 5, is more than 4 by 1, so I reduce ALL numbers by 1.
In case you are not always dealing with hex numbers:
| A |
= |
10 |
| B |
= |
11 |
| C |
= |
12 |
| D |
= |
13 |
| E |
= |
14 |
| F |
= |
15 |
Therefore, 5C3317 – 111111 = 4B2206
4B2206
We now have all our primary numbers less than 5 (0-4)!
We now look at the secondary numbers. We want them to be less than 6 (0-5)!
Now we see on our chart above that “B” = “11″. “B” is the largest of the secondary numbers. To make “B” a “5″ we must subtract 6. So we will subtract 6 from ALL Secondary numbers, but no less than zero (No negative numbers!).
B-6=5, 2-6=0, 6-6=0 – Notice that 2-6 is really equal to -4, but as was said, we stop at zero, no negative numbers! So we put these back in and we get…
452000
#452000
Our Chocolate Website
This color, #452000, should give us a Chocolate Brown that is just a bit darker that our original Baker’s Chocolate. Shall I call this Dark Chocolate? It looks like this…
| #5C3317 ~ Baker’s Chocolate |
| #452000 ~ Dark Chocolate |
Now #452000 is a good starting point for our table of adding 2′s to make our website colors!
Dark Chocolate Heaven
| #452000 |
| #674222 |
| #896444 |
| #AB8666 |
| #CDA888 |
| #EFCAAA |
Dark Chocolate at TuKōd.Com ( www.TuKod.com )
Side By Side
I realize this looks a lot like our chart above using #432100, so here they are, side by side…
| #452000 |
#432100 |
#420 |
#442200 |
| #674222 |
#654322 |
#642 |
#664422 |
| #896444 |
#876544 |
#864 |
#886644 |
| #AB8666 |
#A98766 |
#A86 |
#AA8866 |
| #CDA888 |
#CBA988 |
#CA8 |
#CCAA88 |
| #EFCAAA |
#EDCBAA |
#ECA |
#EECCAA |
All The Same
Now if you are looking at these four columns and think they all look the same, I agree!
- Column #452000 is our Dark Chocolate example above!
- Column #432100 is our first example, just counting backwards, 4,3,2,1,0, Zero! Can’t go lower than zero. This is our first example.
Primary Numbers
452000
432100
You will notice that they have the same primary number, 420. Well as it turns out, you can just use the primary numbers, like #420! Just add 222 instead of 222222 to get the lighter colors.
- Column #420 is using just the primary numbers in the Three Number Color Format! I just added 222 to lighten this number!
However, the browser doesn’t really use the Three Number Color Format directly. What it does is when it sees three numbers, it doubles them. Therefore #753 would be Exactly the same as #775533!
- Column #442200 Shows you the exact interpretation of the Three Number Color Format in Column #420! In other words Column #420 and Column #442200 are exactly the same colors!
The Point Is…
The Point Is… The Computers precision is much more exact that what most humans can actually see. So for basic website design, Don’t Sweat the Small Stuff!
Don’t Sweat the Small Stuff!
To Code @ Tu Kōd
I love writing Computer Code. In Nu English To Code is spelled Tu Kōd! Tu Kōdis so much fun, I think of it in terms of Dark Chocolate (85% Cacao Dark Chocolate is my Favorite!). So I decided to make the To Code at Tu Kōd ( www.TuKod.com ) into a nice Dark Chocolate site, so go there to see this in action.
Vegetation is Green
I have a website for Vegarians. A Vegarian is a person who loves the Symbiont Circle of life we share with Vegetation. They usually eat about +95% of their food as plants. But where as a Vegetarian may be focused on animal welfare (not eating flesh), or a Vegan’s focus is on an animal rights (not using any animal products like eggs, dairy, fur or leather), a Vegarian’s focus is on Vegetation and the good health we get from them!
Anyway, what could be better for a website like this than Green. So for that website I started with a nice Green #224400 and made this table of colors…
| #224400 |
| #446622 |
| #668844 |
| #88AA66 |
| #AACC88 |
| #CCEEAA |
Dollar Bill Green
Likewise I give advise to a website called Money Making Entrepreneur ( www.MoneyMakingEntrepreneur.E143.Net ). It is about people who want to use a website to earn a Money Making Income. An Entrepreneur is a person who start a business in order to make money and usually other reasons as well. What better color to start with than Dollar Bill Green!
Dollar Bill Green is #85bb65 so this time I made it the middle number. Adding and subtraction 222222 to get this table…
| #205500 |
| #417721 |
| #639943 |
| #85BB65 |
| #A7DD87 |
| #C9FFA9 |
Side By Side Green
Let’s take a look at Vegarian Green and Dollar Bill Green, side by side…
| Vegarian |
Dollar Bill |
| #224400 |
#205500 |
| #446622 |
#417721 |
| #668844 |
#639943 |
| #88AA66 |
#85BB65 |
| #AACC88 |
#A7DD87 |
| #CCEEAA |
#C9FFA9 |
Vegarian Green at Vegarian ( www.Vegarian.org ).
Dollar Bill Green at Money Making Entrepreneur ( www.MoneyMakingEntrepreneur.E143.Net ).
Recent Comments