筛选了100个配色工具后,我挑出了这25个
myzbx 2025-05-02 20:08 45 浏览
研究主题:提升色彩感知的配色工具
研究对象:配色工具
UI 设计中,颜色几乎是最先被感知到的设计元素,好的色彩感知是成为一个优秀的设计师的基础,配色工具层出不穷,辞典酱在筛选了100多种配色工具后,精选了这25个,相信必然帮到你!
-Cool Backgrounds
Cool Background 是产品设计师 Moe Amay 创建,是由5个开源生成器整理组成的彩色图像工具集,内置5种不同的背景风格,每一种风格还提供了简单的参数配置。非常的炫酷美观,你可以将其添加到博客、网站或桌面和手机墙纸中。
网站链接:
https://coolbackgrounds.io/
多彩抽象三角形
trianglify.io
▼
动态粒子效果
marcbruederlin.github.io/particles.js
▼
渐变
cssgradient.io
▼
渐变层生成器
s.muz.li/NTFiZjk0ZWFh
▼
Unsplash图片集
unsplash.com
▼
-Picular
Picular 是一款基于谷歌图像搜索的色彩生成器,只需输入描述词,就能快速生成配色方案。
网站链接:https://picular.co/
-Palettte App
Palettte 是一款色彩编辑和重映射工具,能够可视化的看到不同颜色之间的过渡流畅度,匹配出更和谐的色彩,还支持单个颜色微调。我们还可以导入、分析和编辑现有的色彩方案。
网站链接:https://palettte.app/
-Pigment
Pigment 可以通过饱和度、色温以及色系来生成我们独特的配色方案,还可以查看不同配色的配色场景图片。
网站链接:
https://pigment.shapefactory.co/
-Muzli Colors
Muzli Colors 是一款调色板生成器,可以自己添加颜色代码或名称查看相关的配色,预览 UI 套件演示,也可以选择初始颜色,快速生成和编辑多种配色方案,并根据我们自己的颜色选择预览和下载自定义 UI 工具包。
网站链接:https://colors.muz.li
-Colorable
Colorable 一款非常实用、用来评估配色可访问性的工具。
网站链接:
https://colorable.jxnblk.com/
-History’s Palettes
一键生成复古配色,可以搜索过去4000年来最具有代表性的的180个配色方案。
网站链接:
https://colorleap.app/home
-Art Palette
基于 Google AI 的智能配色工具,它会根据你搜索的配色方案提供相符合的配色主题的艺术图片。
网站链接:
https://artsexperiments.withgoogle.com/artpalette/
-ColorSpace
Color Space 是一款非常实用的渐变生成器,我们只需要选择一个颜色,就可以快速生成20-30种不同风格的配色方案。同时还提供了梯度和三色渐变选项,可以快速生成配色并查看 CSS 代码。
网站链接:https://mycolor.space/
-Adobe Color
Adobe Color 通过拖拽色轮或输入自定义色值,可以创造出基于相似、互补、三原色等不同色彩规则的配色方案。除此之外,还支持 CMYK、RGB、HSV 多种色彩模式的配色调整。
网站链接:
https://color.adobe.com/create
-Eva Design System
Eva Design System 是一个基于深度学习算法的配色网站。适用于给我们的产品或品牌生成一个系统的配色方案。
网站链接:
https://colors.eva.design/
-Site Palette
Site Palette 是一款设计师和前端开发人员必备的谷歌插件。可以自动吸取网站的主要颜色,帮助我们建立色板,以及寻找相关配色的图片,并一键下载配色方案。
网站链接:http://palette.site/
-BrandColors
BrandColors 是最大的官方品牌配色合集。包含500多个品牌的16进制颜色代码,包括 Facebook,Twitter,Instagram 等等。
网站链接:https://brandcolors.net/
-ColorBox
ColorBox 是用于生成颜色集的颜色工具。可以帮助我们轻松地创建非常炫酷的色彩集,配色页面还有大量的个性化选项,满足我们的任何需求。
网站链接:https://www.colorbox.io/
-Color — Cloudflare Design
专为 UI 设计师创建的配色工具,支持根据用户界面元素预览配色、循环浏览可访问的颜色组合并手动创建配色方案、通过网址导入或生成配色。
网站链接:
https://cloudflare.design/color/
-LOL Colors
LOL Colors 是一款可爱的配色网站,色彩大多明快清新,直接拖动鼠标即显示色值,方便收藏色卡。
网站链接:
https://www.webdesignrankings.com/resources/lolcolors/
-Eggradients
Eggradients 是一款收录了最新设计趋势渐变色彩的配色网站,以鸡蛋的形式展现。支持一键复制16进制和 CSS 代码。
网站链接:
https://www.eggradients.com/
-SVG Colorizer
SVG 着色器,自动为 SVG 图标和 SVG 矢量着色。可以选择不同的图标生成不同的配色,也可根据自己的喜好添加新的配色或者是修改现有的配色方案。
网站链接:
https://www.iconshock.com/svg-color/
-CoolHue 2.0
CoolHue 2.0是一款免费的 Sketch 渐变配色插件和收集工具。
网站链接:
https://webkul.github.io/coolhue/sketch-plugin/
-Free Mesh Gradient Collection
包含100多个免费的渐变色合集,支持 Sketch、PNG、AI、JPG、EPS 等多种格式下载。
网站链接:
https://www.ls.graphics/meshgradients
-WebGradients
WebGradients 是一个由顶级设计师策划的免费渐变配色网站,拥有180种漂亮的线性渐变,并支持 CSS3、Photoshop 和Sketch 等多种格式。
网站链接:https://webgradients.com/
-Gradient Buttons
炫酷的渐变按钮,还有悬停的动画效果,还可以一键 Copy CSS 代码。
网站链接:
https://gradientbuttons.colorion.co/
-Color palettes
Color palettes 上包含了数千种精选色彩组合。
网站链接:
https://www.canva.com/colors/color-palettes/
-Paletton
Paletton 是一个在线的色环配色工具。我们可以根据需要选择单色、相近色、对比色等规则来查看配色,也可以实时查看其在网页中的搭配效果。
网站链接:http://paletton.com/#uid=
1000u0kllllaFw0g0qFqFg0w0aF
-Grabient
Grabient 一个非常漂亮且实用的渐变网站,支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。
网站链接:https://www.grabient.com/
小伙伴们还知道哪些超赞的配色网站呢?记得留言告诉我们哦~
相关引用
-原文链接:
https://medium.muz.li/color-tools-for-designers-2019-6ebd77a94ab
-图片、GIF来自网络
欢迎关注作者微信公众号:UX辞典,获得更多UX设计干货
相关推荐
- 如何设计一个优秀的电子商务产品详情页
-
加入人人都是产品经理【起点学院】产品经理实战训练营,BAT产品总监手把手带你学产品电子商务网站的产品详情页面无疑是设计师和开发人员关注的最重要的网页之一。产品详情页面是客户作出“加入购物车”决定的页面...
- 怎么在JS中使用Ajax进行异步请求?
-
大家好,今天我来分享一项JavaScript的实战技巧,即如何在JS中使用Ajax进行异步请求,让你的网页速度瞬间提升。Ajax是一种在不刷新整个网页的情况下与服务器进行数据交互的技术,可以实现异步加...
- 中小企业如何组建,管理团队_中小企业应当如何开展组织结构设计变革
-
前言写了太多关于产品的东西觉得应该换换口味.从码农到架构师,从前端到平面再到UI、UE,最后走向了产品这条不归路,其实以前一直再给你们讲.产品经理跟项目经理区别没有特别大,两个岗位之间有很...
- 前端监控 SDK 开发分享_前端监控系统 开源
-
一、前言随着前端的发展和被重视,慢慢的行业内对于前端监控系统的重视程度也在增加。这里不对为什么需要监控再做解释。那我们先直接说说需求。对于中小型公司来说,可以直接使用三方的监控,比如自己搭建一套免费的...
- Ajax 会被 fetch 取代吗?Axios 怎么办?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!今天给大家带来的主题是ajax、fetch...
- 前端面试题《AJAX》_前端面试ajax考点汇总
-
1.什么是ajax?ajax作用是什么?AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实...
- Ajax 详细介绍_ajax
-
1、ajax是什么?asynchronousjavascriptandxml:异步的javascript和xml。ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的...
- 6款可替代dreamweaver的工具_替代powerdesigner的工具
-
dreamweaver对一个web前端工作者来说,再熟悉不过了,像我07年接触web前端开发就是用的dreamweaver,一直用到现在,身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...
- 我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊
-
接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...
- 福斯《死侍》发布新剧照 "小贱贱"韦德被改造前造型曝光
-
时光网讯福斯出品的科幻片《死侍》今天发布新剧照,其中一张是较为罕见的死侍在被改造之前的剧照,其余两张剧照都是死侍在执行任务中的状态。据外媒推测,片方此时发布剧照,预计是为了给不久之后影片发布首款正式预...
- 2021年超详细的java学习路线总结—纯干货分享
-
本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础重点知识点:数据类型、核心语法、面向对象...
- 不用海淘,真黑五来到你身边:亚马逊15件热卖爆款推荐!
-
Fujifilm富士instaxMini8小黄人拍立得相机(黄色/蓝色)扫二维码进入购物页面黑五是入手一个轻巧可爱的拍立得相机的好时机,此款是mini8的小黄人特别版,除了颜色涂装成小黄人...
- 2025 年 Python 爬虫四大前沿技术:从异步到 AI
-
作为互联网大厂的后端Python爬虫开发,你是否也曾遇到过这些痛点:面对海量目标URL,单线程爬虫爬取一周还没完成任务;动态渲染的SPA页面,requests库返回的全是空白代码;好不容易...
- 最贱超级英雄《死侍》来了!_死侍超燃
-
死侍Deadpool(2016)导演:蒂姆·米勒编剧:略特·里斯/保罗·沃尼克主演:瑞恩·雷诺兹/莫蕾娜·巴卡林/吉娜·卡拉诺/艾德·斯克林/T·J·米勒类型:动作/...
- 停止javascript的ajax请求,取消axios请求,取消reactfetch请求
-
一、Ajax原生里可以通过XMLHttpRequest对象上的abort方法来中断ajax。注意abort方法不能阻止向服务器发送请求,只能停止当前ajax请求。停止javascript的ajax请求...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)
