眾所周知,配色是設計中非常重要的部分,一個好的配色不僅能讓我們的設計更加出彩,還能對使用者產生情感影響。
1.Muzli Colors
https://colors。muz。li
可以線上快速生成和編輯多種配色方案,並根據我們自己的顏色選擇預覽和下載自定義UI工具包。
2. Colorable
https://colorable。jxnblk。com/
一款非常實用、用來評估配色可訪問性的工具。
3. History’s Palettes
https://colorleap。app/home
一鍵生成復古配色,搜尋過去4000年來最具有代表性的的180個配色方案。
4. Picular
https://picular。co/
Picular是一款基於谷歌影象搜尋的色彩生成器,只需輸入描述詞,就能快速生成配色方案。
5. Colourcode
https://colourco。de/
Colourcode是一個讓色彩理論視覺化的配色網站,選定一個顏色即就能看到它的互補色、相似色等等。
6. Palettte App
https://palettte。app/
palettte是一款色彩編輯和重對映工具,能夠視覺化的看到不同顏色之間的過渡流暢度,匹配出更和諧的色彩,還支援單個顏色微調。我們還可以匯入、分析和編輯現有的色彩方案。
7. Colorinspire
https://www。colorinspire。io/
收錄了很多場景的精選配色方案,為我們提供源源不斷的色彩靈感。
8. ColorSpace
https://mycolor。space/
Color Space是一款非常實用的漸變生成器,我們只需要選擇一個顏色,就可以快速生成20~30種不同風格的配色方案。
9. Pigment
https://pigment。shapefactory。co/
Pigment可以透過飽和度、色溫以及色系來生成我們獨特的配色方案,還可以檢視不同配色的配色場景圖片。
10. Adobe Color
https://color。adobe。com/create
Adobe Color透過拖拽色輪或輸入自定義色值,我們可以創造出基於相似、互補、三原色等不同色彩規則的配色方案。除此之外,還支援CMYK、RGB、HSV多種色彩模式的配色調整。
11. Colors & Fonts
https://www。colorsandfonts。com/
Colors&Fonts是由國外一名設計師Michael Andreuzza建立的配色網站,裡面收錄了超多他精心收藏的配色方案,我們只需要輸入描述詞,網站就會推薦相應的配色方案,除此之外還有漸變、字型等多種選擇,一鍵複製色值。
12. HueSnap
https://www。huesnap。com/
「HueSnap」是一款實用的取色工具,我們可以從影象中捕捉到色彩的詳細資訊,包括十六進位制、RGB、CMYK、HSV、HSL等等。除此之外,我們還可以在社群中瀏覽超多非常棒的配色方案靈感,並收藏和儲存它們。
13. Culrs
https://culrs。com/
Culrs是一個綜合型的配色網站,可以透過鄰近色、三色、四色和單色來搜尋靈感配色。除此之外,每種色彩規則下還有明暗分類,相當方便。
14. Eva Design System
https://colors。eva。design/
Eva Design System是一個基於深度學習演算法的配色網站,適用於給我們的產品或品牌生成一個系統的配色方案。
15. Scale
https://hihayk。github。io/scale/
快速色標生成器
16. Site Palette
http://palette。site/
Site Palette是一款設計師和前端開發人員必備的谷歌外掛。可以自動吸取網站的主要顏色,幫助我們建立色板,以及尋找相關配色的圖片,並一鍵下載配色方案。
17. BrandColors
https://brandcolors。net/
BrandColors是最大的官方品牌配色合集。有包括500多個品牌的十六進位制顏色程式碼,包括Facebook,Twitter,Instagram等等。
18. Colorwise
https://colorwise。io/
Colorwise將時下最受歡迎的配色方案按照適用場景分類,以便我們快捷地尋找配色靈感。
19. HTML Color Codes
https://htmlcolorcodes。com/
顏色圖表和帶有Hex顏色程式碼,RGB和HSL值的HTML顏色名稱,輕鬆查詢網站的HTML顏色程式碼。
20. ColorBox
https://www。colorbox。io/
ColorBox可以幫助我們輕鬆地建立非常炫酷的色彩集,配色頁面還有大量的個性化選項,滿足我們的任何需求~
21. Generate — Coolors.co
https://coolors。co/
幾秒鐘之內建立,儲存並分享好看的配色方案。
22. Color — Cloudflare Design
https://cloudflare。design/color/
專為UI設計師建立的配色工具,支援根據使用者介面元素預覽配色、迴圈瀏覽可訪問的顏色組合並手動建立配色方案、透過網址匯入或生成配色。
23. Instant Duotone Effect Generator
https://duotones。co/
雙色調效果生成器,支援使用者線上選擇多達幾十種雙色調配色。
24. Material Design
https://material。io/resources/color/#!/?view。left=0&view。right=0
為UI建立和共享調色盤,並測量任何顏色組合的可訪問性。
25. Blendy
https://blendy。ml/
Blendy是一種快速預覽CSS背景混合模式的工具。我們可以使用混合模式,顏色,漸變並在影象上進行嘗試。
26.LOL Colors
https://www。webdesignrankings。com/resources/lolcolors/
LOL Colors是一款可愛的配色網站,色彩大多明快清新,直接拖動滑鼠即顯示色值,方便收藏色卡。
27. Color Hunt
https://colorhunt。co/
Color Hunt是一個免費開放的色彩靈感平臺,擁有數千種時尚的配色方案。
28. ColorMe
https://colorme。io/
一個簡單CSS色彩視覺化工具,其特點是有非常多的引數可以設定,包括:透明度、飽和度、色調、亮度、著色、陰影、R/G/B、白色、黑色、對比度的設定等等。
29. Polarite
https://www。polarite。app/
Polarite是一款智慧配色應用程式,使用者只需左右滑動顏色選擇喜歡/不喜歡的色彩,系統就會根據其結果智慧生成一系列我們喜歡的且和諧的配色方案。
30. Gradient Hunt
https://gradienthunt。com/
精選數千種時尚的漸變色,並且每天都會更新。
31. Palettable
www。palettable。io
可以自己隨意搭配色彩方案的網站,使用者只需要選擇喜歡/不喜歡,直到搭配出想要的色板。
32. ColorSpark
https://colorspark。app/
一個簡單而有效的工具,隨機生成好看的顏色、漸變色,可以一鍵複製 CSS 程式碼。
33. SVG Colorizer
https://www。iconshock。com/svg-color/
SVG著色器,自動為SVG圖示和SVG向量著色
34. Sip
https://sipapp。io/
適用於Mac的Sip ColorPicker。可以幫助我們更好的收集整理和分享配色方案。
35. CoolHue 2.0
https://webkul。github。io/coolhue/sketch-plugin/
一款免費的sketch漸變配色外掛和收集工具。
36. Color Koala
https://colorkoala。xyz/
Color Koala是一個快速配色生成器。
37. SchemeColor
https://www。schemecolor。com/
SchemeColor可以下載、建立和分享成千上萬種美麗的配色組合,獲取十六進位制顏色程式碼的詳細資訊,並將其轉換為RGB和CMYK等色彩模式。
38. Free Mesh Gradient Collection
https://www。ls。graphics/meshgradients
100多個免費的漸變色合集,支援sketch、png、ai、jpg、eps等多種格式下載。
39. WebGradients
https://webgradients。com/
WebGradients是一個由頂級設計師策劃的免費漸變配色網站,擁有180種漂亮的線性漸變,並支援CSS3、Photoshop和Sketch等多種格式。
40. Gradient Buttons
https://gradientbuttons。colorion。co/
炫酷的漸變按鈕,還有懸停的動畫效果,一鍵copy css程式碼。
41. ColorKit
https://colorkit。io/
多種色彩漸變生成器,只需輸入開始和結束顏色以及混合步驟數,就能一鍵生成流暢的配色方案,並支援svg格式匯出。
42. Eggradients
https://www。eggradients。com/
一款收錄了最新設計趨勢漸變色彩的配色網站,支援一鍵複製十六進位制和CSS程式碼。
43. Cool Backgrounds
https://coolbackgrounds。io/
Cool Background是設計師Moe Amaya將5個開源生成器的簡化版整理組成的工具集,內建五種背景風格,每一個種風格還提供了簡單的引數配置。分別是:
低多邊形風格
trianglify。io
▼
動態粒子效果
marcbruederlin。github。io/particles。js
▼
漸變
cssgradient。io
▼
漸變層生成器
s。muz。li/NTFiZjk0ZWFh
▼
Unsplash圖片集
unsplash。com
▼
44. Art Palette
https://artsexperiments。withgoogle。com/artpalette/
基於Google AI的智慧配色工具,它會根據你所提供的配色方案來提供相符合的配色主題的藝術圖片。
45. GradPad
http://ourownthing。co。uk/gradpad。html
CSS漸變生成器,我們可以自己設定漸變色彩、透明度、位置和角度,還可以檢視流行的熱門漸變色彩,並直接使用現成的顏色程式碼。
46. Khroma
http://khroma。co/
Khroma號稱是“設計師的AI顏色工具” ,會先讓你從大量的顏色中選擇你最喜歡的50種,然後利用神經網路驅動演算法來幫你生成最符合你審美要求的配色方案,並且它所有給出的的配色都是從最流行的配色方案中學習得來。
47. Color palettes
ttps://www。canva。com/colors/color-palettes/
Canva上數千種精選色彩組合
48. Color Safe
http://colorsafe。co/
Color Safe是一個基於Web內容無障礙指南(WCAG)的配色網站,可以根據我們提供的色彩檢測可訪問性,並給出相應的調整方案。
49. Paletton
http://paletton。com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Paletton 是一個線上的色環配色工具。我們可以根據需要選擇單色、相近色、對比色等規則來檢視配色,也可以實時檢視其在網頁中的搭配效果。
50. Colordot
https://color。hailpixel。com/
動一動滑鼠就可以不斷生成的新的色卡。非常適合毫無靈感、不知從何下手的設計師。
51. Colors
https://klart。io/colors/
100%由資料驅動的配色方案集合。
52. Contrast Ratio
https://contrast-ratio。com/
一款輕鬆計算顏色對比度的配色工具。
53. Color Lisa
http://www。colorlisa。com/
世界上最偉大的藝術家的色彩傑作。
54. Color Designer
https://colordesigner。io/
只需選擇一種顏色,Color Designer就會幫助我們構建一個系統的配色方案,並基於我們所選的顏色生成多種色調和陰影等。
55. Color.review
https://color。review/
測試顏色對比度的配色工具
56. Blend
http://www。colinkeany。com/blend/
Blend - 建立和自定義漂亮的CSS3漸變。
57. Contrast
https://usecontrast。com/
一個用於快速測試WCAG顏色對比度的macOS應用程式
58. Grabient
https://www。grabient。com/
一個非常漂亮且實用的漸變網站,支援 CSS 樣式程式碼複製、360度漸變旋轉、自由增加或刪除漸變顏色等功能。