ColorSpark 隨機產生顏色或漸層色組合,顯示 CSS3 代碼快速複製

ColorSpark 隨機產生顏色或漸層色組合,顯示 CSS3 代碼快速複製

每次要選擇顏色的時候,我總是會從眾多配色工具找一兩個自己喜歡的,無論從中尋找靈感或挑選合適的顏色都很好用,例如:Coolors 快速選色器,後來改版後介面稍微有變得複雜一些;另外還有 Colordot 更人性化的選色工具服務,在移動滑鼠搖標時輕鬆找出配色靈感;我也喜歡 NIPPON COLORS 代表日本的 250 種顏色,這是找尋日本傳統色系配色的絕佳網站。

越簡單的工具越深得我心,至少可快速解決問題而不用花太多時間摸索,本文要推薦的「ColorSpark」是一款非常易用的選色器,開啟網站按下「Generate」按鈕,每次都會隨機出現一種顏色,同時也會顯示 Hex 顏色代碼可快速複製。

除此之外,ColorSpark 還提供漸層色(Gradient)產生器,之前在 WebGradients 和 CoolHue 有介紹過收錄漸層背景免費下載的網站,現在你也可以在這項服務上隨機產生漸層色,一鍵快速複製 CSS3 語法,將它加入你的網站設計。

網站名稱:ColorSpark
網站鏈結:https://colorspark.app/

使用教學

STEP 1

開啟 ColorSpark 會隨機出現一個顏色,下方會有 Hex 色碼,點選「Generate」重新產生一個顏色,每個顏色之間沒什麼關連,可以多按幾次看看有沒有讓自己賞心悅目的顏色。

ColorSpark

STEP 2

點選上方的「Gradient」切換成漸層色模式,會顯示兩種顏色及偏移角度。

ColorSpark

點選右下角的「Copy CSS」可快速複製 CSS3 程式碼,將它放進 CSS 檔就能成為背景顏色使用。當然還有其他使用方法,可以自己研究一下語法,總之 ColorSpark 主要用途就是讓使用者找到配色靈感。

ColorSpark

STEP 3

此外,ColorSpark 還提供夜間模式,從右上角點選月亮圖示切換,夜間模式底色會變深色,但功能一樣沒變,蠻有趣的功能。

ColorSpark

依照 ColorSpark 說明表示這項服務是為了讓設計師找到獨特的顏色和漸層組合,透過這個可產生隨機顏色和漸變顏色的工具,可以找到一些原本不知道的顏色,這是一個有趣的實驗,或許可以為你的下一個設計專案激發出靈感。

值得一試的三個理由:

  1. 可隨機產生顏色或漸層色組合
  2. 一鍵複製 Hex 色碼或 CSS3 代碼
  3. 介面簡單易用,內建夜間模式降低亮度
分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6233