【App Inventor 2 - 色碼表】

環境： Chrome + App Inventor 2

三種原色光，每種飽和度不同，可以組合各種顏色的光，RGB及HEX即是網站設計顏色常用的兩種模式。

運用App Inventor中的元件，便能立即分辨出顏色的R(紅色)、G(綠色)、B(藍色)，並能很快的轉製成十六進位制的HEX，方便在進行網頁設計或在工作取得所需的色碼編號，無須長篇幅的程式撰寫。

執行方式：
一、 點選色碼表中的某一個顏色，將解析出此顏色的R、G、B值，最後並可延伸至HEX的轉換。
  • RGB：顏色以表示為三個從0到255的數字(RGB 十進位制)
  • HEX：顏色以表示為三個從00到FF的數字(HEX 十六進位制)
二、 首先進行畫面的元件配置，將畫布Canvas元件套用一張色碼表的圖片，呈現如下圖所示。

畫面呈現：
三、 進行程式撰寫，於畫布Canvas上放置一個球（Ball元件），透過解讀此顆球元件的ｘ、ｙ軸，可得知目前球元件的所在位置。

程式撰寫：
四、 利用「顏色」工具中的「分解色值」，將取得目前球元件是位於什麼畫布中的什麼位置，並取得球元件位置的顏色，RGB之表示方式為(R,G,B)，第1個索引鍵為紅色R，以此類推，第2個索引鍵為綠色G、第3個索引鍵為藍色B；再將取得的值以標籤（Label）元件呈現於畫面上。

程式撰寫：(以紅色為例)

畫面呈現：
【延伸學習】
  1. 取得RGB數值後，便可利用十進位與十六進位之轉換，轉為HEX色碼格式。
  2. HEX色碼格式： # 00
    紅     00
    綠     00
    藍
  3. 設置名為r1的變數，其變數值的內容，即是將紅色數值轉為十六進位。(以紅色為例)
  4. 因為HEX每一個顏色長度固定為兩碼，判斷如果長度只有1，則於前方補上0。

  5. 分別完成紅、綠、藍三色之轉製，最後再合併三個字串。

  6. 可依據所取的顏色再次合成，修改HEX的背景顏色，讓使用者立即辨示所選擇的顏色及其色碼。
以上是關於「App Inventor 2 - 色碼表」的說明，這麼實用的小撇步，您一定要學會喔！

- 回376期電子報主頁 -
財團法人中華民國電腦技能基金會版權所有，未經確認授權，嚴禁轉貼節錄
 TEL：02-2577-8806 ‧ FAX：02-2577-8135 服務信箱： [email protected]