恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【笔记】网页配色工具
0.0°
2019-01-22 原创文章 经验/观点 举报 5615 56 40 1

文内复链接,全程干货不注水;简单粗暴,高效实用。转载注明作者与出处,谢谢~   

       大家嚎!我是UI中国的烨翔君,近期打算整理一下自己的打自学以来的一些知识点与资源,以笔记的形式发出来,希望对大家有所助益,也方便自己平时查阅翻看;

       第一篇以色彩为主,但是这里不讲关于颜色的一些基础知识,UI中国上各位大佬发的关于色彩知识的文章有很多,有心的小伙伴可以去学习,本篇笔记以翔君收集整理的一些配色方面的工具和取色方案的网站为主,希望在平时的学习工作中能对各位有所帮助;笔记内容会不定期更新,喜欢的同学可以收藏下来以便查阅~


 

1、Adobe Color CC

       这是adobe提供的一款配色工具,也是目前最为nb的配色工具之一;在色彩规则中可以选择多种取色方案,点击右上角的相机按钮还可以上传图片,Adobe Color CC会自动识别图片中的配色方案;在探索栏里还有更多的配色方案可供参考。

Image title

 

2、Color Palette FX

       同样是一款在上传的图片中取色的工具,相对于Adobe Color CC取色更加精细一些。

Image title


3、Colourode

       左侧的灰色栏中有多种配色方案,还可以点击屏幕左右的“-”“+”来加减颜色的数量;

色调调节:鼠标左右移动或【Ctrl+ ← + →】  

亮度调节:鼠标上下移动或【Ctrl + ↑ + ↓】

饱和度调节:【Ctrl+ Shift + ↑ + ↓】

鼠标单击锁定颜色,点击“垃圾桶”图标删除颜色。

Image title


4、Trianglify Generator

       一款在线生成彩色多边形背景工具,多边形的大小形状颜色、图片的大小都可以自行定义,编辑过后图片还可以直接下载使用,应用起来较为灵活。

Image title


5、Material Design 色彩标准

       谷歌推出的Material Design设计标准中相关于色彩的标准;附上Material Design 中文版链接;点击右下角汉堡键可以查看其它标准。

Image title


6、Material Design Palette

       以Material Design配色标准为基础的一款在线配色工具,选取两色搭配直观的观察到界面的配色效果,color栏内为Material Design标准色板。

Image title


7、Web Colour Data

       在输入框里键入网站的网址就能获得相对应的网站的配色方案。

Image title


8、Color Hexa

       一款6的起飞的色彩搜索引擎,只需在搜索框输入任意颜色值,ColorHexa 就能给你返回一个详细的描述,并会自动将其转换成对应的十六进制、二进制、RGB、CMYK、HSL、HSV、 CIE-Lab、Hunter-Lab、CIE-Luv、CIE-LCH、XYZ、xyY 值,还会提供相对应的配色方案等等信息。

Image title


9、NIPPON COLORS - 日本の伝統色

       烨翔君最最喜欢的色彩库,没有之一,日系配色库,虽然没有提供配色方案也没有过于明亮的颜色但是其中的每种颜色都有一种时间沉淀下来的古雅美~

Image title


10、draGGradients

       一个在线的渐变工具,翔君觉得类似于AE当中的四色渐变,但是比四色渐变强大的多,小伙伴们可以自由添加和删除渐变色的数量;在右上角的设置中还可以调节渐变色的透明度,渐变色的原料类似PS里的图层,可以点击蓝色按钮调整渐变色的上下顺序;左下角的三个按钮分别是:隐藏/显示渐变中心点、色板和预设渐变。

Image title


11、webgradients

      同样是一款渐变类的网站,收集了180款很赞的线性渐变,网站提供 CSS 代码 同时还提供 PSD 与 sketch 文件格式的下载。

Image title


12.colordrop

       一个四色配色网站,站内收藏大量的配色方案,点击左下油漆桶可以更改网站背景颜色,点选其中任一配色组合后,网站右侧会跳出这四种颜色及对应的色码(HEX、RGB);点击 add Favourites 还能添加到收藏方便下次查找。

Image title



最后是几个可以提供色彩灵感的社区:

http://color.farm/

http://colrd.com/

Image title


先整理这些,后续还会不定期更新,网上的颜色工具有很多,但是用着最顺手的才是最好的不是吗~以上仅为翔君平时用的比较多的网站希望对大家有所帮助~



Image title


更新:2019-01-22

收藏

56人已收藏

烨翔君

蔚来汽车 界面体验设计师

  • 36

    作品

  • 2300

    粉丝

  • 424

    关注

  • OPPO · GORGEOUS GREY
  • 【主题】WPS Office 2019 NewYear
  • 【字体】滑翔造字计划·100+
  • 【2018】翔君の作品集
相关标签
设计分享

    猜你喜欢

      2019-01-22 原创文章 经验/观点 举报 5615 56 40 1

      【笔记】网页配色工具

      0.0°

      你确定要举报【笔记】网页配色工具

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年03月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      40
      56
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录