好用的配色网站、取色网站、色彩小工具OvO

不论是平时我们写个网站,还是设计师做设计,小到平时做个PPT什么的,都需要一个配方案啊。想我以前写网页时候为了颜色搭配而头秃。今天整理收藏夹发现了我以前收藏的配色网站以及其他一些关于颜色的小网站,分享一下(其实我就是要删了他们,怕我以后又用得到,找个地方记下来而已。)

配色网站:Colourcode ★★★★★

地址:https://colourco.de/
有以下几个配色选项,
在这里插入图片描述

  • Free Build - 选定一个颜色 Monochrome - 单色配色方案:就是你选一个绿色,他会出现物种绿色形成一个渐变配色。
  • Monochrome & Dark Gray - 单色和深灰色:你选中的颜色和深灰色进行过渡
  • Monochrome & Light Gray - 单色和浅灰色:你选中的颜色和浅灰色进行过渡
  • Analogic - 对比:反色配色
  • Analogic & Complement - 对比与互补:顾名思义相近色系和对比色系
  • ……

在这里插入图片描述在这里插入图片描述
进入页面之后不要急着点击,可以先找到一个你喜欢的颜色,移动鼠标即可寻找,找到喜欢的颜色之后点击一下屏幕即可选定。你也可以先选一个单色,然后点击不同的配色方案即可直接转换。配色数量可以自由增加或减少。当然你也可以随便选定,然后点击设置,输入自己喜欢的颜色的代码(支持HEX、RGB等6种常见颜色表示方法)。如果选错了颜色,点击删除即可重新选择。

配色网站:palettable ★★★★☆

地址:https://www.palettable.io/
国内打不开,界面比较简洁,也比较佛系,开局随机给你一个颜色,喜欢就like选定,不喜欢就dislike系统重新再给你一个随机颜色。选定第一个之后系统会随机给你第二个,当然是有算法的,在我弄到第五个颜色的时候我感觉到后面的虽然是随机给,但是会给色系相近或者相反的,染整搭配起来比较舒服。可以用于发掘配色灵感吧。不建议使用,反正一般你也打不开。
在这里插入图片描述

配色网站:Color Scheme Designer ★★★★★

地址:http://www.peise.net/tools/web/
在这里插入图片描述
点进网页是这样的,我觉得这个网站设计的初衷就是给写前端的程序猿。网页区域划分如下:
①配色方案:选择一个配色方案
②配色方案显示:你选择配色方案之后,系统会自动生成对应方案的配色
③色彩选定:可以点击色环选取自己想要的颜色
④颜色预览:将你选定的颜色做出一个大致布局后的色彩
⑤自定义输入:点击可以自己输入颜色的十六进制

看看上边图片的底下那一栏,还有配色方案调节,色彩列表、高低明度网页演示。

  • 配色方案调节就是你可以尝试各种系统给定的预设方案,调节色彩参数等等。
    在这里插入图片描述
  • 色彩列表:你可以看到系统自动生成的颜色的十六进制表示。
    在这里插入图片描述
  • 高低明度网页展示:顾名思义点击之后会自动给你生成一个页面,你可以自己预先看看效果。
    在这里插入图片描述

配色网站:paletton ☆☆☆☆☆

地址:http://paletton.com/
我看好多人推这个,我也跟风瞎推,跟我推荐的上边那个一模一样,可以简单理解为上一个的英文版,国内半天加载不出来,不建议使用。
在这里插入图片描述

配色网站:Colrd ★★★★☆

地址:http://colrd.com/
这个主要是给各位提供配色思路的,图片都是其他用户分享的,自己不会配色那就康康其他大佬是怎么搞得吧ε=ε=(ノ≧∇≦)ノ
在这里插入图片描述

配色网站:Colorsupply ★★★★☆

地址:https://colorsupplyyy.com/app
点击左右,获取配色方案,然后系统会给你生成一堆,你点右边配色方案即可,下拉可以看到你选中的方案生成的图标啊之类的。
在这里插入图片描述
在这里插入图片描述

