12個免費漸變配色工具，真的非常好用

Sponsor

前言：一共12款優秀的漸變配色工具，每一款各有特色，有的是生成漸變背景，有的可以輸出CSS漸變代碼，以及一些是已經有專業設計師設計好的背景圖案，都很好看，工具簡單容易上手，推薦大家分享和收藏。

一、Cool Backgrounds

網站鏈接：https://coolbackgrounds.io/

網站介紹：Cool Background 是由5個開源生成器整理組成的彩色漸變圖像集合在一起的工具集，內置5種不同的背景風格，每一種風格還提供了簡單的參數配置。非常的炫酷美觀。

粒子

CSS漸變

階梯漸變

圖片

使用方式：左側選擇不規則形狀、圖形、漸變背景、圖片等，右側可以選擇不同的色彩組合，選擇適合自己的色彩風格后，點擊下載即可。

二、180種漸變背景

網站鏈接：https://www.fengtupic.com/colortool

網站介紹：內含180種漸變配色方案，特別好看美觀，適合各種場景模式下的背景使用。

使用方式：選擇適合自己場景的漸變色，可拷貝css格式，也可下載png格式。

三、Pigment

網站鏈接：https://pigment.shapefactory.co/

網站介紹：可通過改變飽和度、色溫和色系改變配色方案，還可通過查看場景效果觀察此配色方案呈現效果。

網站截圖

飽和度? 亮度 顏色

選中和更多

使用方式：左側可以選擇不同的飽和度和亮度，選擇其他色調，右側放大可查看場景配色效果。

四、ColorSpace

網站鏈接：https://mycolor.space/

網站介紹：Color Space 是一款非常實用的漸變生成器，我們只需要選擇一個顏色，就可以快速生成20-30種不同風格的配色方案。同時還提供了梯度和三色漸變選項，可以快速生成配色并查看 CSS 代碼。

網站截圖

輸入顏色代碼或選擇顏色

生成方案

更多與修改

CSS代碼模式

三色漸變

使用方式：上面輸入色值，自動出來漸變方案，還可左右滑動選擇適合自己的搭配方案

五、Adobe Color

網站鏈接：https://color.adobe.com/zh/create/color-wheel

網站介紹：可自由選擇色環上不同的顏色值，依照類比、單色、三原色、補色等不同搭配模式進行搭配，下面展示一系列色值。同時可將看到的好的圖片色紙上傳上來，自動配比色值，同時，還能查看背景色與文字的對比度檢測，非常適合網站多色搭配。

色輪

輔助工具

使用方式：滑動多tab滑塊，選擇色環顏色做不同類型搭配；利用協助工具查看文字與背景的對比檢測。

六、BrandColors

網站鏈接：https://brandcolors.net/

網站介紹：這個網站是基于最大的官方品牌顏色做整理，包含了眾多品牌顏色官網的配色方案，可作為網站或者品牌配色的借鑒。

顏色方案

選中后復制下載

使用方式：選擇好相關品牌的色彩調性，可查看色值，可復制色值，也可以下載相關色值，超級方便。

七、Color Leap

網站鏈接：https://colorleap.app/home

網站介紹：一鍵生成復古風圖片色調分離，可以選擇年代搜索過去180種配色方案。

年份選擇

年份列表

代表圖片和查看顏色

查看顏色和查看圖片

使用方式：選擇年代，選擇圖片風格的配色方案，查看顏色，復制相關色調即可。

八、ColorBox

網站鏈接：https://www.colorbox.io/

網站介紹：ColorBox 是選擇一個顏色，會生成一個顏色系列的顏色工具?？梢詭椭覀冚p松地創建非常炫酷的色彩集，配色頁面還有大量的個性化選項，滿足我們的任何需求。

網站截圖

飽和

使用方式：左側可以添加不同的顏色分類值，右側調整搭配的顏色系列和同色系和補色系不同選擇，曲線直觀展示出色調和飽和度的變化幅度。

九、Eggradients

網站鏈接：https://www.eggradients.com/

網站介紹：Eggradients 是一款收錄了最新設計趨勢漸變色彩的配色網站，以雞蛋的形式展現，支持一鍵復制。

預選顏色

漸變調色板

使用方式：選擇適合自己設計場景的配色方案，復制即可。

十、CoolHue 2.0

網站鏈接：https://webkul.github.io/coolhue/sketch-plugin/

網站介紹：CoolHue 2.0是一款免費的 Sketch 漸變配色插件和收集工具。

使用方式：在sketch下載插件，直接點擊插件，選擇相關配色。

十一、Free Mesh Gradient Collection

網站鏈接：https://www.ls.graphics/meshgradients

網站介紹：包含100多個免費的漸變色合集，支持 Sketch、PNG、AI、JPG、EPS 等多種格式下載。

網站截圖

翻譯截圖

漸變截圖

使用方式：可選擇ai、eps、jpg、png格式，選擇好看的漸變色下載即可。

十二、Grabient

網站鏈接：https://www.grabient.com/

網站介紹：Grabient 一個非常漂亮且實用的漸變網站，支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。

網站截圖

調整角度

調整顏色

漸變比例

使用方式：選擇適合自己風格的配色方案，點開調整漸變梯度，下載即可。

來源公眾號：學UI網（id:xueuiwang）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。