理了一些本人開發(fā)中用到的和接觸到的一些取色的網(wǎng)站，有色彩搭配的，也有直接生成css 代碼的，值得一試的。

中國色

分享一個有中科院科技情報編委會名詞室.科學(xué)出版社色譜，對應(yīng)的有中文名稱，英文名稱，色值對應(yīng)有 RGB / CMYK 格式 印刷標準FOGRA39，網(wǎng)點補正值 15%

Color Hexa

這個突出的一點就是你可以根據(jù)一個顏色范圍值搜索相近的色值，并且還有相關(guān)的示例文本和css 代碼，還有多種色值格式Hex,RGB,CMYK,HSL 等多種格式

Color Hunt

免費開放的平臺，提供數(shù)千種時尚的手工挑選的調(diào)色板,對于有顏色搭配困難癥的人來說簡直太爽了，不用糾結(jié)該怎么搭配了。

Html Color Codes

獲取HTML顏色代碼，十六進制顏色代碼，RGB和HSL值與我們的顏色選擇器，顏色圖表和HTML顏色名稱。

HSL Color Picker

這個就沒有設(shè)計好的了，需要自己選擇色值范圍自己搭配顏色選擇色值了。

Picular

這個網(wǎng)站也挺不錯的，可以根據(jù)中文名稱加載相關(guān)的顏色，也支持一鍵復(fù)制。

Material UI Colors

可以設(shè)置明暗程度，也可以點擊更多查看相近的同號色值。

Color Spark

隨機生成漸變色和單色，支持一鍵copy css 代碼

Neumorphism

新擬態(tài)樣式生成，使用超級簡單，選擇主色調(diào)整大小，邊角半徑，漂亮的新擬態(tài)樣式就生成了，一鍵copy css 代碼就完成了，很贊！

瀏覽器F2

其實以上網(wǎng)站在開發(fā)只是為了取色輔助，本人最常用的是這個，直接調(diào)試看效果，效率嘎嘎滴！

就分享這么多吧，上面網(wǎng)站的地址都放在圖片備注中了，需要查看的直接搜索就能找到了，如果你們有更好的歡迎評論區(qū)告訴我，我也去試試，然后今天1024祝大家節(jié)日快樂#1024程序員節(jié)#

果你是配色小白，那么這篇文章真的對你超級有用！當(dāng)然了，如果你對顏色的搭配有點研究的話，這篇文章也是對你會有不少幫助的！

這里直接分享四個超級好用的在線色彩搭配網(wǎng)站，每一個都是提高你工作效率的絕對利器！

第一個網(wǎng)站：Designspiration

這個網(wǎng)站簡直太好用了！其中有著超級強大的顏色搜索功能，這是區(qū)別其他設(shè)計網(wǎng)站的一個很好用的特色！網(wǎng)站的頁面也很有設(shè)計性，同時也做到了簡約干凈：

這里我們看一下這個顏色搜索功能，在網(wǎng)站的右側(cè)會有一個調(diào)色板，我們只需要在這里替換成你需要的顏色搭配，那么就能檢索以這種配色為主的所有靈感設(shè)計參考了：

比如我們選擇這幾種顏色，然后網(wǎng)站就會根據(jù)我們選擇的配色，給你生成一些參考：

除了根據(jù)色彩搭配來篩選，我們還可以點進任意一個設(shè)計作品，詳細頁面也會有一個簡單的色環(huán)和色卡，這個時候我們就可以使用PPT中的取色器進行取色了：

如果我們還需要這種色環(huán)的配色，還可以點擊這里的小色環(huán)，還能繼續(xù)得到類似的配色參考：

第二個網(wǎng)站：Alwane

這個網(wǎng)站簡單的來說是一個可以提取網(wǎng)頁配色的神器！如果你瀏覽到一個很有設(shè)計感的網(wǎng)站，想要復(fù)制別人的配色，這時候該怎么辦呢？所以，這里就介紹一款網(wǎng)頁色彩提取工具：

你只需要在這個網(wǎng)站的左上角輸入欄中添加想要提取顏色的網(wǎng)址，預(yù)設(shè)情況下會從HTML和CSS樣式表單獲取顏色搭配：

然后你可以從提取的顏色中看到顏色的具體數(shù)值，包括顏色的預(yù)覽、色碼等信息：

當(dāng)然了，當(dāng)你切換成程序代碼的模式后，這些顏色的CSS代碼也會標注出來：

要是想保持網(wǎng)站的配色信息，直接點擊網(wǎng)站右上角的Generate即可：

