• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 讲真,这可能是目前最全的在线配色工具合集了

讲真,这可能是目前最全的在线配色工具合集了

作者:Hongkiat Lim 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI配色,在线配色,经验分享,配色工具,酷站推荐等相关知识,Hongkiat Lim希望在学习及工作中可以帮助到您

配色是设计师的基本功,也是日常设计中最核心的部分,甚至是每个设计师每天都得做的功课。为网页选择一种基础色并不难,但是想要一套可用的色彩组合,则是一件相对棘手的事情。所以,很多时候,借助配色工具来寻求配色方案是一个颇为不错的想法。

配色方法和配色工具有很多,有的工具需要配合特定的方法,而有的工具则只能应对特定的需求。今天为你整理的这个合集主要是为网页设计师所准备的在线配色工具。

Adobe Color CC

你应该知道这款Adobe 出品的配色工具,早期它是以 Adobe Kuler 的名字投入市场的,现在正式更名为 Adobe Color CC,并且纳入到创意云套装当中了。

ColourLovers

ColourLovers 是一个配色爱好者社区,它包含大量的图片和它们相应的配色方案。许多配色爱好者会从漂亮的图片当中获取相应的配色方案,帮助设计师们更好地搭配。

Coolors

Coolors 是一款直观而快速的配色工具,你可以以更加简单的方式创建色彩组合,同样可以直接从图片中取色,还可以生成不同的格式,比如SVG、PDF或者SCSS,可用于Android、iOS、PS和AI等不同的平台。

Color Snapper 2

Color Snapper 2 是一款为OS X Yosemite 所专门创建的配色工具。它为专业的平面设计师而生,可以在屏幕上挑选,调整,修改,组织,保存和导出各种颜色。

Colordot

Colordot 这款配色工具有网页版和iOS APP两个版本,你可以直接从调色板来创建配色方案,也能通过图片和拍照来取色,并且轻松地分享出去。

Adobe Capture CC

Adobe Capture CC 和 Adobe Color CC 虽然都是取色工具,但是各自偏重不同。Capture 是基于你所拍摄的照片来获取配色方案,然后你可以用这个配色来创建笔刷或者图案。这款工具同时兼顾到了桌面端和移动端的需求。

LOL Colors

想要获得更多配色方案上的灵感?LOL 将许多配色方案打包提供给你,每个方案都有HEX和RGB等代码,确保你立刻可以上手使用。

Gradients.io

Gradients.io 让用户可以使用渐变色来覆盖图片。这个网站中整个页面中塞满了各式各样不同的渐变色配色方案,并且搭配了这些配色方案对应的HEX值。

Color Sphere

Color Sphere 同样是一款具有针对性的配色方案,它主要是帮你生成同一色调下的配色方案。每套配色方案的色彩都会生成对应的HEX值。

CheckMyColours

CheckMyColours 可以帮你检测和对比网页中所有的位于前景和背景的DOM元素的色彩,确定他们的对比度是否合理,视力障碍人事能否清晰地分辨出这些元素。

Color Hunter

Color Hunter 是一个简单而实用的工具,你只需要上传你喜欢的图片,它就能帮你生成一套调色板。

TinEye

TinEye 允许你从Flickr 那超过2000万的 Creative Common 图片中提取色彩。你只需要选择一种色彩,滑动选取你想要的颜色,便能在搜索框中加入这个色彩对应的标签。

Pictaculous

Pictaculous是MailChimp推出的配色软件,它只有一个目的:从照片中获取配色方案。它的操作也极为直接:点击“browse”按钮选取图片文件,点击“GET MY PALETTE”按键得到色版。

Paletton

Paletton 是一款和 Adobe Color CC 非常类似的工具,不同之处在于,它不再受限于5种配色,而是能够调用更多的色彩。

Colorspire

Colorspire 是一个三步式的配色搭配工具。你挑选出基本色之后,它会生成对应的配色方案,然后你就可以预览这套配色的应用效果了。

Hexu.al

Hexu.al 是一项有意思的服务,旨在为用户的留言添加色彩。当然它也能为图片和设计添加色彩。

Color Explorer

ColorExplorer 可能是目前功能最全面的在线配色工具之一。在它的帮助下,你可以创建、分析和自定义配色方案。更重要的是,它是完全免费的。

