01 Cool Backgrounds
網(wǎng)站鏈接：https://coolbackgrounds.io/
網(wǎng)站介紹：Cool Background 是由5個開源生成器整理組成的彩色漸變圖像集合在一起的工具集，內(nèi)置5種不同的背景風(fēng)格，每一種風(fēng)格還提供了簡單的參數(shù)配置。非常的炫酷美觀。
低模三角形
粒子
CSS漸變
階梯漸變
圖片
使用方式：左側(cè)選擇不規(guī)則形狀、圖形、漸變背景、圖片等，右側(cè)可以選擇不同的色彩組合，選擇適合自己的色彩風(fēng)格后，點(diǎn)擊下載即可。
02 180種漸變背景
網(wǎng)站鏈接：https://www.fengtupic.com/colortool
網(wǎng)站介紹：內(nèi)含180種漸變配色方案，特別好看美觀，適合各種場景模式下的背景使用。
使用方式：選擇適合自己場景的漸變色，可拷貝css格式，也可下載png格式。
03 Pigment
網(wǎng)站鏈接：https://pigment.shapefactory.co/
網(wǎng)站介紹：可通過改變飽和度、色溫和色系改變配色方案，還可通過查看場景效果觀察此配色方案呈現(xiàn)效果。
網(wǎng)站截圖
飽和度 亮度 顏色
選中和更多
使用方式：左側(cè)可以選擇不同的飽和度和亮度，選擇其他色調(diào)，右側(cè)放大可查看場景配色效果。
04 ColorSpace
網(wǎng)站鏈接：https://mycolor.space/
網(wǎng)站介紹：Color Space 是一款非常實(shí)用的漸變生成器，我們只需要選擇一個顏色，就可以快速生成20-30種不同風(fēng)格的配色方案。同時還提供了梯度和三色漸變選項(xiàng)，可以快速生成配色并查看 CSS 代碼。
網(wǎng)站截圖
輸入顏色代碼或選擇顏色
生成方案
更多與修改
CSS代碼模式
三色漸變
使用方式：上面輸入色值，自動出來漸變方案，還可左右滑動選擇適合自己的搭配方案
05 Adobe Color
網(wǎng)站鏈接：https://color.adobe.com/zh/create/color-wheel
網(wǎng)站介紹：可自由選擇色環(huán)上不同的顏色值，依照類比、單色、三原色、補(bǔ)色等不同搭配模式進(jìn)行搭配，下面展示一系列色值。同時可將看到的好的圖片色紙上傳上來，自動配比色值，同時，還能查看背景色與文字的對比度檢測，非常適合網(wǎng)站多色搭配。
色輪
輔助工具
使用方式：滑動多tab滑塊，選擇色環(huán)顏色做不同類型搭配；利用協(xié)助工具查看文字與背景的對比檢測。
06 BrandColors
網(wǎng)站鏈接：https://brandcolors.net/
網(wǎng)站介紹：這個網(wǎng)站是基于最大的官方品牌顏色做整理，包含了眾多品牌顏色官網(wǎng)的配色方案，可作為網(wǎng)站或者品牌配色的借鑒。
顏色方案
選中后復(fù)制下載
使用方式：選擇好相關(guān)品牌的色彩調(diào)性，可查看色值，可復(fù)制色值，也可以下載相關(guān)色值，超級方便。
07 Color Leap
網(wǎng)站鏈接：https://colorleap.app/home
網(wǎng)站介紹：一鍵生成復(fù)古風(fēng)圖片色調(diào)分離，可以選擇年代搜索過去180種配色方案。
年份選擇
年份列表
代表圖片和查看顏色
查看顏色和查看圖片
使用方式：選擇年代，選擇圖片風(fēng)格的配色方案，查看顏色，復(fù)制相關(guān)色調(diào)即可。
08 ColorBox
網(wǎng)站鏈接：https://www.colorbox.io/
網(wǎng)站介紹：ColorBox 是選擇一個顏色，會生成一個顏色系列的顏色工具。可以幫助我們輕松地創(chuàng)建非常炫酷的色彩集，配色頁面還有大量的個性化選項(xiàng)，滿足我們的任何需求。
網(wǎng)站截圖
飽和
使用方式：左側(cè)可以添加不同的顏色分類值，右側(cè)調(diào)整搭配的顏色系列和同色系和補(bǔ)色系不同選擇，曲線直觀展示出色調(diào)和飽和度的變化幅度。
09 Eggradients
網(wǎng)站鏈接：https://www.eggradients.com/
網(wǎng)站介紹：Eggradients 是一款收錄了最新設(shè)計(jì)趨勢漸變色彩的配色網(wǎng)站，以雞蛋的形式展現(xiàn)，支持一鍵復(fù)制。
預(yù)選顏色
漸變調(diào)色板
使用方式：選擇適合自己設(shè)計(jì)場景的配色方案，復(fù)制即可。
10 CoolHue 2.0
網(wǎng)站鏈接：https://webkul.github.io/coolhue/sketch-plugin/
網(wǎng)站介紹：CoolHue 2.0是一款免費(fèi)的 Sketch 漸變配色插件和收集工具。
使用方式：在sketch下載插件，直接點(diǎn)擊插件，選擇相關(guān)配色。
11 Free Mesh Gradient Collection
網(wǎng)站鏈接：https://www.ls.graphics/meshgradients
網(wǎng)站介紹：包含100多個免費(fèi)的漸變色合集，支持 Sketch、PNG、AI、JPG、EPS 等多種格式下載。
網(wǎng)站截圖
翻譯截圖
漸變截圖
使用方式：可選擇ai、eps、jpg、png格式，選擇好看的漸變色下載即可。
12 Grabient
網(wǎng)站鏈接：https://www.grabient.com/
網(wǎng)站介紹：Grabient 一個非常漂亮且實(shí)用的漸變網(wǎng)站，支持 CSS 樣式代碼復(fù)制、360度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。
網(wǎng)站截圖
調(diào)整角度
調(diào)整顏色
漸變比例
使用方式：選擇適合自己風(fēng)格的配色方案，點(diǎn)開調(diào)整漸變梯度，下載即可。
后續(xù)仍然會給大家持續(xù)帶來 #學(xué)UI網(wǎng)干貨分享（其中包括在線配色網(wǎng)站、在線工具、插件等）
謝謝大家的持續(xù)關(guān)注！~
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》12種超級好用的-免費(fèi)漸變神器
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.payeee.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司