「UI設計必備」隨機產生顏色或漸層色組合顯示CSS3代碼快速複製

2021-01-07 運營有術52運營

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

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

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

站點名稱:ColorSpark

網站連接:HTTPS://colorspark.app/

使用教學

步驟1

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

STEP 2

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

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

STEP 3

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

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

67運營推薦值得一試的三個理由:

1、可隨機產生顏色或漸層色組合

2、 一鍵複製十六進位色碼或CSS3代碼

3、 界面簡單易用,內置夜間模式降低亮度

相關焦點

  • 有了這3個網站,可以跟又醜又Low的漸變設計說再見了
    仔細觀察這幾年的設計趨勢,不難發現漸變式的設計越來越流行。相較於單色背景來說,漸變能讓畫面更豐富,更有活力,甚至我們可以用漸變色營造空間感。(小米發布會上用的漸變效果)但這僅僅限於漸變色用的好的情況。如果沒配好漸變的顏色,大概就會像這樣……
  • 漸層貓的特徵和顏色代碼
    ,我們今天就英短系漸層貓在WCF血統證書上的顏色代碼做個簡單的了解。>例如:BRI ns 11 33 (英短貓黑銀陰影漸層重點色),這種毛色組合國內通常稱為「銀點」,這裡的所說的「點」不是「豹點斑紋」除單一顏色的重點色之外,還有彩色虎斑重點色,銀色虎斑重點色,銀色漸層重點色,國內通常把這種顏色叫做「銀點」,目前隨著國際貓品種的不斷改良,還有金色漸層的重點色,藍色漸層重點色, 英國短毛貓藍金陰影漸層色:
  • 10個好用到爆的設計必備配色網站!
    dop設計(ID:dopdesign)原創作者丨軟裝嚴選·羽番編輯丨軟裝嚴選·羽番身為設計師,面對各種繁雜的顏色搭配,時常感到頭疼,在工作經常遇到不會提取色彩數值,沒有敏銳的色感, 不會配色技術,那怎麼才能快速高效的解決這些問題呢?今天羽番來分享10個好用到爆的色彩設計搭配神器,幫助你在工作中提高配色效率,事半功倍。
  • 漸層的特徵及代碼含義
    別怪小編沒告訴你哦~漸層貓的性格溫順,粘人,越來越受到養貓愛好者的歡迎,但是漸層貓的毛色和形態特徵很多的朋友不是很了解,對於證書上的色號也是一頭霧水,我們今天就英短系漸層貓在WCF血統證書上的顏色代碼做個簡單的了解。這個帖子會詳細介紹關於漸層貓的基本特徵和顏色代碼所代表的含義,若是哪位朋友覺得寫的還算詳細用來轉載,請註明出處!
  • 實用網站工具,配色和代碼對照酷站推薦
    CSS漸變代碼點擊網站下面的第三個按鈕「Get CSS Code」或者直接按鍵盤「回車」鍵就會彈出CSS代碼框了,直接複製裡面的代碼就能使用!這很常在開發程序時遇到,尤其當程序代碼更新,可能需要回頭比較兩份不同時間的程序代碼有了那些變化,就會用到 Diff 相關功能。剛好最近在網絡上找到一個名為 Diff Checker 的在線服務,只要把兩個文字數據複製貼上,即可快速比對兩者的差異性,並以不同顏色條列出來。
  • 哪種顏色最讓人覺得舒服?為你設置一份完美配色方案
    看這裡▼01 Flatuicolorpicker扁平化UI設計配色方案。非常實用配色工具,提供各種顏色合集,可以幫助你運用到扁平化UI中,點擊右上角展開多種主色界面,隨你快速選取顏色,如果你在設計某一個項目,可以考慮使用它。
  • 漸變色不會調?這10個網站幫你快速搞定!
    色彩在設計中是十分重要的,隨著設計技術的發展和演變,美麗的漸變色也愈來愈受大家喜愛。但是要迅速地配出滿意的漸變色需要不少時間,所以今天給大家分享一些快速生成漸變色的網站,真的非常實用又方便~ColorSpacehttps://mycolor.space/如果你喜歡漸變風格的創作,那麼一定要試試這個網站。你只需要選擇一個顏色,就可以快速生成20多種不同風格的配色方案。比如選擇了如圖所示的RGB值,就會出現下面25種配色方案。
  • 尋找色彩設計靈感,10個設計師必備配色網站
    ,「顏色」可能是一個比放了什麼漂亮圖片更重要的元素,網路上有很多討論色彩心理學的文章都說準確的、舒適的色彩應用可以產生迷人的印象。我自己也不是色彩設計的高手,但最近在研究設計師們會如何選色、配色時,發現了許多線上的自動配色網站,這些網站提供了很多聰明的選色器工具,或是很多具有創意的配色表,可以提供許多「原來可以、應該這樣配色」的好建議,甚至激發設計師們的色彩搭配靈感。
  • Nike網美款推「粉彩漸層」新色 夢幻球鞋少女心大噴發
    夏天到了,挑選淺色系的球鞋才能穿出清新感,Nike兩大暢銷鞋款就推出以粉紅、薰衣草紫…柔和色調打造的「粉彩漸層」新色,唯美配色讓人看了少女心噴發,穿在腳上更是輕盈、顯嫩。Nike Air Max 95是鞋櫃裡的必備款,就算已經擁有,每回推出新色還是覺得很生火。
  • 「英短篇」英國短毛貓血系及色號代碼您知多少?
    除了血系,我們常常還會看到英國短毛貓漸層色會有一些特殊的色號代碼,代碼都是由字母和數字組成,例如:ny25、ay12、ns11等,代碼代表著不同的顏色。色號代碼也是根據毛尖顏色的佔比多少來區分的。在了解這些代碼之前,我們要知道常見的漸層色包括這些毛色:金漸層(色)、金點漸層(色)、銀漸層(色)、銀點漸層(色)、藍金漸層(色)、藍點漸層(色)。
  • UI設計必備:10個無需翻牆就能天天進階的UI設計網站
    (點擊上方公號,可快速關注)轉自:UI中國(ID:uicner)作為一枚走在設計大牛路上的UI小白,被前輩們安利最多的一個快速成長秘訣就是
  • UI設計師必備的6個配色網站
    對於程式設計師來說,UI設計我們有必要懂嗎,答案是肯定的,不管你是後端開發也好,前端那就更不用說,一定要學會有審美的細胞,雖然UI不是我們後端的必須懂的,但我還是建議你知道它的一些常用的配色網站,有時候我們也得自己修改前端代碼,也需要知道顏色的值,今天我給大家分享6個常用的配色網站,對於想從事UI