当前位置: 首页 >配色方案 >设计配色网站搭配方案,为你分享15个配色网站

设计配色网站搭配方案,为你分享15个配色网站

2022-07-18 09:08:02 配色方案
610 0

有时候我觉得配色是一种“feel”,当你胡乱调色后,发现,这组颜色不错,有冲击力,或是明媚亮眼,或是平淡如水,或是热情似火,或是淡雅如菊。

关于配色的网站


但其实配色是有规律可循的,而且严格说起来还颇为讲究,现在的营销海报、创意网站、设计图形都少不了配色,这可谓是重大环节,那么怎么配色呢?看这里▼

01

Flatuicolorpicker

网站地址:
http://www.flatuicolorpicker.com/

扁平化UI设计配色方案。非常实用配色工具,提供各种颜色合集,可以帮助你运用到扁平化UI中,点击右上角展开多种主色界面,随你快速选取颜色,如果你在设计某一个项目,可以考虑使用它。

配色搭配网站


颜色设计网站


02

Materialpalette

网站地址:
https://www.materialpalette.com/

调色板生成器。致力于为设计师们提供颜色组合搭配的工具,用户只需要在这里选择一两个颜色,系统就可以自己快速生成设计风格配色方案,选择颜色的同时你还可以实时预览效果图。

关于配色的网站


网站的配色方案


03

Brandcolors

网站地址:https://brandcolors.net/

官方品牌颜色代码集合。网站收录了多种品牌的颜色代码,内容由A-Z顺序排列。
涵盖500px、Airbnb、Amazon、Dribbble、acebook、Twitter、Instagram等500多个品牌的十六进制颜色代码。

颜色设计网站


04

MaterialUI

网站地址:
https://www.materialui.co/colors

国外material 风格页面设计框架。提供材质设计颜色、材质颜色、调色板、调色板生成器,Google材质UI颜色,材质设计颜色选择器等不同风格搭配。

网站 配色


网站的配色方案


05

Grabient

网站地址:https://www.grabient.com/

一个可以用于生成web渐变得漂亮、简单的UI。一个在线渐变配色网站,设计贴心,用户可以交互操作,你可以用他更快地实现漂亮的渐变效果。

色彩设计网站


网站支持 CSS 样式代码复制、可以操控360度渐变旋转、自由增加或删除渐变颜色。下面给大家分享几个简单操作。

颜色设计网站


❶渐变角度:点击左下角“90度”图标操控渐变角度;

❷增加配色:点击“+”加号就可以,同时还能选择颜色;

❸改变渐变范围:点击右下角图标,即可通过鼠标拖动设置渐变范围;

❹删除色块:选择一个色块,将内容拖动到右下角“垃圾桶”图标即可。

❺切换颜色模式:用户可以在HSL,RGB,HEX 之间切换。

网站配色分析


06

Uigradients

网站地址:https://uigradients.com/

一个为设计师和开发人员提供的在线渐变色彩配色网站,网站中的内容都是精心挑选的色彩渐变。
这里涵盖接近上百种渐变配色方案,设计师可任意选择,同时还可以获取对应渐变配色的CSS代码。

关于配色的网站


UIgradients简单使用方法:❶点击左上角进入所有的配色图浏览界面;❷选择任意图片可放大查看,图片右上角提供免费下载按钮,可直接下载自己喜欢的配色。

07

Webgradients

网站地址:https://webgradients.com/
CSS库:

https://github.com/itmeo/webgradients

提供180种渐变配色灵感的网站。之前的网站大部分都是提供渐变色的,这个网站多了一些格式选择,如PSD, Sketch, PNG,还有能够直接复制成一段 CSS 渐变代码,方便用户使用配色方案。

网站高级配色


Webgradients简单使用方法:

❶打开网站可以看到多种配色方案,选择其中一个配色,即可得到全屏显示的渐变色;

❷我们可以直接下载 Sketch/PSD 或复制十六进制颜色编码就可以使用了。

