Noise Generator，比Photoshop的濾鏡更強的雜訊製造器
Photoshop的雜訊(noise)濾鏡現在普遍被用來做其他材質的基本素材，透過雜訊可以做出隨機不規則的雜點，再用其他特效功能把他轉化成其他有機素材，例如做斑剝效果就多半會先做雜訊。
不過Photoshop生成雜訊的功能從2.5版至今也沒加強過了。今天要介紹的是更強的雜訊工具，而且是在網頁上直接生成的。Noise Generator透過不透明度和密度來控制雜訊的表現，尤其是密度這個屬性使得他跟Photoshop所能生成的雜訊有絕對的不同。Noise Generator還能輸出透明背景的雜訊圖片，這在Photoshop上目前還不能完全搞出來。
網站：Noise Generator
不過話說回來Noise Generator目前也只接受製作最大300px*300px的尺寸。
Subtle patterns, 免費、世界最精緻的專業背景圖+PS外掛
你自己作過無縫連接的背景圖嗎？
我猜不少人都沒有自己做過吧？我也是，最多只改過或者做一些簡單的圖騰式的。挪威有個愛做高級精緻背景圖的設計師開了Subtlepatterns.com這個網站，提供高精緻的背景圖免費下載，不但免費還特別分類並細心的打包成.zip檔案提供下載，所有檔案並且分類成10種類別以方便瀏覽取用。網站：Subtlepatterns.com
網頁每一頁的最下面有一個Top Tags把圖片分類好，點選任何一個都會過濾呈現的背景圖庫。瀏覽時亦可使用圖庫最上方的工具選擇預覽方式，好讓選擇時進入到最佳的視野。
不但如此，現在還提供Photoshop外掛
看到首頁上綠色的按鈕嗎？點過去就會進到外掛介紹頁面，不過這個方便的外掛是要11.99美金的。
Subtlepatterns.com的背景圖是目前免費原創背景圖裡最精緻的，在Themeforest的許多Top設計師都特別愛用他的背景圖來增加設計水平。如果你細細瀏覽一次全部的背景，一定會替你的設計工作永遠的、強強的加上不少分數。
CSS3 Generator，CSS容器生成器
網址：CSS3 Generator
使用方式：
- 直接使用調整面板，記得面板的右邊有+的按鈕都可以打開進入細項調整。
可以搭配Gradient Generator做出絢麗的按鈕唷！
我也弄了一個範例：
Gradient Generator，CSS製作漸層背景的網站工具
 |
| Gradient Generator |
Gradient Generator是個強大的CSS漸層色生成工具。
有時候想把按鈕做成漸層的，所以會去翻書籤裡的網站找一個來改色對吧？現在用Gradient Generator可以線上調校生成了，用法跟Photoshop的漸層工具幾乎一樣！不論是條透明度還是漸層位置完全可視化調整。
網站：Gradient Generator
使用方式：
- 非常直覺，直接拉動調整，然後右邊框框裡的就是CSS語法了。
筆記：這語法支援到IE8，但是若要支援IE9，請在框框右下角把IE9打勾，並且把下方的IE9宣告放在你html的<head>之上。
特殊功能：Gradient Generator還能支援從你上傳的圖片中抓取顏色！只要在右邊面板下方按Import from image即可上傳。
下面是我玩玩做成的DEMO按鈕：
Brand Colors，品牌顏色色票
有時候需要找大品牌的顏色嗎？有個傢伙做了一個網站把收集全世界的大品牌主要使用顏色，讓你可以直接取得色碼。
網址：http://brandcolors.net/
瀏覽時下方有一個搜尋器，直接輸入品牌名稱可以直接翻出色票(前提是已經收錄)
Pictaculous，主要色彩解析工具
網站：Pictaculous
使用方式：
直接點畫面中間的上傳工具，選擇一張照片後按確定，按Get My Palette。
Color Hexa，色彩研究工具網站
網站：Color Hexa
使用方法：
沒有！因為Color Hexa已經甚至把使用方式都帶進各種關聯裡了，任何在這網站上出現的顏色都可以點選直接成為索引色，然後進入這個顏色的數據世界裡。
ColorSchemeDesigner，數據化色彩配色工具網站
你對色彩的需求和細膩度較高嗎？或者你所開發的專案需要一套邏輯性的色彩布局試算嗎？Color Scheme Designer可能是你想像不到的工具，而且是免費的！
透過使用這個工具網站，你可以邏輯性的整理出一套配色讓工程師順利的程式化一個顏色的配色邏輯，這可不是蓋的。
網站：ColorSchemeDesigner
使用方式：
- 首先在面板左上選擇需要的顏色色相組，選擇一個到四個的色相組，內容還可以細分出不同的配色邏輯變化方式，有點複雜解釋，這應該是色彩學研究所在理解的深度了。
- 其次左下方是改變色相、色彩彩度、明度和對比等。
- 再來是精彩的，右下方的面板可以直接在一個DEMO站預覽配色，很神很神有木有！
- 還沒完！最後還可以透過右上方的一堆工具分享配色或者輸出成Html+css檔案！
Color Ramp Creator，找出一套合宜色彩的工具網站
網站：Color Ramp Creator
使用方法：
- 進入Color Ramp Creator網站
- 在色版的上方選擇16色、8色或者4色，來決定你需要的顏色數量
- 在色調、色相、亮度上看著預覽的圖片調整出自己想要的結果
不過可惜目前是不能讓使用者放上自己的圖片的。
 |
| 非常特殊的工具對吧，我也做了一組覺得很不錯的應用 |
Piknik，網頁背景色預覽工具網站
網頁設計師一直都在找一個適當的背景色，我明白！
這裡有一個非常好用的工具網站，可以讓你直接預覽1677萬個背景色！應該沒有比這更棒的背景色預覽工具網站了。
網站：Piknik Color Picker
使用方法：
- 滑鼠游標左右移動變換色相、滑鼠游標上下移動變換彩度、滑鼠滾輪上下滾動變換明暗。
- 選定色彩後，按下左鍵即鎖定顏色，接著可以從螢幕下方的色彩敘述來紀錄這個色彩。
- 再次按下滑鼠左鍵就又進入預覽狀態了。
Kular，配色與色彩計畫社群
網站：Kuler
到Kular網站可以立即玩玩配色，亦可點選左上方Explore瀏覽現有存檔的配色、或者打開自己存檔的配色。
Kular也是一個雲端色票社群網站。當然，在Explore也可以用關鍵字搜尋一個現有的關聯配色。例如我曾經在一個專案中需要適合布達佩斯(budapest匈牙利古城)的色彩，就是在這兒找到一組的。
Adobe
Kular目前是Adobe旗下的一個免費服務社群網站，Photoshop的使用者亦可在Extension裡開啟Kular面板直接瀏覽或者存儲自己的配色(需要adobe帳號，而且不是破解版)。
當然也可以在某個配色上跟其他使用者討論自己的看法！
原來CSS顏色有名稱
原來css的顏色名稱不只是black, white, red, blue, green...這些個純色有名字而已，好多顏色都是有名字的喔！
這個網站收集了顏色名稱，一共有147個顏色是有名稱可以直接使用的。
網址：http://www.147colors.com/grid/
酷吧！現在可以背下幾個顏色來噹一下公司的主管了，讓他們看看你的深度。