配色网站:Adobe Color CC ★★★★★

地址:https://color.adobe.com/create/color-wheel/
Adobe Color CC可以选择不同的调色规则,拖动小圆点即可,也支持自己输入颜色。然后还有一个功能是你可以上传图片提取配色方案。

在这里插入图片描述

配色网站:colorexplorer ★★★☆☆

这个也是一个上传图片自动生成配色方案的,可能是因为这个页面比较丑,所以让我感觉没有Adobe那个好用。
在这里插入图片描述
在这里插入图片描述

配色网站:colorfavs ☆☆☆☆☆

地址:http://www.colorfavs.com/
这个也是上传图片就给你生成配色方案,但是不知道为什么我上传图片他也不给我生成。
在这里插入图片描述

配色网站:uigradients ★★★★☆

地址:https://uigradients.com/#AzurLane
这是个渐变色配色网站,他给定了好多渐变色配色,你可以点击左右切换,漫无目的地随机选择,也可以从左侧选项卡找自己喜欢的配色。
在这里插入图片描述

配色网站:WebGradients ★★★★☆

地址:https://webgradients.com/
图可以看出来,配色都比较小清新。该网站收录了180个渐变配色,github上的一个项目,作者原话是可以免费用于网站任何部分的内容背景。可以一键复制CSS3代码,还提供.PNG版本和Sketch&Photoshop的软件包。github地址戳这里→stargazers
在这里插入图片描述

配色网站:LOLCOLORS ★★★☆☆

地址:https://www.webdesignrankings.com/resources/lolcolors/
提供各种配色方案,鼠标移动上去即可显示代码。
在这里插入图片描述

配色网站:colorhunt ★★★☆☆

地址:https://colorhunt.co/
跟上边那个一样,提供各种配色方案,鼠标移动上去即可显示代码。
在这里插入图片描述

配色网站:materialpalette ★★☆☆☆

地址:https://www.materialpalette.com/teal/yellow
这个网站作为一个配色网站来说实在是太鸡肋了,因为配色功能只能让你选两种颜色,然后给你显示一下配色效果(并且没什么卵用)╮( •́ω•̀ )╭
菜单栏有三个选项:PALETTES、ICONS、COLORS

  • PALETTES:就是我说的鸡肋配色
  • ICONS:提供一些小图标,这个网站是国外的,打开速度比较慢,单纯需要图标也不建议来这。阿里的图标库不香吗?
  • COLORS:这个页面如下图,就是你可以点击它给的色条,来看看可以取什么颜色进行相近配色。
    在这里插入图片描述

色彩网站:中国色 ★☆☆☆☆

地址:http://zhongguose.com/
里边有各种中国风传统配色,你只需要点击相应配色即可显示颜色代码和对应的中国名称。当然了仅供查名字,我不是很喜欢这个网站,因为它本身配色就反人类,就很不清晰!!!非常不清晰!!!见下面的GIF就懂了,我每次看都觉得自己瞎了。
在这里插入图片描述
在这里插入图片描述
看看!感受到多么反人类了吗!!!不论你点什么,总有你看不清的时候!!!

色彩网站:Nippon Colors ☆☆☆☆☆

地址:https://nipponcolors.com/
被墙了,国内打不开,看界面就知道和上边的中国色差不多,我觉得要么是同一个团队写的,要么就是一个仿写另一个的,第二种可能行比较大,毕竟如果是一个团队的话,日本色应该不会被墙。
在这里插入图片描述

RGB颜色值转换成十六进制颜色码

地址:https://www.sioe.cn/yingyong/yanse-rgb-16/
这只是一个网站的小功能之一,下面还给了常见的颜色码对照表,包含颜色色卡,英文代码,中文描述,十六进制,RGB。因为我以前写网页用十六进制比较多,现在markdown用英文代码比较多,为了方便我就收藏了。
你可以试一下:
在markdown编辑器里给文字换颜色。比如<font color = Tomato>我是一个小番茄</font>,显示出来就是这样的:我是一个小番茄

