Generating HTML Color Tables with BASH Script

BASH，Linux，Tutorial

用 BASH 指令產生 HTML 色表


【摘要】一個簡短的 BASH 程式，所輸出的 HTML 檔是一指定背景色的顏色表格，當編輯佈景、樣式或 CSS 檔時可做為設定顏色的參考。


【目錄】

    【前言】
    【使用方法】
    【指令檔】
    【後語】

【前言】

一、在編輯佈景樣式時，都會牽扯到顏色的設定；尤其是程式碼的 highlight 需要在不同的背景色下選用多種顏色，所以最好能有色表參考。

二、以下所述的 BASH 指令可以產生 HTML 碼，在指定的一種背景色上顯示七百餘種前景色，應該足以讓人找到清晰可用的顏色。

三、約兩年半前，本文曾在 Google 的 Blogger 發表過，近日修改內容，分享於此。

四、範例圖是由多個背景色組合成的

demo-image

【使用方法】

將【指令檔】一節的內容存成 color-table-html.sh，執行：

bash color-table-html.sh 背景色

  背景色：網頁背景顏色；只接受十六進位色碼，不包含井字號，如：ffffff

這會將結果顯示在虛擬終端機。若要存檔，請導向至檔案如：

bash color-table-html.sh 背景色 > color-table.html

【指令檔】

#!/bin/bash
 # 用 HTML 建立色表
 
 # 檢查是否有給背景色，若無，即中止
if [ -z "${1}" ]; then
  echo
  echo "  Usage:"
  echo "    bash  ${0##*/}  <Background-Color>"
  echo
  echo "  You have to specify a color in hexadecimal notation without the leading #."
  echo
  exit
fi
 
 # 前景色的成分碼
HX="ff e0 c0 a0 80 60 40 20 00"
 
 # HTML 檔頭
echo -e '<!DOCTYPE html>'\\n\
'<html>'\\n\
'<head>'\\n\
'  <title>Background Color: #'${1}'</title>'\\n\
'  <meta charset="UTF-8">'\\n\
'  <style>'\\n\
'    body {'\\n\
'      background-color: #'${1}';'\\n\
'      font: Monosapce;'\\n\
'    }'\\n\
'    td {'\\n\
'      font-size: 18px;'\\n\
'      padding: 0px 7px;'\\n\
'    }'\\n\
'  </style>'\\n\
'</head>'\\n\
'<body>'\\n\
'  <h2 style="background: white; color: black;">&nbsp;&nbsp;Background Color: #'${1}'</h2>'\\n\
'  <table>'
 
 # 表格
for i in $HX
do
  for j in $HX
  do
    echo '    <tr>'
    for k in $HX
    do
      echo '      <td style="color: #'$i$j$k'">#'$i$j$k'</td>'
    done
    echo '    </tr>'
  done
done
 
 # HTML 檔尾
echo -e '  </table>'\\n\
'</body>'\\n\
'</html>'
 
exit

【後語】

一、如果想一次製作多個色表，可用以下指令：

HX="ffe0c0 a08060 402000"
for i in ${HX}
do
  bash color-table-html.sh ${i} > HX${i}.html
  sleep 1
done

請先修改 HX 變數值成自己想要做的十六進位顏色碼（不含 # 號，以空格分開各值）。


二、除了本文所敘述的用 HTML 建立色表的網頁外，也可以用 ImageMagick 製作色表圖檔，詳情請見下一篇網誌。


已發表

發表留言