第三個網(wǎng)站：Adobe官方配色網(wǎng)站Adobe color

這個網(wǎng)站相信很多人都知道吧？如果不知道的話，在這里我也簡單介紹一下，這是Adobe官方推出的一個配色網(wǎng)站：

當(dāng)我們在做設(shè)計的時候，如果想做一些漸變色的設(shè)計，這個網(wǎng)站真的超級好用！在中間的色款中輸入色值，然后網(wǎng)站會自動生成顏色搭配，

然后這些顏色做成漸變后，效果相當(dāng)不錯：

要是你覺得顏色跨度不夠大，還可以手動拖拽色輪上的控點進行調(diào)整，漸變色依舊能做的很出彩：

不僅僅是生成鄰近色，你在網(wǎng)站的左側(cè)選擇不同的套用顏色調(diào)和規(guī)則，中間的色輪會自動生成不同的配色方案！

比如你選擇單色，這時候的色卡中的顏色就以單色為規(guī)則進行搭配。直接保存頁面右上角的色卡就能進行取色：

還有三元群、輔色、分割輔色等等：

第四個網(wǎng)站：Coolors

這個網(wǎng)站是在太強大了，而且網(wǎng)頁的設(shè)計十分的簡潔干凈，而且每一組的配色都超級經(jīng)典好看！

你只需要打開這個網(wǎng)站，在頁面通過空格鍵隨機生成色卡，每一組的配色都相當(dāng)不錯：

而且這里還會給很詳細的顏色信息，包括顏色的名稱、色調(diào)、色溫、配色建議、色彩和諧度等等！最重要的這個網(wǎng)站出了app版本，大家可以嘗試在手機上下載對應(yīng)的app進行配色的參考：

這四個網(wǎng)站看完后，是不是覺得很實用呢？

這些配色網(wǎng)站網(wǎng)址鏈接我給你整理好了，關(guān)注我+回復(fù)（關(guān)鍵詞：配色網(wǎng)站）就可獲取！

#ppt# #職場達人煉成記# #神器#

源：BIGD

眾所周知，配色是設(shè)計中非常重要的部分，一個好的配色不僅能讓我們的設(shè)計更加出彩，還能對用戶產(chǎn)生情感影響。小編今天給大家整理了Muzli上 58個今年最佳的配色工具，相信一定能對你們有所幫助~

1.Muzli Colors

https://colors.muz.li

可以在線快速生成和編輯多種配色方案，并根據(jù)我們自己的顏色選擇預(yù)覽和下載自定義UI工具包。

2. Colorable

https://colorable.jxnblk.com/

一款非常實用、用來評估配色可訪問性的工具。

3. History’s Palettes

https://colorleap.app/home

一鍵生成復(fù)古配色，搜索過去4000年來最具有代表性的的180個配色方案。

4. Picular

https://picular.co/

Picular是一款基于谷歌圖像搜索的色彩生成器，只需輸入描述詞，就能快速生成配色方案。

5. Colourcode

https://colourco.de/

Colourcode是一個讓色彩理論可視化的配色網(wǎng)站，選定一個顏色即就能看到它的互補色、相似色等等。

6. Palettte App

https://palettte.app/

palettte是一款色彩編輯和重映射工具，能夠可視化的看到不同顏色之間的過渡流暢度，匹配出更和諧的色彩，還支持單個顏色微調(diào)。我們還可以導(dǎo)入、分析和編輯現(xiàn)有的色彩方案。

7. Colorinspire

https://www.colorinspire.io/

收錄了很多場景的精選配色方案，為我們提供源源不斷的色彩靈感。

8. ColorSpace

https://mycolor.space/

Color Space是一款非常實用的漸變生成器，我們只需要選擇一個顏色，就可以快速生成20~30種不同風(fēng)格的配色方案。

9. Pigment

https://pigment.shapefactory.co/

Pigment可以通過飽和度、色溫以及色系來生成我們獨特的配色方案，還可以查看不同配色的配色場景圖片。

10. Adobe Color

https://color.adobe.com/create

Adobe Color通過拖拽色輪或輸入自定義色值，我們可以創(chuàng)造出基于相似、互補、三原色等不同色彩規(guī)則的配色方案。除此之外，還支持CMYK、RGB、HSV多種色彩模式的配色調(diào)整。

11. Colors & Fonts

https://www.colorsandfonts.com/

