Mesh 漸層色背景產生器,加入顏色以拖曳方式扭曲漸變效果

Mesh 漸層色背景產生器,加入顏色以拖曳方式扭曲漸變效果

如果你喜歡 iPhone、Mac 漸層顏色背景圖片,其實也可以自己動手做,之前介紹過不少漸層色的背景產生器,像是「Gradient Backgrounds」就是一站式的漸層背景產生工具整合各種服務(有點像是 The Stocks 2 整合免費圖庫、影片、圖示和字型的感覺),或是 WebGradients 收錄超過 180 種漸層色背景免費下載,產生 CSS 3 語法在取用顏色更方便。 其他還有像是 BlendColorSparkCoolHue 都是類似的圖案產生器服務。

Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

Alwane 網頁配色擷取工具,輸入網址就能取得顏色代碼相關資訊

如果想知道某個網站配色方式,除了打開開發人員工具或是檢視原始碼,也有第三方服務可以使用,即使無法完整複製別人的配色,也能快速得知網站使用的顏色代碼或配色模式,取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢?若你有類似的需求,接下來要介紹的服務或許可以滿足,這項服務會擷取特定網頁使用的顏色,讓顏色相關資訊更一目瞭然。

Adobe Color 提供設計師配色建議,以關鍵字搜尋主題情境相關色彩

Adobe Color 提供設計師配色建議,以關鍵字搜尋主題情境相關色彩

想尋找色彩靈感嗎?我介紹過不少配色工具可善加利用,有些是單純隨機色彩產生器,也有透過音樂專輯封面產生色碼的 Cover Colors、以藝術品發掘配色靈感的 Google Art Palette 或查詢不同時代流行的配色 Color Leap 等等,都有助於使用者找出好看且合適的配色組合。此外還有一些設計相關社群讓使用者分享自己挑選的調色盤,也是獲得顏色的方法。

Picalette 以你的心情、想法產生色彩建議,更有趣的調色盤產生器

Picalette 以你的心情、想法產生色彩建議,更有趣的調色盤產生器

如果想尋找和顏色有關的靈感,我之前介紹過不少配色工具,可以透過各種方式產生需要的顏色組合,像是 Color Palette Generator 快速產生五個可複製色碼顏色,Palettable 以互動方式來找出最合適的配色組合,都是可以碰碰運氣的方法。此外,Cover Colors 能夠從音樂專輯封面獲取配色,Google Art Palette 則是從各項藝術館藏挖掘色彩,相較於隨機產生可能更為實際,幫助使用者建構出各種畫面風格。

Veranda Colors 為設計找出合適的配色組合,也能和其他人分享調色盤

Veranda Colors 為設計找出合適的配色組合,也能和其他人分享調色盤

如果你需要一些配色靈感,我介紹過許多色彩工具,通常都會給出不錯的色彩組合,只要取得色碼就能套用,還有從特定主題挖掘色彩搭配,像是 Google Art Palette 就是以全世界藝術品來分析並找出相關色彩;Color Leap 時光機則是查詢每個時代流行的配色組合;另外,Cover Colors 從音樂專輯封面搜尋取得配色靈感,這些服務都是從實體獲取色彩的方式。當然也有很多色彩工具是採用隨機顯示,相較於有明確主題可能需要更多創造力才行。

Cool Backgrounds 免費背景製作工具,內建五種效果可自訂顏色

Cool Backgrounds 免費背景製作工具,內建五種效果可自訂顏色

根據 Cool Backgrounds 開發者研究,在發佈網頁或文章前最困難的步驟之一是找到合適背景圖片,好的圖片不僅能凸顯整篇內容質感,也可獲得更多使用者注意。我之前推薦不少免費背景產生器,依照使用者需求快速製作出很活潑、色彩鮮豔的背景,例如 Svg Wave 產生波浪狀背景圖案(在很多網站都能看到);Hero Patterns 製作好看的重複平鋪式背景,而且只要將 CSS 語法帶入就能套用。

Tailwind.ink 以神經網路產生色彩調色盤,在主色彩延伸 100 種相關顏色

Tailwind.ink

如果平常的工作和設計有關,對於色彩應該也會有一定的敏感度,若對顏色沒那麼熟悉,其實網路上有不少配色工具可以使用,通常會以不同方式產生調色盤,讓使用者在各種顏色裡快速選擇取用色碼,有助於降低色彩選擇的難度和時間。之前推薦過一些以特定主題收錄的色碼表,像是 NIPPON COLORS 就有代表日本傳統的 250 種顏色,BrandColors 收錄世界知名品牌使用的顏色資訊。

Color Palette Generator 線上調色盤工具,快速產生五個顏色可複製色碼

Color Palette Generator 線上調色盤工具,快速產生五個顏色可複製色碼

無論是開發新的應用程式、網頁設計或製作投影片時都需要用到顏色,好的色彩組合能讓整體質感提昇不少,如果對顏色沒什麼想法,也可從配色工具找尋靈感或是直接使用現成的顏色。例如之前介紹的 Palettable 透過互動方式找出最合適的色彩組合,利用 Eva Colors 深度學習的配色工具找出可搭配主品牌使用的顏色,或是從 Evernote Design 設計師必備懶人包一站式找到各種設計相關的素材資源,其中也包括色彩工具。

The Stocks 2 整合免費圖庫、影片、圖示和字型,單一網站快速瀏覽切換

The Stocks 2 整合免費圖庫、影片、圖示和字型,單一網站快速瀏覽切換

距離上一次介紹 The Stocks 已經超過五年,前段時間無意間瀏覽到這個網站,才想起我以前好像也寫過文章,不過網站現在變得不太一樣而且內容又更完整了,非常推薦加入收藏,因為真的很方便。如果你還不知道 The Stocks,它整合各種設計相關免費資源,最早只有將一些免費圖庫整合在一起,讓找圖的使用者透過側邊欄選單快速切換各個不同圖庫網站,加速搜尋圖庫的效率。

Palettable 線上產生漂亮配色,以互動方式找出最合適色彩組合

Palettable 線上產生漂亮配色,以互動方式找出最合適色彩組合

我推薦過不少網站配色工具,像是前段時間的 Colorinspire 我個人非常喜歡(不過好像已經無法連線有點可惜),直接推薦適合搭配一起使用的顏色組合,對於沒有靈感或色彩新手來說很有用,其他還有像是 Google Art Palette 可以從藝術品發掘色彩也是很有趣的工具。之前推薦的 CoolorsColorSpark 則透過隨機產生的方式快速建立各種顏色,不過顏色之間可能就比較沒有相關性,而配色也應該要考量到不同顏色之間可否互相搭配,對一般使用者來說就會比較棘手。