今天兩個(gè)網(wǎng)站，一個(gè)收錄了超多的頂尖色板，包括谷歌的MD 配色、微軟的Metro 配色等等，分類清晰，使用方便。另外一個(gè)是國外的免費(fèi)圖庫，可商業(yè)喲。

你可能記得 Facebook、Twitter 和 Google+ 各自的深藍(lán)色、淡藍(lán)色和橘紅色，但很難精確轉(zhuǎn)換成色碼值，我找到一份「Social Colors」記錄各種常見的社群網(wǎng)站代表色，而這網(wǎng)站還有收錄其他好用的色碼表。

Social Colors 是 Material UI 網(wǎng)站旗下的一個(gè)項(xiàng)目，就它名稱來說你可以知道主要是以表示社群網(wǎng)站的標(biāo)準(zhǔn)色為主，它能精確告訴你 Facebook 藍(lán)色、Twitter 淡藍(lán)色是什么色碼，也有一些臺(tái)灣較多人使用的服務(wù)，例如 YouTube、LINE、Instagram。想起我之前介紹過 BrandColors 則是收錄世界知名品牌的顏色色碼，或者代表日本 250 種顏色的 NIPPON COLORS，都是類似的代表色查詢服務(wù)?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設(shè)計(jì)

Material UI 還有各種顏色色碼表，例如 Google 的 Material Design 配色、Flat Design 用戶接口配色、微軟的 Metro 配色、HTML 色彩，除此之外網(wǎng)站還提供 Material Design 圖示、選色器和 Unicode 特殊符號(hào)（Unicode Characters）檢索工具，如果你的工作會(huì)時(shí)常接觸到顏色，那么這個(gè)網(wǎng)站對(duì)你來說應(yīng)該會(huì)相當(dāng)有用?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)頁設(shè)計(jì)

Material UI

STEP 1

開啟 Material UI 網(wǎng)站后，從左上角的選單來切換不同的顏色配色表，前面有提到這里收錄許多常用的色彩組合，對(duì)于網(wǎng)頁設(shè)計(jì)或應(yīng)用程序開發(fā)來說非常有用，例如常見的社群網(wǎng)站顏色、平面設(shè)計(jì)顏色、Material Design、Metro 顏色等等?！?a href="http://pgwc.com.cn" target="_self">重慶定制網(wǎng)站

默認(rèn)情況下點(diǎn)選色塊后會(huì)顯示、自動(dòng)復(fù)制顏色的 #HEX 值，如果你習(xí)慣使用其他的方式來設(shè)定顏色，Material UI 還提供 RGB、RGBA 或沒有加上 # 字號(hào)的 HEX 值。

STEP 2

前面有提到，我是在找社群網(wǎng)站代表顏色（Social Colors）時(shí)意外發(fā)現(xiàn) Material UI，假如你想要自己開發(fā)社群分享按鈕，或者想要了解這些網(wǎng)站使用的顏色色碼，Social Colors 頁面收錄一些常用常見的社群網(wǎng)站，只要點(diǎn)選顏色就會(huì)跳出、自動(dòng)復(fù)制該服務(wù)使用的色碼?！?a href="http://pgwc.com.cn" target="_self">定制網(wǎng)站

STEP 3

之前也介紹過幾個(gè) Google Material Design 設(shè)計(jì)風(fēng)格相關(guān)的免費(fèi)資源，例如在線產(chǎn)生 Material Design 風(fēng)格配色建議的 Material Palette?！?a href="http://pgwc.com.cn" target="_self">網(wǎng)站設(shè)計(jì)

如果你喜歡微軟的 Metro 設(shè)計(jì)風(fēng)格配色，Material UI 網(wǎng)站亦有提供，只要點(diǎn)選色塊上的顏色就會(huì)自動(dòng)復(fù)制色碼。另外，注意到左上角的齒輪設(shè)定按鈕嗎？在這里還能將顏色名稱切換成顯示被點(diǎn)擊次數(shù)，就能大略知道那些顏色比較流行、較常被使用于設(shè)計(jì)開發(fā)上。——網(wǎng)頁設(shè)計(jì)

Negative Space

Negative Space 也是一個(gè)國外免費(fèi)圖庫網(wǎng)站，收集的相片數(shù)量不多，大約只有五百張左右，但類型很全面，例如動(dòng)植物、建筑、黑白、風(fēng)景、食物、大自然、人物、運(yùn)動(dòng)、科技和運(yùn)輸?shù)鹊认嗥瑧?yīng)有盡有，使用者可直接在網(wǎng)站里預(yù)覽、下載，無須注冊(cè)賬號(hào)。

根據(jù) Negative Space 授權(quán)頁面說明，這里提供的相片皆采用 CC0 授權(quán)方式，也就是能自由復(fù)制或修改，甚至使用于商業(yè)目的，不用標(biāo)注出處或連回原頁面。

STEP 1

開啟 Negative Space 網(wǎng)站后，首頁會(huì)顯示最近更新的新相片素材，可利用關(guān)鍵詞搜尋，或直接點(diǎn)選上方選單的「Photos」來查看所有相片列表?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設(shè)計(jì)

STEP 2

Negative Space 的相片分類在左側(cè)選單，依照不同的種類分門別類，其中我蠻喜歡 Black & White 黑白相片類別，這些相片看起來還蠻有質(zhì)感，而且好像比較不會(huì)跟其他人使用的相片「撞圖」。

STEP 3

和其他的免費(fèi)圖庫使用方法差不多，點(diǎn)選圖片、開啟大張圖片的預(yù)覽畫面，點(diǎn)選最下方的「Download」就能下載原圖。——重慶網(wǎng)頁設(shè)計(jì)

在 Negative Space 里有些圖片下方顯示的按鈕為「Download .Jpg」字樣，不過其實(shí)只有擴(kuò)展名不同，一樣是在點(diǎn)擊按鈕后可以下載、取得原圖。前面有提到 Negative Space 相片采用 Creative Commons Zero 也就是 CC0 授權(quán)，因此可以編輯修改或使用于商業(yè)用途而沒有任何限制?！?a href="http://pgwc.com.cn" target="_self">重慶定制網(wǎng)站