══════════════════════════════════════金◎《鳴蟬ASCII Art入門 卷四》 色 彩 繽 紛
════════════════════════════════2004.07.19═
Outline:Ⅰ顏色碼 Ⅱ ASCII色盤 Ⅲ 配色理論 Ⅳ 色碼精簡 Origin from: Tolo Note
◤──────╮
│Ⅰ 顏 色 碼 │
╰──────╯
目前我們已經可以利用許多ASCII特殊符號，堆砌出各式各樣的文字與圖形，
不過，這還是不夠的，若要讓它們變得更漂亮，必須學會如何替它們上色。
著色前：
◇── ──◇
│ │
│ ◢ ︿︿ │
◥◣ ▋ ◢◤ ︿︿
◥◣ ▋◢◤┐┐┌┐┐┌ ┬ ┌┬┐
◥◣▊◤ ＼ │ ││ │ │││
╳ └└ ┴ └┘ ┴ ┘ └
◢▉◥◣ ┐ ┐
◢◤▉ ◥◣ ── │ │
◢◤ ▉ ◥◣ ┴ ┴
◤ █ ▍ ／
█◢██◣ ● ／
│ █ ██▊ ＼／ │
│ █ ██▊ 台大資管11屆班板 │
◇── ──◇
著色後：
◇── ──◇
│ │
│ ◢ ︿︿ │
◥◣ ▋ ◢◤ ︿︿
◥◣ ▋◢◤┐┐┌┐┐┌ ┬ ┌┬┐
◥◣▊◤ ＼ │ ││ │ │││
╳ └└ ┴ └┘ ┴ ┘ └
◢▉◥◣ ┐ ┐
◢◤▉ ◥◣ ── │ │
◢◤ ▉ ◥◣ ┴ ┴
◤ █ ▍ ／
█◢██◣ ● ／
│ █ ██▊ ＼／ │
│ █ ██▊ 台大資管11屆班板 │
◇── ──◇
如何！加上顏色感覺完全不一樣了，對吧！ :)
那要怎麼上色呢？我們使用的工具叫做：顏色碼。
它的形式大概是：〔 *[1;36mcyan*[m 〕；然後會有這樣的效果：〔 cyan 〕。
◆ ASCII核心顏色碼：〔 *[m 〕
請注意，這個 *[m 並不是直接敲〔Shift + 8〕、〔[〕與〔m〕出現的，
而是用〔Ctrl + c〕產生。按了〔Ctrl + c〕，就會出現 *[m 這樣的零件。
// 大部分的BBS站都是如此，包括鳴蟬小站與批踢踢實業坊。
記得，在 *[m 右邊的文字，會受到該 *[m 所下的指令影響。
§例如：*[m影響區域（一直延伸） →→
現在，以step by step的方式，實地操作一次簡單的顏色碼：
執行動作 螢幕所見的結果
(1) 鍵入欲實驗的文字 highlight ordinary
(2) 在highlight前後各按一次〔Ctrl + c〕 *[mhighlight*[m ordinary
(3) 在前面的*[m中，多加數字1，擺在[與m之間 *[1mhighlight*[m ordinary
(4) 請按〔Ctrl + v〕檢驗結果 highlight ordinary
有沒有發現highlight一字變亮了？
當文章貼出去之後，別人所看到的，是(4)的結果，
也就是按下〔Ctrl + v〕切換模式之後看到的畫面。
同樣地，再按一次〔Ctrl + v〕，會切換回(3)所看到的樣子。
一般人在編輯文章的時候，都是在(3)的模式下編輯，
需要檢查顏色碼效果的時候，才用〔Ctrl + v〕暫時切換閱讀模式。
很簡單吧～這就是顏色碼的運作方式，前面的 *[1m 讓它右邊的文字變亮，
而後面的 *[m 則讓它右邊的文字恢復原來的亮度。
◤──────╮
│Ⅱ ASCII色盤│
╰──────╯
之前在 *[m 填入的1代表高亮度的意思，其他指令也遵循類似的模式。
◆ 特殊性質指令
┌─────────────────────┐
│指令 功能 原始碼 呈現效果 │
├─────────────────────┤
│ 0 無效果 *[0m文字★*[m 文字★ │ // 預設值：無效果
│ 1 高亮度 *[1m文字★*[m 文字★ │
│ 4 底線 *[4m文字★*[m 文字★ │ // 有些軟體不支援
│ 5 閃爍 *[5m文字★*[m 文字★ │
│ 7 反白 *[7m文字★*[m 文字★ │
│ 8 黑字 *[8m文字★*[m 文字★ │
└─────────────────────┘
◆ 前景顏色指令
┌─────────────────────┐
│指令 前景顏色 原始碼 呈現效果 │
├─────────────────────┤
│ 30 黑色 *[30m文字★*[m 文字★ │
│ 31 紅棕色 *[31m文字★*[m 文字★ │
│ 32 墨綠色 *[32m文字★*[m 文字★ │
│ 33 土黃色 *[33m文字★*[m 文字★ │
│ 34 靛色 *[34m文字★*[m 文字★ │
│ 35 深紫色 *[35m文字★*[m 文字★ │
│ 36 暗青色 *[36m文字★*[m 文字★ │
│ 37 白色 *[37m文字★*[m 文字★ │ // 預設值；白字
└─────────────────────┘
◆ 背景顏色指令
┌─────────────────────┐
│指令 背景顏色 原始碼 呈現效果 │
├─────────────────────┤
│ 40 黑色 *[40m文字★*[m 文字★ │ // 預設值；黑底
│ 41 紅棕色 *[41m文字★*[m 文字★ │
│ 42 翠綠色 *[42m文字★*[m 文字★ │
│ 43 土黃色 *[43m文字★*[m 文字★ │
│ 44 藍色 *[44m文字★*[m 文字★ │
│ 45 紫色 *[45m文字★*[m 文字★ │
│ 46 青色 *[46m文字★*[m 文字★ │
│ 47 白色 *[47m文字★*[m 文字★ │
│ 48 亮紅色 *[48m文字★*[m 文字★ │ // 感覺比較特別的指令
└─────────────────────┘
◆ 組合指令
上述顏色碼，可以多種並存（但前景、背景至多各選一種）
如果要對同一文字下多重指令，指令與指令之間以semicolon分開，
§例如：〔 *[1;5;35;44mviolet*[m 〕 變成 〔 violet 〕
於是，我們可以配出一套〔高亮度〕的前景顏色：
┌─────────────────────┐
│指令 前景顏色 原始碼 呈現效果 │
├─────────────────────┤
│1;30 灰色 *[1;30m文字★*[m 文字★ │
│1;31 鮮紅色 *[1;31m文字★*[m 文字★ │
│1;32 淺綠色 *[1;32m文字★*[m 文字★ │
│1;33 亮黃色 *[1;33m文字★*[m 文字★ │
│1;34 藍色 *[1;34m文字★*[m 文字★ │
│1;35 紫色 *[1;35m文字★*[m 文字★ │
│1;36 淺藍色 *[1;36m文字★*[m 文字★ │
│1;37 亮白色 *[1;37m文字★*[m 文字★ │
│1;38 ？？ *[1;38m文字★*[m 文字★ │ // 在批踢踢實業坊
│1;39 ？？ *[1;39m文字★*[m 文字★ │ // 這兩個是詭譎不定的顏色
└─────────────────────┘
ASCII色盤在此介紹完畢，以下統整所有可用的顏色：
30 31 32 33 34 35 36 37
┌───────────────┐
0│█ █ █ █ █ █ █ █│ // 普通亮度系列
│ │
1│█ █ █ █ █ █ █ █│ // 高亮度系列
└───────────────┘
◤──────╮
│Ⅲ 配色理論 │
╰──────╯
談到配色，在這邊倒不是要說什麼深奧的東西，我也沒那個本事。 ^^"
畫ASCII圖，我們用的不是水彩或廣告顏料，只是不出十餘支的彩色筆而已。
所以不需要知道什麼 + = 之類的調色公式。
在此，筆者想分享一些配色經驗：
讓初學者能夠在適當的地方，選擇適當的顏色，達到想要的效果。
◆ 強調文字
文字，不像一些實心的幾何圖形 〔● ◆ ★〕，
筆劃稍微少一點的字，它們在一個全形格內，所佔空間的比例不大。
如果文字本身的線條不夠明亮，會讓人有看不清楚的感覺。
§例如： 這行文字黯淡 很黯淡 實在很黯淡
這樣的暗色用多了不好，讀者看起來很辛苦。
所以儘量避免在文字上面使用暗色，除非是刻意要這麼做。
底線強調法
顧名思義，就是在文字底下劃線。平常看書的時候，很多人都這樣畫重點吧。
這種強調法適用於稍長的句子，或是一個段落，
可惜的是，有些BBS觀看軟體無法呈現這樣的效果。
§例如： 這段文字很重要，最好給我牢牢記住！
前景強調法
如果要強調一句話裡面的其中幾個字，高亮度前景色系列內的：
亮黃、淺綠、淺藍、鮮紅、亮白、紫色皆是不錯的選擇。
只有藍色的亮度仍不夠。（灰色呢？它不算啦，高亮度的黑色？ XD）
這幾種顏色何者較好？我想應該沒有定論，因人喜好而異，
可是選擇不同的顏色，給人的感覺、氣氛都不太一樣。
背景強調法 // 包括反白強調法
另外，背景強調法也是一種可行之道，就像用螢光筆劃重點一樣。
筆者比較推薦的〔螢光筆〕是：藍色 紅棕 紫色 反白。
若要使用背景強調法，建議前景採用高亮度（通常是亮白色）。
亮白前景搭配藍色背景
§比較一下：
白色前景搭配藍色背景
第一行的文字看起來比較清楚，也比較能達到強調的效果。
在這邊給個小建議，不管是哪一種強調法，
都不要用太多的高亮度文字，不然的話會讓讀者覺得刺眼，
假如整個段落都需要強調，用底線強調法比較適合。
閃爍強調法
閃爍對筆者來說，通常是最後一刻才會考慮使用的工具。
雖然它確實有一定的效果在，但是，閃爍的副作用實在太大，
使用稍有不慎，會給人負面的印象。
它適合用在〔最最重要的詞〕，這個詞最好只有幾個字而已。
§例如：集合時間是 10:00 ，千萬不要忘記了！
因為閃爍的頻率太慢，每一次的熄滅，都會中斷讀者的閱讀過程，
如果有一串長達數十字的閃爍文字，等讀者看完，氣恐怕也快岔了。
所以囉！為了讀者的靈魂之窗著想，請儘量避免用閃爍，
如果要用閃爍，一定要用在最重要的地方，
最好搭配前景、背景強調法一起使用。 :)
// 筆者推薦搭配背景強調法，可以讓讀者很快地鎖定閃爍的位置。
◆ 文字配色
練習一下，如果遇到這樣的文字，你想怎麼為它配色呢？
●(1)大內聖殿 公告/申訴/交流
(2)大資管帝國 資管/研究/系隊/ＳＡ
(3)天使小窩 天使個人專區
(4)一定要用功 課程/專題/用功/升學
(5)Super Club 社團/團體/CAMP/班板
(6)食衣住行育樂 娛樂/電腦/生活/資訊
(7)ＮＴＵ 台大/校內/其他
(N)ew 閱讀所有新作品
(S)elect 選擇看板
以下是筆者的設計，全用前景色：
●(1)大內聖殿 公告/申訴/交流
(2)大資管帝國 資管/研究/系隊/ＳＡ
(3)天使小窩 天使個人專區
(4)一定要用功 課程/專題/用功/升學
(5)Super Club 社團/團體/CAMP/班板
(6)食衣住行育樂 娛樂/電腦/生活/資訊
(7)ＮＴＵ 台大/校內/其他
(N)ew 閱讀所有新作品
(S)elect 選擇看板
這樣的排法，由上往下看很平順，因為是大家熟悉的彩虹顏色順序，
高亮度前景色裡面，其中有六個接近彩虹的其中六色，我就照順序排了。
中間再插入一個特例，利用三種明暗度不同的〔白色〕，營造漸層效果，
別忘了，在黑白世界裡，我們有四種顏色可以用哦！ // 但是黑色不常用
至於為什麼右半邊沒有染色呢？個人認為，
讀者最習慣閱讀的依舊是普通的白色，普通白色是最基本的顏色。
適量的顏色可以裝飾畫面；而顏色用過量，畫面就太花了。
◆ 圖形配色
圖形配色更難找出什麼通則了，已經到藝術創作的層次， ^^
若勉強要說什麼，筆者也只能提供一點點建議。
配色要以整體感作為首要考量，別拘泥於小地方，像是一兩塊方格的顏色；
讀者欣賞一個作品，很少抓它的一個角落，而是用遠觀的方式看它整體的感覺。
以下我挑了兩個色彩用得比較多的作品供大家參考。
○ ■□■ ○＊■Λ■ ○
Λ 小狗霈 □□★ ⊥＊●● Λ lastsleep
○ ■ ■ ■ ○□■ ○
Λ 走路風 □※ □○Λ Λ AllenHuang^^
○ ■Ｖ■ ■Λ■☆■ ○
Λ BlueShiva ※○＊＊＊ □ Λ 畢安諾
■＊■●■□■ ■
IM Bomberman // 炸彈超人
║■ ■■ ║ ┬
║■■■ ■ ║ │ＥＴＲＩＳ
NEXT ║■■■ ■ ║
╭───╮ ║■■■ ║
│ │ ║■■■■■ ║ LEVEL 3
│ ■│ ║■■■■■■ ■║
│■■■│ ║■■■ ■■■■ ■║ LINES 24
│ │ ║■■■■■■■■ ■║
╰───╯ ║■■■ ■■■■■■║ SCORES 9300
by AllenHuang ╚══════════╝
// 俄羅斯方塊
◤──────╮
│Ⅳ 色碼精簡 │
╰──────╯
這段內容或許比較枯燥，但它很重要，所以我並不想遺漏它。
學會精簡顏色碼，其主要目的：事半功倍！
知道了捷徑之後，就不用花時間繞遠路；
既然可以用更便宜的價格買到相同的東西，何樂而不為呢？
§例題一 請做出以下效果： 鮮紅 亮黃 淺藍
也許有人會用HTML tag的形式去寫，像這樣：
*[1;31m鮮紅*[m *[1;33m亮黃*[m *[1;36m淺藍*[m
但是，其實不必那麼複雜，這樣子就搞定了：
*[1;31m鮮紅 *[33m亮黃 *[36m淺藍*[m
為什麼呢？顏色碼是有繼承性的， *[33m 雖然只表示了前景顏色，
但是它可以繼承左邊 *[1;31m 所下的高亮度指令，
同理， *[36m 也繼承了 *[1;31m 所下的高亮度指令。
§類似題 請做出以下效果： 紫色 閃爍的紫色
HTML tag包夾方式的最複雜寫法：
*[1;35m紫色*[m *[1;5;35m閃爍的紫色*[m
利用繼承方式的寫法：
*[1;35m紫色 *[5m閃爍的紫色*[m
*[5m 繼承了左邊的 *[1;35m 兩個指令。
§例題二 請做出以下效果： 淺綠 墨綠
同樣地，我先秀出最複雜的方式：
*[1;32m淺綠*[m *[32m墨綠*[m
簡單的寫法：
*[1;32m淺綠 *[0;32m墨綠*[m
也許讀者會問，為什麼不是這樣寫？
*[1;32m淺綠 *[0m墨綠*[m
這就要談到0這個指令了，請不要以為0是〔低亮度〕的意思。
0的作用是將之前所有的〔屬性歸零〕；
換句話說，0會讓之後的文字變成最平凡的黑底白字。
*[0;32m 裡面的0，把前面的 *[1;32m 兩個指令都擋掉了，
所以若要讓後面的顏色變成墨綠色，我們還得再打一次32。
§引 申
0是可以技巧性地不寫的，之前所述的：
*[1;32m淺綠 *[0;32m墨綠*[m
可以修改成：
*[1;32m淺綠 *[;32m墨綠*[m
*[;32m 的分號前面沒有數字，系統會自動加進一個0進去。
這樣子讀者知道 *[m 的用意了嗎？是的，它其實就是 *[0m 。
這也難怪 *[m 之右的文字，全部都是黑底白字，彷彿有〔收尾〕的效果。
§整 理
在此整理一個清單，讓讀者更清楚顏色碼繼承的方式：
class 0 special class: reset to default configuration
class 1
class 4
class 5
class 7 special class: *[30;47m
class 8 special class: *[30;40m
class 3X contains 30 31 32 33 34 35 36 37
class 4X contains 40 41 42 43 44 45 46 47 48
除了0,7,8三類之外，不同的類別，可以用繼承方式寫下去：
*[32m前景墨綠 *[44m背景藍色 *[1m前景高亮度 *[4m再加底線 *[5m閃爍吧*[m
呈現效果如下：
前景墨綠 背景藍色 前景高亮度 再加底線 閃爍吧
而在同一個class底下，不算繼承，說是〔取代〕比較恰當：
*[41m背景紅棕 *[43m背景土黃 *[42m背景翠綠*[m
這樣的寫法得到如下的效果：
背景紅棕 背景土黃 背景翠綠
再談一下三個special classes吧：
就筆者的測試， *[7m 的功用等同於 *[30;47m ；
而 *[8m 的功用則等同於 *[30;40m 。
最後 *[0m ，也就是 *[m ，它將之前所有屬性歸零，切換到預設值。
所謂的預設值，就是黑底白字：37與40。
終於結束了 ^^，希望各位知道色碼精簡的通則之後，
整理原始碼的功力可以精進不少，
在每一個BBS站裡面，同一行不能打太多字，或多或少都有一定的上限，
如果顏色碼太〔肥大〕，按〔Ctrl + v〕之後，會發生畫面錯亂的狀況。
所以，懂得色碼精簡，可以防止顏色碼過長。
══════════════════════════════════════金 ∫ 台大資管鳴蟬小站 90級美工 黃舒淳