网站 配色


网站配色分析


08

Colorfavs

网站地址:http://www.colorfavs.com

在线图片颜色搭配工具。用户可以直接上传图片分析配色,获取大量的优质配色方案。通过搜索某一个颜色,网站即可提供关于这个颜色的不同配色方案及相关颜色。

设计配色网站


网站界面设计简洁,浏览方便,同时提供收藏(点击Add to Collection收藏)配色方案功能,直接拖拽上传图像抓取颜色配色,操作方便。

网站高级配色


关于配色的网站


09

Duotones

网站地址:https://duotones.co/

图片双色调生成器,一个可以帮助图片制作双色效果的工具。这种双色调设计风格在国外比较流行,如果你不懂ps设计,可以用他一键生成双色调风格的照片。

网站高级配色


10

0to255

网站地址:https://www.0to255.com/

一个帮助网页设计师简单的取色工具。如果你对配色有大大的疑惑,深刻感受到选色的困难,你可以用它来帮助你的徽标、网站、业务、房间或打印设计项目选择并调整颜色,让配色更合适。

网站设计配色方案


如果你希望发现一种新颜色,可以使用“随机选色”功能作为起始色,网站可提供286,943种色彩选择。使用方法很简单,只要获得正确代码,就可以直接键入,如选择#d86b93十六进制颜色时,键入d86b93,单击“选择颜色”按钮即可,可以大大滴节省时间。

网站的配色方案


11

Colorhunt

网站地址:https://colorhunt.co/

颜色猎人,在线设计配色工具。这个网站比较有特色的部分就是它会使用饱和度调配配色方案。

网站设计配色方案


网站提供:

❶每天根据浏览量进行更新排版,并可以直接使用。

❷免费开放的色彩灵感平台,拥有数千种时尚的手工挑选调色板。

❸点击“random”给自己来点惊喜。

❹收录了许多配色和色码卡,帮助产品设计者更好的选择颜色搭配组合。

网站配色分析


12

Coolors

网站地址:https://coolors.co/

极简的配色方案生成器。很多美工都会为配色烦恼吧,该选择哪种颜色呢?这时候你就需要它里 ,一个超级简单的配色方案生成器,一次为你提供一种配色方案。

色彩设计网站


❶敲击“空格键”可查看不同的配色方案;

❷点击色块可以锁定当前颜色,查看其他关联的配色组合;

❸指定一个颜色,点击色块下方的 HEX 颜色值即可直接编辑。

网站经典配色


13

Colordrop

网站地址:https://colordrop.io/

在线颜色组合调试工具。网站提供丰富的上百万种色彩组合,是设计开发绝佳的色彩来源站点,可以帮助设计者们在线调试颜色组合。

网站配色分析


❶我们在网站可以看到四个不同的颜色整合在一起配色,在首页即可浏览色彩调色盘,可在左侧切换不同背景色彩;

❷点击其中任一配色组合后,会跳出对应的颜色参数(HEX/RGB),设计师可以将这些颜色应用于设计项目;

❸你可以更换不同背景颜色,预览不同背景下的更多色彩体验;

❹另外,点选上方的“星星”可标记为Favourites。

❺点选左侧“Favourites”可开启所有你加入收藏的配色组合。

网站配色分析


14

中国色

网站地址:http://zhongguose.com/

超美的中国风配色网站。,提供各种中国的传统颜色的名称,CMYK值,RGB值,16进制表示。

配色搭配网站


15

Flatuicolors

网站地址:https://flatuicolors.com/

扁平化设计配色参考网站。这个网站的特色就是采集了多种扁平化设计中受欢迎的色彩,你可以吸取复制里面的任何色彩。你可以免费选择和下载设置到本地。

网站设计配色方案


配色搭配网站


好了,关于色彩,你还有什么资源和建议,欢迎留言分享哟!今天的绚丽的色彩分享就到这里啦!


Copyright © 2021 All Rights Reserved 版权所有 一舟讲堂