整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
變色的搭配能夠在H5當道的移動端，顯示出強悍的吸睛效果。那如何搭配一個漂亮的漸變色，就變成了我們網店裝修，自媒體包裝的難點。
并不是人人都懂設計，我們缺乏的是審美靈感。而下面推薦的這一款工具，能夠給你提供最豐富的漸變配色靈感。
該工具本身是一個網站，如需具體網址，請關注“九公子”頭條號，私信“漸變配色”。
筆者已經設置自動回復。
好了，下面我們看一下使用流程和具體使用場景。
打開網站我們就能直接看到 N 種配色展現在首頁，只需要點擊其中一個，就會顯示全屏漸變。使用方法也非常簡單,直接下載 Sketch/PSD 或復制十六進制顏色編碼即可！
網站概覽
CSS 樣式庫的使用
除了直接 copy 一個 CSS代碼外，我們可還以下載整個 CSS 樣式庫，方便在項目上直接調用。首先我們下載這個 CSS 庫（筆者自動回復中，帶有網址）
STEP 1: 引入 CSS 文件
<html> <head> <link href="webgradients.css" rel="stylesheet"> </head> ...
STEP 2: 給元素加入 class 即可，class 名稱就是漸變色的名，比如007 Sunny Morning 對應的 class=”sunny-morning”
<div class="sunny-morning">...</span>
色號代碼及CSS源碼
下面看一下用漸變配色的案例吧！
在的網頁設計千篇一律，越來越多的設計師想嘗試更加大膽的色彩搭配，所以我們搜集整理了超齊全的一份包含了58個色彩工具的網站，app還有插件，幫助您做成更好的設計。當然這些色彩搭配不是憑空捏造出來的，而是從各個地方獲取來的靈感，結合色彩心理學，這些搭配不僅好看，還符合您更高層次的情感需求。
1.Muzli colors
網址：https://colors.muz.li/
使用此工具可以快速創建編輯調色板，最大的特點是可以根據您創建的色彩搭配直接在app設計模板上預覽，并且還能下載。
2. Colorable
網址：https://colorable.jxnblk.com/
這個工具主要查看字體顏色和背景顏色的對比效果。
3. Color Leap — History’s Palettes
網址：https://colorleap.app/home
這個工具可以搜素過去四千年以來使用的180個調色板。
4. Picular
網址：https://picular.co/
這是一個顏色搜索工具，只要輸入搜索的關鍵詞，就能像google一樣展示相關的顏色，可以復制色號和查看使用該顏色的圖片。
5. Colourcode
網址：https://colourco.de/
colourco.de是一款在線設計工具，可以讓你非常直觀的組合各種顏色。
6. Palettte App
網址：https://palettte.app/
palettte和之前見到的網站不太一樣，它是一款色彩編輯和重映射工具，能夠幫助你從一個顏色中構建出另外一種顏色，還支持單個顏色的微調
7. Colorinspire
網址：https://www.colorinspire.io/
精選各種色彩靈感，可以馬上用在您的設計項目中。
8. ColorSpace
網址：https://mycolor.space/
調色板生成器，以及漸變色工具。只要輸入您的顏色，網站馬上會生成與之相搭配的漸變色和調色板。
9. Pigment
網址：https://pigment.shapefactory.co/
一種根據光線和顏料生成的清新鮮艷的獨特調色板。
10. Adobe Color
網址：https://color.adobe.com/create
這個adobe出品的調色板應該是比較熟悉了，每種顏色方案由五個顏色組成。您可以自己生成，也可以看流行的搭配方案。
11. Colors & Fonts
網址：https://www.colorsandfonts.com/
這是一個為開發者和設計師準備的調色板，漸變色，字體的靈感庫。
12. HueSnap
網址：https://www.huesnap.com/
這是一個可以自己創建色彩搭配并與人共享的網站。獲取顏色的方式可以讀取圖片或者自己選擇。
13. Culrs
網址：https://culrs.com/
culrs為您提供了一個簡單明了的方法來選擇調色板。
14. Eva Design System
網址：https://colors.eva.design/
使用深度學習算法生成的調色板。比較贊的是深色模式，可以看顏色在深色背景下的效果。
15. Scale
網址：https://hihayk.github.io/scale/
一種全新的生成顏色的方式。調整兩邊色顏色，生成中間的混合色。
16. Site Palette
網址：http://palette.site/
一個瀏覽器插件，可以查看正在訪問網頁的配色。設計師和前端工程師必備工具。
17. BrandColors
網址：https://brandcolors.net/
集合了500多個不同品牌的官方用色，包含了facebook，Twitter，instagram等。
18. Colorwise
網址：https://colorwise.io/
這個網站在product hunt中的投票最高，應該深受設計師喜歡。
19. HTML Color Codes
網址：https://htmlcolorcodes.com/
使用這個網站可以很容易的為您的網站查找各種顏色的十六進制顏色代碼，RGB色值，HSL色值。
20. ColorBox
網址：https://www.colorbox.io/
這是一個生成漸變色色值的工具。
21. Generate — Coolors.co
網址：https://coolors.co/
快速生成各種調色板的網站，您可以保存分享這些配色方案。
22. Color — Cloudflare Design
網址：https://cloudflare.design/color/
用于ui界面設計的調色板工具，可以實時查看背景文字圖標選擇框的顏色效果。
23. Instant Duotone Effect Generator
網址：https://duotones.co/
上傳圖片，就能查看圖片生成漂亮的雙色調效果。網站預設十幾種常用的雙色調配色工具。
24. Color Tool — Material Design
網址：https://material.io/resources/color/#!/?view.left=0&view.right=0
安卓app界面設計的好幫手，可以為安卓界面創建調色板，并測試顏色搭配的可訪問性。
25. Blendy
網址：https://blendy.ml/
這是一個快速預覽圖片通過css代碼實現特效后的效果。您可以復制css代碼用在您的設計中。
26. LOL Colors
網址：https://www.webdesignrankings.com/resources/lolcolors/
精選挑選的色彩搭配靈感。
27. Color Hunt
網址：https://colorhunt.co/
Color Hunt是一個免費開放的色彩靈感平臺，擁有數千種時尚的手工挑選的色彩搭配調色板。
28. ColorMe
網址：https://colorme.io/
可視化的css顏色調試網站。
29. Polarite
網址：https://www.polarite.app/
Polarite是一款機器學習的顏色生成app，用于生成和諧的配色方案。
30. Gradient Hunt
網址：https://gradienthunt.com/
精選了數千種時尚漸變色的網站，每天更新。
31. Palettable
網址：https://www.palettable.io/4EDED7
自動生成一個一個的顏色，讓你選擇喜歡或者不喜歡。所有向您展示的顏色都是從數百萬設計師挑選中生成的。
32. ColorSpark
網址：https://colorspark.app/
一個非常簡單的單色和漸變色隨機生成器。
33. SVG Colorizer
網址：https://www.iconshock.com/svg-color/
自動為svg圖標和插畫配色，這些svg文件可以是網站提供的，也能自己上傳。
34. Sip
網址：https://sipapp.io/
適用于Mac的拾色軟件，可以收集整理分享各種配色方案。
35. CoolHue 2.0
網址：https://webkul.github.io/coolhue/sketch-plugin/
sketch上使用的漸變色調色板插件。
36. Color Koala
網址：https://colorkoala.xyz/
一個快速生成調色板的工具，可以定義深色，淺色，色系。
37. SchemeColor
網址：https://www.schemecolor.com/
這是一個包含了數千個美麗色彩組合的網站，網站不僅可以查看并下載色彩搭配，還有展示色彩搭配的靈感來源圖片。
38. Free Mesh Gradient Collection
網址：https://www.ls.graphics/meshgradients
這是一個生成融合在一起的多種漸變色工具的網站，可以下載sketch，ai，eps，jpg等格式。
39. WebGradients
網址：https://webgradients.com/
由頂級設計師策劃的180個漸變色，可以下載sketch格式、psd格式文件，保存png文件，獲取css3代碼。
40. Gradient Buttons
網址：https://gradientbuttons.colorion.co/
漸變色設計的按鈕，并且帶懸停效果，可以復制css代碼用在您的設計中。
41. ColorKit
網址：https://colorkit.io/
色彩混合工具，混合兩種顏色生成多個顏色。
42. Eggradients
網址：https://www.eggradients.com/
金蛋形狀展示漸變色，可以復制十六進制色值和css代碼。
43. Cool Backgrounds
網址：https://coolbackgrounds.io/
帶紋理效果的漸變色背景生成器，可以用于博客，網站，桌面，壁紙背景。
44. Google Art & Culture Experiment — Art Palette
網址：https://artsexperiments.withgoogle.com/artpalette/colors/242726-886c5f-d04b18-dfb24a-d4c5aa
結合藝術與文化的體驗探索，通過選擇色彩搭配搜索藝術作品。
45. GradPad
網址：http://ourownthing.co.uk/gradpad.html
漸變色生成器，隨意挪動兩個按鈕，在網頁中創建可愛的漸變色。
46. Khroma
網址：http://khroma.co/
Khroma是生成，發現，搜索和保存您想要使用的顏色組合和調色板的好工具。
47. Color palettes
網址：https://www.canva.com/colors/color-palettes/
瀏覽Canva的數千種顏色組合！非設計師專用。
48. Color Safe
網址：http://colorsafe.co/
測試網站的顏色使用的可訪問性，讓您的網站給美觀易用。
49. Paletton
網址：http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
使用色輪創建調色板。
50. Colordot
網址：https://color.hailpixel.com/
非常簡單的顏色選擇器。
51. Colors
網址：https://klart.io/colors/
100％由數據驅動的配色方案集合。
52. Contrast Ratio
網址：https://contrast-ratio.com/
一款輕松計算顏色對比度的配色工具。
53. Color Lisa
網址：http://www.colorlisa.com/
世界上最偉大的藝術家的色彩杰作。
54. Color Designer
網址：https://colordesigner.io/
只需選擇一種顏色，Color Designer就會幫助我們構建一個系統的配色方案，并基于我們所選的顏色生成多種色調和陰影等。
55. Color.review
網址：https://color.review/
用于探索和查找可訪問顏色的現代工具。確保每個人都能看到您的作品。
56. Blend
網址：http://www.colinkeany.com/blend/
創建和自定義漂亮的CSS3漸變色。
57. Contrast
網址：https://usecontrast.com/
用于快速訪問WCAG色彩對比度的macOS軟件。
58. Grabient
網址：https://www.grabient.com/
一個非常漂亮且實用的漸變網站，支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。
這么多的色彩工具就先到這里啦~
如果小伙伴們還發現哪些超贊的配色網站可以留言告訴我們～
為室內設計師的你
是不是時常對配色感到頭疼呢？
覺得配色難或是花費時間大？
今天蘭姨來分享幾個
好用的色彩搭配網站
大家收藏效果更佳~
https://uigradients.com/
Uigradients是以漸變色彩為主的網站，里面接近上百種漸變配色方案，可根據自己風格來選擇搭配，點擊左上角，就可以瀏覽所有的配色圖，點擊你喜歡的圖片就可以查看大圖，右上角有免費下載的按鈕，選好你喜歡的配色就可以直接下載，還可以分享到你的社交賬號。
https://color.adobe.com/zh/
Adobe color 是一家在線色輪，提供RGB、CMYK、LAB、SHB、HEX五種色彩模式，非常人性化，用戶可以根據自己的配色要求進行實時搭配，是配色的絕佳去處。
Nipponcolors
Nipponcolors日本傳統配色網站，網站直接給出了各種顏色的CMYK值，RGB值，以色卡的形式呈現，當你點擊某個顏色的色卡時，整個網頁都會變成成你選擇的這個顏色，方便我們查看這種顏色是否適合大面積的使用。
http://www.flatuicolorpicker.com/
Flat Design應該是設計師們必不可少的一個網站，這個網站能夠進行顏色自動分類。
http://colorhunt.co/
該網站是以四色搭配板塊展現的，還可以通過PS拾取色彩信息。
http://www.peise.net
中文的配色網，內有許多色彩知識提供學習。有HEX、RGB、CMYK三種模式，可以下載應用到:Photoshop/AI 網頁端:HTML/CSS。
https://www.materialpalette.com/
Material Palette是一款提供Material Design配色的線上工具，它的用法很簡單，你只要找出想要搭配的兩種顏色，它就會顯示出兩種顏色搭配在一起的效果預覽，并提供你較深或較淺的顏色選項，以及其他你可能會用到的顏色代碼。
Coolors
Coolors是一個可以讓你簡單快速地選色生成工具，為你找出配色的靈感，該網站每次會為你挑選由五種顏色組合而成的調色盤，并顯示顏色的代碼，你可以快速選取使用，或是鎖定其中的幾種顏色。
http://zhongguose.com/
這是國內相對較好的色彩搭配網站了，提供RGB和CMYK兩種色彩模式，十分有中國特色。
Skala Color
Skala Color是一款為設計師和開發者而生的優質取色工具。這款取色器小巧簡潔但功能豐富，適用于OS X系統，支持大量的格式（如十六進制、CSS的RGBA模式或HSL模式、UIColor亦或是NSColor等等），在web、iOS、Android、或OS X開發商都能勝任。
https://colordrop.io/
四宮格配色，點一個就能顯示四個的色號，直接復制到ps或者是AI，使用起來非常方便。
http://webgradients.com
這里有很多漸變色的運用，有時候腦袋卡殼了，可以在這里尋找顏色的靈感。
https://color.hailpixel.com/
Color by Hailpixel這個網站可以調整色調、亮度、飽和度等等，使用起來十分便捷。
http://colrd.com/
這個網站可以根據顏色、漸變、調色板等尋找圖像資料。
ColorHexa
它能幫助我們擴展這個色彩，搭配出數種方案，甚至還有色盲修正方案。如果你只能確定一個必須使用的顏色，選擇這個工具或許能獲得一些靈感。
Color Scheme Designer
這是一個在線的配色工具，相比于Adobe color ，它擁有詳細的色彩修改方法，和簡單的顏色演示工具。國內有個舊版本的漢化版，不過還是建議去官網使用最新的。
LOL Colors
這是一個非常簡潔，但非常好用的配色網站，設計師們可以在這里找到很多色彩組合，把鼠標移動到不同顏色的水滴上會提示色彩代碼(Hex Code)的顏色值。
Colorfavs
用戶只需要把一張圖片上傳到網站上，系統會自動分析圖片里的顏色，并生成色系值，系統根據圖片推測你喜歡的色盤搭配。
http://www.colourlovers.com/
色彩社區不僅可以配色，還可以共享他人的色彩，共同切磋學習。
https://brandcolors.net/
該網站總結各企業品牌主打的配色，從里面找尋家居配色靈感也是不錯的選擇。
今天就分享到這啦，希望以上的配色網站能夠激發你們配色靈感，在設計的時候，不再讓配色成為你煩惱所在！
該文為原創內容
未經授權不得隨意轉載
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
