阿亮的家

雖然色碼表可隨時上網查,但自己來寫一個吧!

只用RGB各1碼就好,這樣就有16*16*16=4096的顏色了,

先以html的語法寫了幾行,大概是這樣

 <table>
      <tr>
         <td width=40 height=25 bgColor=#004></td>
         <td width=40 height=25>#004</td>   
         <td width=40 height=25 bgColor=#00c></td>
         <td width=40 height=25>#00c</td>   
      </tr> 
   </table>

加入CSS

td{
   width: 3%;
   height: 20px;   
}

html 

 <table>
      <tr>
         <td bgColor=#004></td>
         <td>#004</td>   
         <td bgColor=#00c></td>
         <td>#00c</td>   
      </tr> 
   </table>

在將html改成javascript,red跟green間隔3,blue間隔1

   <table>
   <script>
      for (color_r=0; color_r<16 ; color_r+=3){
         for (color_g=0; color_g<16 ; color_g+=3){
            document.write("<tr>");
            for (color_b=0; color_b<16 ; color_b+=1){
               color_rgb = color_r.toString(16)+color_g.toString(16)+color_b.toString(16);
               document.write('<td bgColor=#'+color_rgb+'>');
               document.write("</td>");
               document.write("<td>");
               document.write('#'+color_rgb);
               document.write("</td>");
            }      
            document.write("</tr>");
         }      
      }
   </script>   
   </table>

當然,目前語法並不熟悉,所以還是都要問google大師(比翻書快,又能查的到),

如: javascript轉16進位,就可查到 .toString(16)

這裡有一個地方不甚了解,tbale中width瀏覽器的處理方式,

可以看到顏色跟數值的寬度是不一樣的,但是設的都是3%,

也就是瀏覽器自己會去調整寬度,以後再研究. 

rgba(),即rgb()再增加一個不透明度的參數alpha 值,1表示完全不透明,0表示完全透明

或可以在rgb(),後在設定transparent()的透明度參數

hsla() : 不用rgb()也可以考慮用hsla() ,好處是可以以飽和度跟亮度值下去思考。

hue 值 (色相值) 0 或 360 →紅色， 60 →黃色， 120 →綠色， 240 →藍色，就好像彩虹色繞成一個圓。
saturation 值 (飽和度值)  0% ~ 100% 的百分比值， 0% →灰色調， 100% →最大飽和度。所以 0% 時，不論 hue 值是多少，都會以灰階單色呈現。
lightness 值 (亮度值)0% ~100%的百分比值，0%→最暗(暗黑)，100%→最亮(亮白)，50%→正常亮度。50% 以上漸漸增加白色，50% 以下漸漸增加黑色。
alpha 值 (alphavalue) 0.0 ~ 1.0 允許小數一位的數值。