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