Colors&Fonts是由國外一名設(shè)計師Michael Andreuzza創(chuàng)建的配色網(wǎng)站，里面收錄了超多他精心收藏的配色方案，我們只需要輸入描述詞，網(wǎng)站就會推薦相應(yīng)的配色方案，除此之外還有漸變、字體等多種選擇，一鍵復(fù)制色值。

12. HueSnap

https://www.huesnap.com/

「HueSnap」是一款實用的取色工具，我們可以從圖像中捕捉到色彩的詳細信息，包括十六進制、RGB、CMYK、HSV、HSL等等。除此之外，我們還可以在社區(qū)中瀏覽超多非常棒的配色方案靈感，并收藏和保存它們。

13. Culrs

https://culrs.com/

Culrs是一個綜合型的配色網(wǎng)站，可以通過鄰近色、三色、四色和單色來搜尋靈感配色。除此之外，每種色彩規(guī)則下還有明暗分類，相當(dāng)方便。

14. Eva Design System

https://colors.eva.design/

Eva Design System是一個基于深度學(xué)習(xí)算法的配色網(wǎng)站，適用于給我們的產(chǎn)品或品牌生成一個系統(tǒng)的配色方案。

15. Scale

https://hihayk.github.io/scale/

快速色標生成器

16. Site Palette

http://palette.site/

Site Palette是一款設(shè)計師和前端開發(fā)人員必備的谷歌插件。可以自動吸取網(wǎng)站的主要顏色，幫助我們建立色板，以及尋找相關(guān)配色的圖片，并一鍵下載配色方案。

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顏色名稱，輕松查找網(wǎng)站的HTML顏色代碼。

20. ColorBox

https://www.colorbox.io/

ColorBox可以幫助我們輕松地創(chuàng)建非常炫酷的色彩集，配色頁面還有大量的個性化選項，滿足我們的任何需求~

21. Generate — Coolors.co

https://coolors.co/

幾秒鐘之內(nèi)創(chuàng)建，保存并分享好看的配色方案。

22. Color — Cloudflare Design

https://cloudflare.design/color/

專為UI設(shè)計師創(chuàng)建的配色工具，支持根據(jù)用戶界面元素預(yù)覽配色、循環(huán)瀏覽可訪問的顏色組合并手動創(chuàng)建配色方案、通過網(wǎng)址導(dǎo)入或生成配色。

23. Instant Duotone Effect Generator

https://duotones.co/

雙色調(diào)效果生成器，支持用戶在線選擇多達幾十種雙色調(diào)配色。

24. Material Design

https://material.io/resources/color/#!/?view.left=0&view.right=0

為UI創(chuàng)建和共享調(diào)色板，并測量任何顏色組合的可訪問性。

25. Blendy

https://blendy.ml/

Blendy是一種快速預(yù)覽CSS背景混合模式的工具。我們可以使用混合模式，顏色，漸變并在圖像上進行嘗試。

26.LOL Colors

https://www.webdesignrankings.com/resources/lolcolors/

LOL Colors是一款可愛的配色網(wǎng)站，色彩大多明快清新，直接拖動鼠標即顯示色值，方便收藏色卡。

27. Color Hunt

https://colorhunt.co/

Color Hunt是一個免費開放的色彩靈感平臺，擁有數(shù)千種時尚的配色方案。

28. ColorMe

https://colorme.io/

一個簡單CSS色彩可視化工具，其特點是有非常多的參數(shù)可以設(shè)置，包括：透明度、飽和度、色調(diào)、亮度、著色、陰影、R/G/B、白色、黑色、對比度的設(shè)置等等。

29. Polarite

https://www.polarite.app/

Polarite是一款智能配色應(yīng)用程序，用戶只需左右滑動顏色選擇喜歡/不喜歡的色彩，系統(tǒng)就會根據(jù)其結(jié)果智能生成一系列我們喜歡的且和諧的配色方案。

30. Gradient Hunt

https://gradienthunt.com/

精選數(shù)千種時尚的漸變色，并且每天都會更新。

31. Palettable

www.palettable.io

可以自己隨意搭配色彩方案的網(wǎng)站，用戶只需要選擇喜歡/不喜歡，直到搭配出想要的色板。

32. ColorSpark

https://colorspark.app/

一個簡單而有效的工具，隨機生成好看的顏色、漸變色，可以一鍵復(fù)制 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)建和分享成千上萬種美麗的配色組合，獲取十六進制顏色代碼的詳細信息，并將其轉(zhuǎn)換為RGB和CMYK等色彩模式。

38. Free Mesh Gradient Collection

https://www.ls.graphics/meshgradients

