网页设计中背景颜色代码(网页设计中背景颜色代码怎么写)

我们在搜索设计创意的时候，经常能看到一些酷炫的渐变背景，很多时候突然去找或者临时搜索，反而没有太好的渠道和路径，今天我把一些高大上的渐变配色实用网站整理在一起，方便新手朋友们用的时候更得心应手，朋友们，记得收藏一下哈。

一、Cool Backgrounds

网站介绍：Cool Background 是由5个开源生成器整理组成的彩色渐变图像集合在一起的工具集，内置5种不同的背景风格，每一种风格还提供了简单的参数配置。非常的炫酷美观。

低模三角形

粒子

CSS渐变

阶梯渐变

图片

使用方式：左侧选择不规则形状、图形、渐变背景、图片等，右侧可以选择不同的色彩组合，选择适合自己的色彩风格后，点击下载即可。

二、180种渐变背景

网站介绍：内含180种渐变配色方案，特别好看美观，适合各种场景模式下的背景使用。

使用方式：选择适合自己场景的渐变色，可拷贝css格式，也可下载png格式。

三、Pigment

网站介绍：可通过改变饱和度、色温和色系改变配色方案，还可通过查看场景效果观察此配色方案呈现效果。

网站截图

饱和度 亮度 颜色

选中和更多

使用方式：左侧可以选择不同的饱和度和亮度，选择其他色调，右侧放大可查看场景配色效果。

四、ColorSpace

网站介绍：Color Space 是一款非常实用的渐变生成器，我们只需要选择一个颜色，就可以快速生成20-30种不同风格的配色方案。同时还提供了梯度和三色渐变选项，可以快速生成配色并查看 CSS 代码。

网站截图

输入颜色代码或选择颜色

生成方案

更多与修改

CSS代码模式

三色渐变

使用方式：上面输入色值，自动出来渐变方案，还可左右滑动选择适合自己的搭配方案

五、Adobe Color

网站介绍：可自由选择色环上不同的颜色值，依照类比、单色、三原色、补色等不同搭配模式进行搭配，下面展示一系列色值。同时可将看到的好的图片色纸上传上来，自动配比色值，同时，还能查看背景色与文字的对比度检测，非常适合网站多色搭配。

色轮

辅助工具

使用方式：滑动多tab滑块，选择色环颜色做不同类型搭配；利用协助工具查看文字与背景的对比检测。

六、BrandColors

网站介绍：这个网站是基于最大的官方品牌颜色做整理，包含了众多品牌颜色官网的配色方案，可作为网站或者品牌配色的借鉴。

颜色方案

选中后复制下载

使用方式：选择好相关品牌的色彩调性，可查看色值，可复制色值，也可以下载相关色值，超级方便。

七、Color Leap

网站介绍：一键生成复古风图片色调分离，可以选择年代搜索过去180种配色方案。

年份选择

年份列表

代表图片和查看颜色

查看颜色和查看图片

使用方式：选择年代，选择图片风格的配色方案，查看颜色，复制相关色调即可。

八、ColorBox

网站介绍：ColorBox 是选择一个颜色，会生成一个颜色系列的颜色工具。可以帮助我们轻松地创建非常炫酷的色彩集，配色页面还有大量的个性化选项，满足我们的任何需求。

网站截图

饱和

使用方式：左侧可以添加不同的颜色分类值，右侧调整搭配的颜色系列和同色系和补色系不同选择，曲线直观展示出色调和饱和度的变化幅度。

九、Eggradients

网站介绍：Eggradients 是一款收录了最新设计趋势渐变色彩的配色网站，以鸡蛋的形式展现，支持一键复制。

预选颜色

渐变调色板

使用方式：选择适合自己设计场景的配色方案，复制即可。

十、CoolHue 2.0

网站介绍：CoolHue 2.0是一款免费的 Sketch 渐变配色插件和收集工具。

使用方式：在sketch下载插件，直接点击插件，选择相关配色。

十一、Free Mesh Gradient Collection

网站介绍：包含100多个免费的渐变色合集，支持 Sketch、PNG、AI、JPG、EPS 等多种格式下载。

网站截图

翻译截图

渐变截图

使用方式：可选择ai、eps、jpg、png格式，选择好看的渐变色下载即可。

十二、Grabient

网站介绍：Grabient 一个非常漂亮且实用的渐变网站，支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。

网站截图

调整角度

调整颜色

渐变比例

使用方式：选择适合自己风格的配色方案，点开调整渐变梯度，下载即可。

来源网络