自己對顏色沒有特別的主見或想法，網頁要用什麼顏色的議題，每次都要重頭開始作無效率的考量，而看到了這個 http://www.web-source.net/216_color_chart.htm 裡面的 Web-safe colors，中文算是 216 網頁安全色 ：

才覺得選顏色可以有一些範圍做依據。安全色表也實在是愈看愈有趣，所以也想畫出相同的安全色表來試試。
雖然純粹好玩，但在建立的過程，才粗略發現以十六進位和RGB值的作用和關係，進而作為日後選取隨機顏色的依據。
簡單觀察及初步實作
觀察 216 色的16進位碼，只有是用 0, 3, 6, 9, C, F 所組成的，所以只要利用任何程式語言，可以寫出九九乘法表的基礎，就可以將這 216 種的組合給排列出來了；九九乘法表是用兩層迴圈，此色表是三層迴圈；在此直接 編輯一個 app/views/demo/color.html.erb 不需編寫 controller 中的 action 即可出現在 http://SITE/demo/color 之中。

<h3>網頁216安全色列表</h3>
<!-- 將所觀察到會用到的字元成一陣列 -->
<% a = %w[ F C 9 6 3 0 ] -%>
 <% a.each do |rr| -%>
   <table>
   <% a.each do |gg| -%>
     <tr>
     <% a.each do |bb| -%>
       <% code = rr + rr + gg + gg + bb + bb -%>
	   <!-- 將兩兩字元，分別設成 r, g, b 的值，regular expression 的基本用法，只會用不大會說明 -->
       <% if code =~ /(\S\S)(\S\S)(\S\S)/ -%>
          <% r = $1 -%>
          <% g = $2 -%>
          <% b = $3 -%>
		  <!-- 將 rgb 各值轉成 16 進位碼，再轉成字串 -->
          <% rgb = 'R=' + r.hex.to_s + '<br />' + 'G=' + g.hex.to_s + '<br />' + 'B=' + b.hex.to_s + '<br />' -%>
       <% end -%>
       <td bgcolor="#<%= code -%>">
          #<%= rr -%><%= rr -%><%= gg -%><%= gg -%><%= bb -%><%= bb -%><br />
          <%= rgb -%>
       </td>
     <% end -%>
     </tr>
   <% end -%>
   </table>
 <% end -%>

比照一下所畫出來的表，與網路上的色表有什麼差別，

將這初步的結果放在 http://alpha.tagbible.net/demo/color2。

改良顯示的方式
發現愈後面數字愈近 0 的值背景顏色就愈深(或說愈接近每個 table 的右下角顏色愈深)，字又是黑的，就看不出那一格的文字；再觀察網路上的色表，每一個 table 的第三行後，字就是變白色了，也就是當 G 值是 0, 3, 6 的時候，把字形變白，就可以讓字的顏色變白色，那時候底卻是深色，而形成對比了。

另外要改良的是，一個一個table接下來，太長了，所以希望各個 table 兩兩並排，這樣就比較可以一目瞭然，才不會看後面忘前面的顏色了，再將以上的碼，加上一些 CSS 的簡單佈局方式修改成：

<h3>網頁216安全色列表</h3>
<% a = %w[ F C 9 6 3 0 ] -%>
 <% a.each do |rr| -%>
   <!-- 讓 table 輪替在 左右 出現 -->
   <div class="<%= cycle('left', 'right') -%>">
   <table>
   <% a.each do |gg| -%>
     <tr>
     <% a.each do |bb| -%>
       <% code = rr + rr + gg + gg + bb + bb -%>
       <% if code =~ /(\S\S)(\S\S)(\S\S)/ -%>
          <% r = $1 -%>
          <% g = $2 -%>
          <% b = $3 -%>
          <% rgb = 'R=' + r.hex.to_s + '<br />' + 'G=' + g.hex.to_s + '<br />' + 'B=' + b.hex.to_s + '<br />' -%>
       <% end -%>
       <td bgcolor="#<%= code -%>">
          <!-- 若 G 值是 0, 3, 6 則使字變白色 -->
          <% if gg =~ /[036]/ -%>
            <font color="white">
            #<%= rr -%><%= rr -%><%= gg -%><%= gg -%><%= bb -%><%= bb -%><br />
            <%= rgb -%>
            </font>
          <% else -%>
            #<%= rr -%><%= rr -%><%= gg -%><%= gg -%><%= bb -%><%= bb -%><br />
            <%= rgb -%>
          <% end -%>
       </td>
     <% end -%>
     </tr>
   <% end -%>
   </table>
   </div>
 <% end -%>

有關 左右 的 CSS 碼：

.right {
float: left;
margin-left: 4px;
margin-bottom: 20px;
border: #ccc solid 1px;
}

.left {
float: left;
margin-left: 40px;
margin-bottom: 20px;
border: #ccc solid 1px;
}

就可以兩兩顯示，而圖示是把該網頁的字型再縮小所呈獻的畫面：

結果放在http://alpha.tagbible.net/demo/color可作參考。

這個色碼表是程式基本語法，再加一點 html table 的集中注意力的練習，主要能對清楚 tr, td, if 的位置就成形了；而其他任何程式語言也可以如此實作，算是個有趣的練習吧！並且做為接下來將處理幾個 RoR 在圖型上的議題之序幕。