0to255

0to255致力于帮你找到同一个色彩对应的深色和浅色,它可以帮你查找特定色彩的同色系的其他色。

ColorRotate

ColorRotate 是一款为平板而生的色彩编辑APP,它的3D取色系统让你可以完全掌控配色方案。

SpyColor.com

SpyColor.com 是一款完全免费的线上配色工具,它可以提供任何色彩的信息,包括它们在不同配色体系下的代码和值,比如 RGB、CMYK、HSL、HSV等等。同时,它还提供各种相关的配色方案,无论是对比色还是近似色,或者是三色、四色、五色等多种不同类型的配色。

Designspiration

在这个网站上,你可以生成最多5种不同色调的配色方案。然后,网站会将数据库中使用类似配色的图片都展示给你,供你参考。

Color Blender

Color Blender 是一款非常易用的配色工具,它能根据你所选取的一种颜色,生成一套6色的配色方案。

Colors on the Web

Colors on the Web 是基于色彩理论来帮你探索色彩在网页中的运用。使用其中内置的配色向导、色轮和对比度分析器三个工具搭配起来能够让你更好的配色。

ColorMunki

ColorMunki 也是一款帮你创建自己配色方案的工具,你可以借助它找到相似的色彩,并且正确的将他们搭配成配色方案。

Pantone

这一服务是为苹果用户所定制的,你可以借此探索色彩的世界,发现新的色彩,了解色彩之间的关系,如何协调地搭配等等。

ColorZilla

在Colorzilla的帮助下,你可以让你所浏览的页面更加多彩,这款插件可以快速取色并粘贴到其他程序中。此外,Colorzilla可以帮你放大正在查看的页面,测量页面上任意两点之间的距离。Colorzilla内置了调色板,一方面可以方便用户获取预设的色彩,也可以保存自己从网页中抓取的色彩。DOM Spying功能能帮你监测DOM元素的各种信息。

Color Hunt

Color Hunt 是一个为配色爱好者所准备的社交媒体频道。你可以在这里找到精心挑选的配色方案,还可以获得一些热门的随机配色方案运用在自己的设计项目当中。

Material UI Colors

您可能想查找下面的文章:

  • 浅色还是深色?教你选择合适的界面配色方案!
  • UI配色这件事情,可以指望这6个实用技巧
  • 讲真,这可能是目前最全的在线配色工具合集了
  • 学会给配色做减法,让你的设计更加高端!
  • 超全面!UI设计中的字体配色方法总结
  • 看似简单的单色配色,需要这些技巧帮你玩转
  • 在配色这件事情上,总会有一些有趣且有用的小技巧
  • 这5个色彩进阶技巧,能帮你创造更优质的网页用户体验
  • 看过那么多UI 配色指南,这篇可能是最全面的(附大量实例)

相关文章

  • 2018-08-23成功入职谷歌后,说说我是如何通过2次面试并收到 Offer 的
  • 2018-08-23从「手势交互」出发,分析产品设计背后的原理
  • 2017-08-06首页设计最能反映web设计师的水准
  • 2018-08-23腾讯设计师:超实用的数据可视化零基础教程之实战案例篇
  • 2018-08-23如何规避 Design System 架构设计中的逻辑陷阱?
  • 2018-08-23高手怎么做,才能让文字编排更出彩?
  • 2017-08-06我们能从Google的全新UI中学到的知识(图文)
  • 2018-08-23学会插画的这四种玩法,能让你的UI体验更优异
  • 2017-08-06不是中国才有的特色:文化差异下的网页开发
  • 2018-08-23网易设计师:电视交互设计的基础知识科普

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 从「手势交互」出发,分析产品设计背后的原理
    • 一个完善的产品设计流程是怎样的?听听美团设计师怎么说
    • Web设计师如何制作Retina显屏设备的图片
    • 图层英文怎么写?来看看Apple官方写法(Bars篇)
    • 如何设计出高质量的网页 设计出高质量网页的心得(图文)
    • 想让作品更有冲击力?来学习设计中的3种构图视角
    • 网易资深设计师:我用这7个流程做LOGO设计
    • 工作复盘:从四大角色带你了解H5制作流程
    • 如何构建Web端设计规范之设计理念篇
    • 设计实战!专业的设计师是怎样进行着陆页设计的?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有