<html> <head> <title>CSS Color Chart</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> body { background-color: rgb(60%,60%,60%); color: rgb(0%,0%,0%); } h1, h2{ color: rgb(80%80%80%) } th{ background-color: rgb(65%65%65%) }
</style> </head> <body> <div align="center"> <h1>"Browser-Safe" Color Mixing Chart</h1> <h2>Gray Scale</h2> <table> <tr> <th>0% Red, Green, Blue</th> <th>20% Red, Green, Blue</th> <th>40% Red, Green, Blue</th> <th>60% Red, Green, Blue</th> <th>80% Red, Green, Blue</th> <th>100% Red, Green, Blue</th> </tr>
<tr><!-- Row 1 --> <td style="background-color: rgb(0%0%0%)">?/td> <!-- Col 1 --> <td style="background-color: rgb(20%20%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%40%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%60%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%80%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%100%100%)">?/td> <!-- Col 6 --> </tr> </table>
<br>
<h2>Pure Colors</h2>
<table border="1" cellpadding="15" width="90%"> <tr> <th>Color</th> <th>20%</th> <th>40%</th> <th>60%</th> <th>80%</th> <th>100%</th> </tr>
<tr><!-- Row 2 --> <th>Pure Red</th> <td style="background-color: rgb(20%0%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%0%0%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%0%0%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%0%0%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%0%0%)">?/td> <!-- Col 6 --> </tr>
<tr><!-- Row 3 --> <th>Pure Green</th> <td style="background-color: rgb(0%20%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(0%40%0%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(0%60%0%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(0%80%0%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(0%100%0%)">?/td> <!-- Col 6 --> </tr>
<tr><!-- Row 4 --> <th>Pure Blue</th> <!-- Col 1 --> <td style="background-color: rgb(0%0%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(0%0%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(0%0%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(0%0%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(0%0%100%)">?/td> <!-- Col 6 --> </tr> </table>
<br>
<h2>Mixture of Red and Green</h2>
<br> <table border="3" cellpadding="15" width="90%"> <tr> <th>Color Mixture</th> <th>0% Red</th> <th>20% Red</th> <th>40% Red</th> <th>60% Red</th> <th>80% Red</th> <th>100% Red</th> </tr>
<tr> <th>0% Green</th> <td style="background-color: rgb(0%0%0%)">?/td> <!-- Col 1 --> <td style="background-color: rgb(20%0%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%0%0%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%0%0%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%0%0%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%0%0%)">?/td> <!-- Col 6 --> </tr>
<tr><!-- Row 6 --> <th>20% Green</th> <td style="background-color: rgb(0%20%0%)">?/td> <!-- Col 1 --> <td style="background-color: rgb(20%20%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%20%0%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%20%0%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%20%0%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%20%0%)">?/td> <!-- Col 6 --> </tr>
<tr><!-- Row 6 --> <th>40% Green</th> <td style="background-color: rgb(0%40%0%)">?/td> <!-- Col 1 --> <td style="background-color: rgb(20%40%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%40%0%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%40%0%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%40%0%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%40%0%)">?/td> <!-- Col 6 --> </tr>
<tr><!-- Row 6 --> <th>60% Green</th> <td style="background-color: rgb(0%60%0%)">?/td> <!-- Col 1 --> <td style="background-color: rgb(20%60%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%60%0%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%60%0%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%60%0%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%60%0%)">?/td> <!-- Col 6 --> </tr>
<tr><!-- Row 6 --> <th>80% Green</th> <td style="background-color: rgb(0%80%0%)">?/td> <!-- Col 1 --> <td style="background-color: rgb(20%80%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%80%0%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%80%0%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%80%0%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%80%0%)">?/td> <!-- Col 6 --> </tr>
<tr><!-- Row 6 --> <th>100% Green</th> <td style="background-color: rgb(0%100%0%)">?/td> <!-- Col 1 --> <td style="background-color: rgb(20%100%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%100%0%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%100%0%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%100%0%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%100%0%)">?/td> <!-- Col 6 --> </tr> </table>
<br> <!--Table # Blue and Red Mixtures-->
<table width="90%" cellpadding="15" border="1"> <caption><b>Mixtures of Blue and Red</b></caption>
<tr> <th>Color Mixture</th> <th>0% Red</th> <th>20% Red</th> <th>40% Red</th> <th>60% Red</th> <th>80% Red</th> <th>100% Red</th> </tr>
<tr> <th>0% Blue</th> <td style="background-color: rgb(00%00%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(20%00%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%00%0%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%00%0%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%00%0%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%00%0%)">?/td> <!-- Col 6 --> </tr>
<tr><!-- Row 1 --> <th>20% Blue</th> <td style="background-color: rgb(00%00%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(20%00%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%00%20%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%00%20%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%00%20%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%00%20%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>40% Blue</th> <td style="background-color: rgb(00%00%40%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(20%00%40%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%00%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%00%40%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%00%40%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%00%40%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>60% Blue</th> <td style="background-color: rgb(00%00%60%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(20%00%60%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%00%60%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%00%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%00%60%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%00%60%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>80% Blue</th> <td style="background-color: rgb(00%00%80%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(20%00%80%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%00%80%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%00%80%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%00%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%00%80%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>100% Blue</th> <td style="background-color: rgb(00%00%100%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(20%00%100%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%00%100%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%00%100%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%00%100%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%00%100%)">?/td> <!-- Col 6 --> </tr> </table>
<table width="90%" cellpadding="15" border="1"> <caption><b>Mixtures of Blue and Green</b></caption>
<tr> <th>Color Mixture</th> <th>0% Green</th> <th>20% Green</th> <th>40% Green</th> <th>60% Green</th> <th>80% Green</th> <th>100% Green</th> </tr>
<tr> <th>0% Blue</th> <td style="background-color: rgb(0%00%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(0%20%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(0%40%0%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(0%60%0%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(0%80%0%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(0%100%0%)">?/td> <!-- Col 6 --> </tr>
<tr><!-- Row 1 --> <th>20% Blue</th> <td style="background-color: rgb(00%00%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb( 0%20%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb( 0%40%20%)">?/td> <!-- Col 3 --> <td style="background-color: rgb( 0%60%20%)">?/td> <!-- Col 4 --> <td style="background-color: rgb( 0%80%20%)">?/td> <!-- Col 5 --> <td style="background-color: rgb( 0%100%20%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>40% Blue</th> <td style="background-color: rgb(00%00%40%)">?/td> <!-- Col 2 --> <td style="background-color: rgb( 0%20%40%)">?/td> <!-- Col 2 --> <td style="background-color: rgb( 0%40%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb( 0%60%40%)">?/td> <!-- Col 4 --> <td style="background-color: rgb( 0%80%40%)">?/td> <!-- Col 5 --> <td style="background-color: rgb( 0%100%40%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>60% Blue</th> <td style="background-color: rgb(00%00%60%)">?/td> <!-- Col 2 --> <td style="background-color: rgb( 0%20%60%)">?/td> <!-- Col 2 --> <td style="background-color: rgb( 0%40%60%)">?/td> <!-- Col 3 --> <td style="background-color: rgb( 0%60%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb( 0%80%60%)">?/td> <!-- Col 5 --> <td style="background-color: rgb( 0%100%60%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>80% Blue</th> <td style="background-color: rgb(00%00%80%)">?/td> <!-- Col 2 --> <td style="background-color: rgb( 0%20%80%)">?/td> <!-- Col 2 --> <td style="background-color: rgb( 0%40%80%)">?/td> <!-- Col 3 --> <td style="background-color: rgb( 0%60%80%)">?/td> <!-- Col 4 --> <td style="background-color: rgb( 0%80%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb( 0%100%80%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>100%Blue</th> <td style="background-color: rgb(00%00%100%)">?/td> <!-- Col 2 --> <td style="background-color: rgb( 0%20%100%)">?/td> <!-- Col 2 --> <td style="background-color: rgb( 0%40%100%)">?/td> <!-- Col 3 --> <td style="background-color: rgb( 0%60%100%)">?/td> <!-- Col 4 --> <td style="background-color: rgb( 0%80%100%)">?/td> <!-- Col 5 --> <td style="background-color: rgb( 0%100%100%)">?/td> <!-- Col 6 --> </tr> </table>
<!--Table # Red, Blue, and Green Mixtures--> <table width="90%" cellpadding="15" border="1"> <caption><b>Mixtures of Red, Blue, and Green</b></caption>
<tr><!-- Row 1 --> </tr>
<tr> <th>Color Mixture</th> <th>0% Green</th> <th>20% Green</th> <th>40% Green</th> <th>60% Green</th> <th>80% Green</th> <th>100% Green</th> </tr>
<tr> <th>20% Red + 20% Blue</th> <td style="background-color: rgb(20%00%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(20%20%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(20%40%20%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(20%60%20%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(20%80%20%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(20%100%20%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>40% Red + 40% Blue</th> <td style="background-color: rgb(40%00%40%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%20%40%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%40%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(40%60%40%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(40%80%40%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(40%100%40%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>60% Red + 60% Blue</th> <td style="background-color: rgb(60%00%60%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(60%20%60%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(60%40%60%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%60%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(60%80%60%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(60%100%60%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>80% Red + 80% Blue</th> <td style="background-color: rgb(80%00%80%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(80%20%80%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(80%40%80%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(80%60%80%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%80%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(80%100%80%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>100% Red + 100% Blue</th> <td style="background-color: rgb(100%00%100%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(100%20%100%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(100%40%100%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(100%60%100%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(100%80%100%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%100%100%)">?/td> <!-- Col 6 --> </tr> </table>
<!--Table # Red, Blue, and Green Mixtures--> <table width="90%" cellpadding="15" border="1"> <caption><b>Mixtures of Red, Blue, and Green</b></caption>
<tr><!-- Row 1 --> </tr>
<tr> <th>Color Mixture</th> <th>0% Blue</th> <th>20% Blue</th> <th>40% Blue</th> <th>60% Blue</th> <th>80% Blue</th> <th>100% Blue</th> </tr>
<tr> <th>0% Red + 0% Green</th> <td style="background-color: rgb(0%00%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(0%0%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(0%0%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(0%0%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(0%0%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(0%0%100%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>20% Red + 20% Green</th> <td style="background-color: rgb(20%20%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(20%20%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(20%20%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(20%20%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(20%20%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(20%20%100%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>40% Red + 40% Green</th> <td style="background-color: rgb(40%40%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%40%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(40%40%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(40%40%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(40%40%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(40%40%100%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>60% Red + 60% Green</th> <td style="background-color: rgb(60%60%00%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(60%60%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(60%60%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(60%60%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(60%60%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(60%60%100%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>80% Red + 80% Green</th> <td style="background-color: rgb(80%80%0%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(80%80%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(80%80%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(80%80%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(80%80%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(80%80%100%)">?/td> <!-- Col 6 --> </tr>
<tr> <th>100% Red + 100% Green</th> <td style="background-color: rgb(100% 100%00%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(100%100%20%)">?/td> <!-- Col 2 --> <td style="background-color: rgb(100%100%40%)">?/td> <!-- Col 3 --> <td style="background-color: rgb(100%100%60%)">?/td> <!-- Col 4 --> <td style="background-color: rgb(100%100%80%)">?/td> <!-- Col 5 --> <td style="background-color: rgb(100%100%100%)">?/td> <!-- Col 6 --> </tr> </table> </div> </body> </html>
|