100多個免費的漸變色合集，支持sketch、png、ai、jpg、eps等多種格式下載。

39. WebGradients

https://webgradients.com/

WebGradients是一個由頂級設(shè)計師策劃的免費漸變配色網(wǎng)站，擁有180種漂亮的線性漸變，并支持CSS3、Photoshop和Sketch等多種格式。

40. Gradient Buttons

https://gradientbuttons.colorion.co/

炫酷的漸變按鈕，還有懸停的動畫效果,一鍵copy css代碼。

41. ColorKit

https://colorkit.io/

多種色彩漸變生成器，只需輸入開始和結(jié)束顏色以及混合步驟數(shù)，就能一鍵生成流暢的配色方案，并支持svg格式導(dǎo)出。

42. Eggradients

https://www.eggradients.com/

一款收錄了最新設(shè)計趨勢漸變色彩的配色網(wǎng)站，支持一鍵復(fù)制十六進制和CSS代碼。

43. Cool Backgrounds

https://coolbackgrounds.io/

Cool Background是設(shè)計師Moe Amaya將5個開源生成器的簡化版整理組成的工具集，內(nèi)置五種背景風(fēng)格，每一個種風(fēng)格還提供了簡單的參數(shù)配置。分別是：

低多邊形風(fēng)格

trianglify.io

▼

動態(tài)粒子效果

marcbruederlin.github.io/particles.js

▼

漸變

cssgradient.io

▼

漸變層生成器

s.muz.li/NTFiZjk0ZWFh

▼

Unsplash圖片集

unsplash.com

▼

44. Art Palette

https://artsexperiments.withgoogle.com/artpalette/

基于Google AI的智能配色工具，它會根據(jù)你所提供的配色方案來提供相符合的配色主題的藝術(shù)圖片。

45. GradPad

http://ourownthing.co.uk/gradpad.html

CSS漸變生成器，我們可以自己設(shè)置漸變色彩、透明度、位置和角度，還可以查看流行的熱門漸變色彩，并直接使用現(xiàn)成的顏色代碼。

46. Khroma

http://khroma.co/

Khroma號稱是“設(shè)計師的AI顏色工具” ，會先讓你從大量的顏色中選擇你最喜歡的50種，然后利用神經(jīng)網(wǎng)絡(luò)驅(qū)動算法來幫你生成最符合你審美要求的配色方案，并且它所有給出的的配色都是從最流行的配色方案中學(xué)習(xí)得來。

47. Color palettes

ttps://www.canva.com/colors/color-palettes/

Canva上數(shù)千種精選色彩組合

48. Color Safe

http://colorsafe.co/

Color Safe是一個基于Web內(nèi)容無障礙指南（WCAG）的配色網(wǎng)站，可以根據(jù)我們提供的色彩檢測可訪問性，并給出相應(yīng)的調(diào)整方案。

49. Paletton

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Paletton 是一個在線的色環(huán)配色工具。我們可以根據(jù)需要選擇單色、相近色、對比色等規(guī)則來查看配色，也可以實時查看其在網(wǎng)頁中的搭配效果。

50. Colordot

https://color.hailpixel.com/

動一動鼠標就可以不斷生成的新的色卡。非常適合毫無靈感、不知從何下手的設(shè)計師。

51. Colors

https://klart.io/colors/

100％由數(shù)據(jù)驅(qū)動的配色方案集合。

52. Contrast Ratio

https://contrast-ratio.com/

一款輕松計算顏色對比度的配色工具。

53. Color Lisa

http://www.colorlisa.com/

世界上最偉大的藝術(shù)家的色彩杰作。

54. Color Designer

https://colordesigner.io/

只需選擇一種顏色，Color Designer就會幫助我們構(gòu)建一個系統(tǒng)的配色方案，并基于我們所選的顏色生成多種色調(diào)和陰影等。

55. Color.review

https://color.review/

測試顏色對比度的配色工具

56. Blend

http://www.colinkeany.com/blend/

Blend - 創(chuàng)建和自定義漂亮的CSS3漸變。

57. Contrast

https://usecontrast.com/

一個用于快速測試WCAG顏色對比度的macOS應(yīng)用程序

58. Grabient

https://www.grabient.com/

一個非常漂亮且實用的漸變網(wǎng)站，支持 CSS 樣式代碼復(fù)制、360度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。

今天的內(nèi)容就到這里啦~

小伙伴們還知道哪些超贊的配色網(wǎng)站呢？

記得留言告訴我們哦~

*商品入駐和分銷，請發(fā)送具體信息到：ponyco@126.com