0to255:絕佳的網頁設計配色工具

作者: Jas / 發表於 2010-07-08

Photobucket

我記得,有一次小海在Twitter隨口問到:「不知道大家偏好寫 color: white 還是 #fff?」

這問題讓我想起:「很久很久以前,顏色對Designer,特別是Web Designer而言,其實是有名字的。」

如果你曾使用過只能顯示256色的螢幕,應該就會知道在那個16進位的世界裡,顏色總共有256個(容易被遺忘的)名字。

如果你曾為256色螢幕設想,並且從事網頁設計工作,應該也很清楚所謂的網頁安全索引色是更退一步被限縮在216色。

無論是256或216,這些顏色總之就是能直接被唱名出場,而不必輸入HEX色碼Hexadecimal color codes

然而,隨著所能使用的顏色數增多,從0到255不同階調的RGB色光增變出更多元自由的色彩搭配,從而也讓設計實作有了極其微妙的轉變。

譬如說我很常用的亮橘色,以前慣用OrangeRed這個寫法,後來比較習慣大量使用HEX色碼之後,就更進一步挑了#f50這個簡易寫法來用。但,事實上,OrangeRed的HEX色碼應該寫作#ff4500才對。

有過平面設計實務經驗的Designer,應該不難察覺這種配色法在美學應用上是欠缺正當性的。雖然,這對網頁寫Code而言,相對是一種效率上的便利選擇。但,就視覺、影像設計來說,從演色表去酙酌用色搭配,終究才是王道。

網路上雖然不乏COLOURloverskuler之類的配色工具網站,但,這些網站拿來參考是不錯,要當作工具,恐怕還不如開Photoshop點色盤來自己拼湊會更上手。

單就我目前所看到過的,比較可能可以拿來當網頁設計配色實作工具的,大概就屬0to255這個網站了。

0to255的優勢,首先是免費,其次是操作快速簡單。

Photobucket

只要輸入你所選擇的主色調,0to255就會把這個顏色的深淺明暗全階層一次都列出來。

Photobucket

接下來,只要點選色塊,0to255立即幫你Copy HEX色碼,讓你隨手就可以貼到網頁原始碼或CSS裡。

就網頁設計上的a跟hover的配色來說,0to255可說是眼下找不到對手的絕佳好用工具了。





回上方