公子每次做模板之前,都会先打开几个网站,其中就有Culrs......
![](https://img.haomeiwen.com/i8897345/dcf93d7505d39178.png)
![](https://img.haomeiwen.com/i8897345/229a21374178f4fb.jpg)
这周的每周开方,公子想分享给你们的是我个人经常使用的配色网站。
每次做模板之前,我可能都会比较固定的打开一些网站,找灵感、配色、素材等等。
设计类的网站当然很多很多,但我个人是一段时间就会形成一个固定搭配,这段时间的话,在配色方面我经常用到的是Culrs。
说句题外话,不管是在素材还是获取灵感上,公子不建议只盯着一个网站,就好比一段时间后你要更新你的工具箱!
我目前的话非常喜欢Culrs,不仅给出的案例漂亮,而且很万能又实用。
![](https://img.haomeiwen.com/i8897345/add2b601fd447c71.jpg)
Culrs是一个比较综合型的配色网站,由印度的两位设计师创立。我很喜欢它的界面,简洁清新,使用感不错。
![](https://img.haomeiwen.com/i8897345/11e9c017ff1c6e0c.jpg)
Culrs给出的配色方案,分为邻近色、三色、四色和单色,这点是公子最喜欢的。
因为很多的配色网站,给出的组合都比较固定。比如是三色搭配,那可能整个网站都是三种颜色的组合,在实际应用的时候还是很不方便的。
所以用Culrs就好像同时在用4个配色网站,非常方便。
![](https://img.haomeiwen.com/i8897345/9957f1764d5e7520.jpg)
以上是它的目录菜单栏,把邻近色、三色、四色和单色很清楚的做了分类。
邻近色
如果严格来说的话,邻近色应该是在色轮上相差60°以内的配色。
但Culrs给出的应该是在色轮上120°以内的搭配方案。如果正好是120°两端的颜色,是称为对比色。
![](https://img.haomeiwen.com/i8897345/8d558e28e44eb7c6.jpg)
在邻近色里Culrs还有明、暗的区分,如果是HSL模式的话,也就是和S、L两个值有关。
比如我们选择“Light”
![](https://img.haomeiwen.com/i8897345/192b74c20c64287e.jpg)
Culrs就会给出非常多比较明亮的邻近色搭配方案:
![](https://img.haomeiwen.com/i8897345/20d9051cb68591e5.jpg)
是不是都非常的好看,其实配色方面的设计网站有太多了,但我们要看的是它给出的搭配方案是否优质,否则我用你干嘛!
还有一点就是我们把鼠标放在任一色条上,都可以直接复制它的色号,很方便。
![](https://img.haomeiwen.com/i8897345/ae0a2190592df8d6.jpg)
那我们接下来再选择“Dark”,看看比较暗的邻近色在Culrs里都可以有哪些搭配方案:
![](https://img.haomeiwen.com/i8897345/ade8e44e406129cf.jpg)
![](https://img.haomeiwen.com/i8897345/afb4567e8830977c.jpg)
公子只是截取了一部分例子,更多的还是要你们自己去玩,去发现它是否符合你的审美和使用习惯。
三色
Culrs的三色搭配是基于色轮上的正三角形,根据色相、饱和度、亮度给出的多种方案。
![](https://img.haomeiwen.com/i8897345/c02ec69ea227823a.jpg)
同样在三色搭配里,也有明、暗的区分。比如我们选择“Light”:
![](https://img.haomeiwen.com/i8897345/9a7911324caf97ba.jpg)
![](https://img.haomeiwen.com/i8897345/81e9d5ccf77453ff.jpg)
公子非常喜欢Culrs三色搭配里“Light”的所有组合,非常暖,让人心情都美好了。
有“Light”就有“Dark”,顺便说一下我很喜欢Culrs的这个细节,在每个分类里都有明、亮区分,而不是把所有配色方案都混在一起!
![](https://img.haomeiwen.com/i8897345/c48d7faefe539db5.jpg)
![](https://img.haomeiwen.com/i8897345/da8f8b113561ca5f.jpg)
四色
四色搭配是在色轮上“创建”一个矩形或正方形,如果两个颜色角度为180°,那么它们为互补色。
所以四色搭配,其实就是两对互补色。而这其中如果四个颜色为正方形,也就是各自相差90°那就为四角色。
![](https://img.haomeiwen.com/i8897345/7488f4710a6224b9.jpg)
![](https://img.haomeiwen.com/i8897345/59ca2331433423b1.jpg)
如果关于色彩方面你不是很了解,那就只要知道这是四种颜色的搭配方案就好了。
同样有“Light”和“Dark”之分
![](https://img.haomeiwen.com/i8897345/0e9a99e498259f5e.jpg)
![](https://img.haomeiwen.com/i8897345/9e85dcdb1817c85e.jpg)
Culrs给出的配色方案,我觉得不像其他网站那样是单纯的罗列。
比如在暗色系的四色搭配中,每个组合都很优质,其实这种配色是很难做到平衡和美感的。
![](https://img.haomeiwen.com/i8897345/db9ff621325a6c35.jpg)
![](https://img.haomeiwen.com/i8897345/ccd76df4bc235071.jpg)
单色
单色就是除去色相,在饱和度和亮度上做改变。Culrs的单色方案都是每组给出了5种变化。
![](https://img.haomeiwen.com/i8897345/c6120478df037985.jpg)
在单色这个分类里,它又根据不同的色相,做出了10个主要颜色的细分。
![](https://img.haomeiwen.com/i8897345/214b9d2ef8273062.jpg)
公子已经为你们大致翻译了一下,这10个主要颜色基本够我们用了。
下面我就每种颜色截取一页Culrs的方案,大家可以看一下颜色其实很奇妙,稍微变动一个数值就会有很多种可能!
• 红色
![](https://img.haomeiwen.com/i8897345/6a8a9f71c2d8291b.jpg)
• 粉色
![](https://img.haomeiwen.com/i8897345/5e5a4214c22208d1.jpg)
• 紫色
![](https://img.haomeiwen.com/i8897345/ee67d1b6c18e80b8.jpg)
• 蓝色
![](https://img.haomeiwen.com/i8897345/6604f6cc02b4df58.jpg)
• 青色
![](https://img.haomeiwen.com/i8897345/4edd38ef9d4c238b.jpg)
• 蓝绿色
![](https://img.haomeiwen.com/i8897345/acd916a4b3c433b3.jpg)
• 绿色
![](https://img.haomeiwen.com/i8897345/68b37af7a1265474.jpg)
• 青橙色
![](https://img.haomeiwen.com/i8897345/6a7a90484565d371.jpg)
• 黄色
![](https://img.haomeiwen.com/i8897345/c545ada55bdd7df3.jpg)
• 橘色
![](https://img.haomeiwen.com/i8897345/13355128ff91dd07.jpg)
Culrs单色中每个色相的变化方案都特别的多,公子只是简单给你们展示一下,如果有兴趣可以自己去玩。
以上就是公子这周分享给你们的一个比较万能的配色网站,也是我近期比较喜欢和偏爱的。
从我写了这么长的篇幅就可以看出这点了,而且我很喜欢Culrs的界面设计,像我前面说的很简洁清新。
我很讨厌一些设计类的网站,本身却设计的很“乡村”,是个什么情况......公子的感冒还没怎么好,就不和你们啰嗦了!
OK,那今天就这样了,Good Luck
![](https://img.haomeiwen.com/i8897345/82df30a28e1e43e8.jpg)
网友评论