HTML Color Progession

Hello Expert,

Have been using a progression of HTML color codes to
create a gradient in a  table, copied below.

At the bottom of the code the progression
is going
B      0      C      4      0      2
B      0      C      4      0      1
B      0      C      4      0      0

It seems like the next number, because the progression is
descending, the fourth number
(from the right) would decrement to 3 and the
fifth and six numbers would become the highest 'numbers'
available which is F. So the next number
should be
BOC3FF
But this breaks the progression of colors
displayed because BOC3FF is a light blue and
B0C400
is yellow-green.
Where is the flaw in this logic?

Thanks.

Allen in Dallas




 <tr>
                 <td bgcolor="#b0c431"><a href="#" target="new">&nbsp;</a></td>
                 <td bgcolor="#b0c430"><a href="#" target="new">&nbsp;</a></td>
                 <td bgcolor="#b0c42f"><a href="#" target="new">&nbsp;</a></td>
 </tr>

  <tr>
                  <td bgcolor="#b0c42e"><a href="#" target="new">&nbsp;</a></td>
                  <td bgcolor="#b0c42d"><a href="#" target="new">&nbsp;</a></td>
                  <td bgcolor="#b0c42c"><a href="#" target="new">&nbsp;</a></td>
 </tr>

 <tr>
                   <td bgcolor="#b0c42b"><a href="#" target="new">&nbsp;</a></td>
                   <td bgcolor="#b0c42a"><a href="#" target="new">&nbsp;</a></td>
                   <td bgcolor="#b0c429"><a href="#" target="new">&nbsp;</a></td>
 </tr>

 <tr>
                   <td bgcolor="#b0c428"><a href="#" target="new">&nbsp;</a></td>
                   <td bgcolor="#b0c427"><a href="#" target="new">&nbsp;</a></td>
                   <td bgcolor="#b0c426"><a href="#" target="new">&nbsp;</a></td>
 </tr>
  <tr>
                    <td bgcolor="#b0c425"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c424"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c423"><a href="#" target="new">&nbsp;</a></td>
 </tr>

  <tr>
                    <td bgcolor="#b0c422"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c421"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c420"><a href="#" target="new">&nbsp;</a></td>
 </tr>

  <tr>
                    <td bgcolor="#b0c41f"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c41e"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c41d"><a href="#" target="new">&nbsp;</a></td>
 </tr>

  <tr>
                    <td bgcolor="#b0c41c"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c41b"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c41a"><a href="#" target="new">&nbsp;</a></td>
 </tr>

  <tr>
                    <td bgcolor="#b0c419"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c418"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c417"><a href="#" target="new">&nbsp;</a></td>
 </tr>

  <tr>
                    <td bgcolor="#b0c416"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c415"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c414"><a href="#" target="new">&nbsp;</a></td>
 </tr>

  <tr>
                    <td bgcolor="#b0c413"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c412"><a href="#" target="new">&nbsp;</a></td>
                    <td bgcolor="#b0c411"><a href="#" target="new">&nbsp;</a></td>
 </tr>

 <tr>
                     <td bgcolor="#b0c410"><a href="#" target="new">&nbsp;</a></td>
                     <td bgcolor="#b0c40f"><a href="#" target="new">&nbsp;</a></td>
                     <td bgcolor="#b0c40e"><a href="#" target="new">&nbsp;</a></td>
 </tr>

 <tr>
                     <td bgcolor="#b0c41d"><a href="#" target="new">&nbsp;</a></td>
                     <td bgcolor="#b0c40c"><a href="#" target="new">&nbsp;</a></td>
                     <td bgcolor="#b0c40b"><a href="#" target="new">&nbsp;</a></td>
 </tr>
 <tr>
                     <td bgcolor="#b0c40a"><a href="#" target="new">&nbsp;</a></td>
                     <td bgcolor="#b0c409"><a href="#" target="new">&nbsp;</a></td>
                     <td bgcolor="#b0c408"><a href="#" target="new">&nbsp;</a></td>
 </tr>
  <tr>
                      <td bgcolor="#b0c407"><a href="#" target="new">&nbsp;</a></td>
                      <td bgcolor="#b0c406"><a href="#" target="new">&nbsp;</a></td>
                      <td bgcolor="#b0c405"><a href="#" target="new">&nbsp;</a></td>
 </tr>

  <tr>
                      <td bgcolor="#b0c404"><a href="#" target="new">&nbsp;</a></td>
                      <td bgcolor="#b0c403"><a href="#" target="new">&nbsp;</a></td>
                      <td bgcolor="#b0c402"><a href="#" target="new">&nbsp;</a></td>
 </tr>

 <tr>
                      <td bgcolor="#b0c401"><a href="#" target="new">&nbsp;</a></td>
                      <td bgcolor="#b0c400"><a href="#" target="new">&nbsp;</a></td>
                      <td bgcolor="#b0c3ff"><a href="#" target="new">&nbsp;</a></td>
 </tr>

 <tr>
                       <td bgcolor="#b0c3fe"><a href="#" target="new">&nbsp;</a></td>
                       <td bgcolor="#b0c3fd"><a href="#" target="new">&nbsp;</a></td>
                       <td bgcolor="#b0c3fc"><a href="#" target="new">&nbsp;</a></td>

Open in new window

LVL 1
Allen PittsBusiness analystAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterSenior Software DeveloperCommented:
You're using RGB values. The first 2 are Red, the 2nd pair is Green, and the last is Blue.

If you want to use color progression like you suggest you need to use HSL values

Either that or you need to break out the value pairs.

Indeed 0xB0C3FF + 0x000001 = 0xB0C400 but what you've done is changed the Blue value of FF to 00 so you've gone from maximum blue to minimum blue.

Take a look here for a list of acceptable color values and how they work:

http://www.w3schools.com/cssref/css_colors_legal.asp

If you want to go from light to dark you'd change the saturation value (0% to 100%). Going from bold to pale (color fading out) you'd change the lightness value (0% to 100%). If you want the colors to sweep the spectrum you'd change the hue value (0 - 255).

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.