所周知,配色是設計中非常重要的部分,一個好的配色不僅能讓我們的設計更加出彩,還能對用戶產生情感影響。
1.Muzli Colors
https://colors.muz.li
可以在線快速生成和編輯多種配色方案,并根據(jù)我們自己的顏色選擇預覽和下載自定義UI工具包。
源:BIGD
眾所周知,配色是設計中非常重要的部分,一個好的配色不僅能讓我們的設計更加出彩,還能對用戶產生情感影響。小編今天給大家整理了Muzli上 58個今年最佳的配色工具,相信一定能對你們有所幫助~
1.Muzli Colors
https://colors.muz.li
可以在線快速生成和編輯多種配色方案,并根據(jù)我們自己的顏色選擇預覽和下載自定義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是一款色彩編輯和重映射工具,能夠可視化的看到不同顏色之間的過渡流暢度,匹配出更和諧的色彩,還支持單個顏色微調。我們還可以導入、分析和編輯現(xiàn)有的色彩方案。
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通過拖拽色輪或輸入自定義色值,我們可以創(chuàng)造出基于相似、互補、三原色等不同色彩規(guī)則的配色方案。除此之外,還支持CMYK、RGB、HSV多種色彩模式的配色調整。
11. Colors & Fonts
https://www.colorsandfonts.com/
Colors&Fonts是由國外一名設計師Michael Andreuzza創(chuàng)建的配色網站,里面收錄了超多他精心收藏的配色方案,我們只需要輸入描述詞,網站就會推薦相應的配色方案,除此之外還有漸變、字體等多種選擇,一鍵復制色值。
12. HueSnap
https://www.huesnap.com/
「HueSnap」是一款實用的取色工具,我們可以從圖像中捕捉到色彩的詳細信息,包括十六進制、RGB、CMYK、HSV、HSL等等。除此之外,我們還可以在社區(qū)中瀏覽超多非常棒的配色方案靈感,并收藏和保存它們。
13. Culrs
https://culrs.com/
Culrs是一個綜合型的配色網站,可以通過鄰近色、三色、四色和單色來搜尋靈感配色。除此之外,每種色彩規(guī)則下還有明暗分類,相當方便。
14. Eva Design System
https://colors.eva.design/
Eva Design System是一個基于深度學習算法的配色網站,適用于給我們的產品或品牌生成一個系統(tǒng)的配色方案。
15. Scale
https://hihayk.github.io/scale/
快速色標生成器
16. Site Palette
http://palette.site/
Site Palette是一款設計師和前端開發(fā)人員必備的谷歌插件。可以自動吸取網站的主要顏色,幫助我們建立色板,以及尋找相關配色的圖片,并一鍵下載配色方案。
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可以幫助我們輕松地創(chuàng)建非常炫酷的色彩集,配色頁面還有大量的個性化選項,滿足我們的任何需求~
21. Generate — Coolors.co
https://coolors.co/
幾秒鐘之內創(chuàng)建,保存并分享好看的配色方案。
22. Color — Cloudflare Design
https://cloudflare.design/color/
專為UI設計師創(chuàng)建的配色工具,支持根據(jù)用戶界面元素預覽配色、循環(huán)瀏覽可訪問的顏色組合并手動創(chuàng)建配色方案、通過網址導入或生成配色。
23. Instant Duotone Effect Generator
https://duotones.co/
雙色調效果生成器,支持用戶在線選擇多達幾十種雙色調配色。
24. Material Design
https://material.io/resources/color/#!/?view.left=0&view.right=0
為UI創(chuàng)建和共享調色板,并測量任何顏色組合的可訪問性。
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是一個免費開放的色彩靈感平臺,擁有數(shù)千種時尚的配色方案。
28. ColorMe
https://colorme.io/
一個簡單CSS色彩可視化工具,其特點是有非常多的參數(shù)可以設置,包括:透明度、飽和度、色調、亮度、著色、陰影、R/G/B、白色、黑色、對比度的設置等等。
29. Polarite
https://www.polarite.app/
Polarite是一款智能配色應用程序,用戶只需左右滑動顏色選擇喜歡/不喜歡的色彩,系統(tǒng)就會根據(jù)其結果智能生成一系列我們喜歡的且和諧的配色方案。
30. Gradient Hunt
https://gradienthunt.com/
精選數(shù)千種時尚的漸變色,并且每天都會更新。
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可以下載、創(chuàng)建和分享成千上萬種美麗的配色組合,獲取十六進制顏色代碼的詳細信息,并將其轉換為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/
多種色彩漸變生成器,只需輸入開始和結束顏色以及混合步驟數(shù),就能一鍵生成流暢的配色方案,并支持svg格式導出。
42. Eggradients
https://www.eggradients.com/
一款收錄了最新設計趨勢漸變色彩的配色網站,支持一鍵復制十六進制和CSS代碼。
43. Cool Backgrounds
https://coolbackgrounds.io/
Cool Background是設計師Moe Amaya將5個開源生成器的簡化版整理組成的工具集,內置五種背景風格,每一個種風格還提供了簡單的參數(shù)配置。分別是:
低多邊形風格
trianglify.io
▼
動態(tài)粒子效果
marcbruederlin.github.io/particles.js
▼
漸變
cssgradient.io
▼
漸變層生成器
s.muz.li/NTFiZjk0ZWFh
▼
unsplash.com
▼
44. Art Palette
https://artsexperiments.withgoogle.com/artpalette/
基于Google AI的智能配色工具,它會根據(jù)你所提供的配色方案來提供相符合的配色主題的藝術圖片。
45. GradPad
http://ourownthing.co.uk/gradpad.html
CSS漸變生成器,我們可以自己設置漸變色彩、透明度、位置和角度,還可以查看流行的熱門漸變色彩,并直接使用現(xiàn)成的顏色代碼。
46. Khroma
http://khroma.co/
Khroma號稱是“設計師的AI顏色工具” ,會先讓你從大量的顏色中選擇你最喜歡的50種,然后利用神經網絡驅動算法來幫你生成最符合你審美要求的配色方案,并且它所有給出的的配色都是從最流行的配色方案中學習得來。
47. Color palettes
ttps://www.canva.com/colors/color-palettes/
Canva上數(shù)千種精選色彩組合
48. Color Safe
http://colorsafe.co/
Color Safe是一個基于Web內容無障礙指南(WCAG)的配色網站,可以根據(jù)我們提供的色彩檢測可訪問性,并給出相應的調整方案。
49. Paletton
http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Paletton 是一個在線的色環(huán)配色工具。我們可以根據(jù)需要選擇單色、相近色、對比色等規(guī)則來查看配色,也可以實時查看其在網頁中的搭配效果。
50. Colordot
https://color.hailpixel.com/
動一動鼠標就可以不斷生成的新的色卡。非常適合毫無靈感、不知從何下手的設計師。
51. Colors
https://klart.io/colors/
100%由數(shù)據(jù)驅動的配色方案集合。
52. Contrast Ratio
https://contrast-ratio.com/
一款輕松計算顏色對比度的配色工具。
53. Color Lisa
http://www.colorlisa.com/
世界上最偉大的藝術家的色彩杰作。
54. Color Designer
https://colordesigner.io/
只需選擇一種顏色,Color Designer就會幫助我們構建一個系統(tǒng)的配色方案,并基于我們所選的顏色生成多種色調和陰影等。
55. Color.review
https://color.review/
測試顏色對比度的配色工具
56. Blend
http://www.colinkeany.com/blend/
Blend - 創(chuàng)建和自定義漂亮的CSS3漸變。
57. Contrast
https://usecontrast.com/
一個用于快速測試WCAG顏色對比度的macOS應用程序
58. Grabient
https://www.grabient.com/
一個非常漂亮且實用的漸變網站,支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。
今天的內容就到這里啦~
小伙伴們還知道哪些超贊的配色網站呢?
記得留言告訴我們哦~
*商品入駐和分銷,請發(fā)送具體信息到:ponyco@126.com
者 | chokcoco
來源 | https://juejin.im/post/5be1023951882516fd36a38e
最近一個新的項目,CSS-Inspiration,挖掘了其他很多有關 CSS 陰影的點子,是之前的文章沒有覆蓋到的新內容,而且有一些很有意思,遂打算再起一篇。不過之前小編也發(fā)布了幾篇關于CSS相關文章不妨一起來回顧回顧:
《手把手整理CSS3知識匯總【思維導圖】》
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。