#2008/12/20 网页设计师屏幕取色器第二版 功能: 取屏幕任意地方颜色分别以RGB和十六进制显示。 常用200种网页颜色表 WEB2.0常用安全216色表 同一个色系样本表 颜色色名表 鼠标位置坐标 调色配色 窗体置前 说明:网页设计师屏幕取色器第二版是由云雨之盟软件工作室开发而成的一款短小精悍的软件. 主要功能可以取屏幕上任何地方的颜色,分别以RGB和十六进制显示. 此款软件的一大特点是融入了网页设计师常用200种网页颜色表、WEB2.0常用安全216色表、同一个色系样本表、颜色色名表、调色配色等。您可以很方便的查看和选择你想要的颜色和十六进制对应的值。适合于任何取色配色的地方,网页设计师和美工、界面设计工作者得力助手,让你的工作更有效率。 #2008/6/18 网页设计师屏幕取色器第一版 功能: 取屏幕任意地方颜色分别以RGB和十六进制显示。 常用网页颜色 鼠标位置坐标 调色配色 说明: 网页设计师屏幕取色器是由云雨之盟软件工作室开发而成的一款短小精悍的软件. 此款为网页设计师用,主要功能可以取屏幕上任何地方的颜色,分别以RGB和十六进制显示. 此款软件的一大特点是融入了网页设计师常用的网页颜色,您可以很方便的查看和选择你想要的颜色和十六进制对应的值。让你的工作更有效率。 欢迎大家提意见 作者QQ:379539699 QQ邮箱:yyzm@vip.qq.com 有任意建议或意见请联系我,以便在下一版的时侯改进。云雨之盟软件工作室官方网站:www.yyzmrj.com 做国产优秀绿色免费软件服务于大家。本人也从事于WEB开发,欢迎志趣相同的朋友加我交流。
很高兴能够为您提供帮助!下面是一个简单的水杯网站首页代码模板,您可以根据需要进行修改和完善: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>水杯网站</title> <style type="text/css"> /* 网站样式 */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } h1 { font-size: 48px; color: #333; margin: 0; padding: 20px 0; } .product { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 20px; margin: 0 0 20px; } .product h2 { font-size: 36px; color: #333; margin: 0 0 10px; padding: 0; } .product p { font-size: 18px; color: #666; line-height: 1.5; margin: 0; padding: 0; } .cta { text-align: center; margin: 20px 0 0; } .cta a { display: inline-block; padding: 10px 20px; background-color: #f60; color: #fff; font-size: 24px; text-transform: uppercase; text-decoration: none; border-radius: 5px; transition: all 0.3s ease; } .cta a:hover { background-color: #ff8000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } </style> </head> <body> <div class="container"> <header> <h1>水杯网站</h1> </header> <main> <section class="product"> <h2>高品质不锈钢水杯</h2> <p>我们的不锈钢水杯采用优质304食品级不锈钢材质,安全、健康,既可装热饮,也可装冷饮。外部喷涂磨砂质感,手感舒适,不易滑手。容量多种选择,满足不同需求。</p> </section> <section class="product"> <h2>双层玻璃水杯</h2> <p>我们的双层玻璃水杯采用高硼硅玻璃材质,质地轻盈、透明、安全、无异味。双层设计,既保温又隔热,防烫不伤手。外观简约时尚,是您生活和办公的最佳选择。</p> </section> <section class="product"> <h2>智能温控水杯</h2> <p>我们的智能温控水杯通过搭载芯微芯片和智能传感器,精准测量水杯内液体温度,并根据温度来进行智能温控。准确有效地保温保冷,是您商务出差和旅游度假的贴心伴侣。</p> </section> </main> <footer class="cta"> <a href="#">立即购买</a> </footer> </div> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ann's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值