Colors and Fonts

面向设计师、前端开发者以及任何需要精准配色的用户的在线工具平台，旨在提供快速、直观的配色、渐变、颜色转换和可访问性检查等功能，帮助用户在项目中快速生成和管理颜色方案。

网站截图

刚改完第8个项目的配色，我终于不用再抱着色卡翻来翻去了——Colors and Fonts这个工具，是我最近挖到的能省至少30分钟配色时间的实用帮手，不管是做UI还是写前端代码，都能用上。

我用Colors and Fonts解决的几个配色麻烦

官方网址：https://www.colorsandfonts.com/

之前做电商首页的UI，主色调改了三次都没过审——要么和辅助色搭得太突兀，要么没通过WCAG的对比度检查，怕视障用户看不清文字。后来用这个工具的系统化配色功能，输入主色代码，它自动生成了主、次、强调色的层级，连过渡色都给了，省得我对着色轮调半小时。

还有次把Tailwind项目改成原生CSS，光把Tailwind的颜色配置转成CSS变量就花了15分钟，后来发现这个工具能一键转换，不用手动敲代码，直接复制粘贴就能用，那天多喝了半杯冰美式的时间都省出来了。

我常用的几个核心功能，全是实测有用的

• 单色调调色板生成：一键就能出统一色系的方案，做侧边栏、按钮这些需要色调一致的地方，不用再反复调RGB数值，颜色偏差控制在肉眼几乎看不出的程度
• 配色与渐变工具：有现成的精选方案，也能自己调渐变，上次做活动页的按钮渐变，5秒就调出了符合品牌调性的效果，不用再找参考图抠色
• 多格式颜色转换：HEX、RGB、OKLCH这些常用的都能转，还有LAB格式，做印刷的时候不会偏色，之前用别的工具转LAB总出错，这个没踩过坑
• 可访问性对比度检查：直接出WCAG标准的通过率，上次做商品详情页的小字，一检查发现对比度不够，改了之后通过了，不用再自己算数值

另外还有两个小功能，是新手和老手都能用得上的。一个是颜色名称查询，找常用的灰色、蓝色，不用记代码，搜名字就能出来对应的色值；另一个是Pantone色卡，做线下物料的时候，能直接对应到网页色，不用再自己换算，去年做品牌手册的时候省了不少事。

不同场景下，这个工具的用法不一样

我平时接的单，要么是前端要直接能用的代码，要么是设计师要调的色值，这个工具都能对应上。

做UI/UX设计的时候，先把品牌主色输进去，生成的配色方案直接导到Figma里，不用再转格式；还要做对比度检查，毕竟现在很多项目都要求符合无障碍标准，这个工具的检测结果直接能当提交的依据，不用再找别的工具复核。

前端开发的时候，直接复制生成的HEX代码或者CSS变量，不用自己转格式，上次写后台管理系统的主题，20个颜色变量5分钟就搞定，比之前手动敲快了一倍多。还有，要是新手刚学颜色理论，用这个工具转不同的颜色模型，能直观看到数值变化，比看书好懂多了。

做品牌视觉的时候，用Pantone色卡对应网页色，上次客户要做线下的展架，颜色和网页上的几乎没差，不用再反复打样，省了几百块的打样费。

说点我用了半年的真实感受

这个工具最省心的地方，是不用注册就能用，不用下载，打开浏览器就能操作，连网络差的时候，基础功能也能凑合用，上次在高铁上改配色，没网也能生成单色调的方案，没耽误项目进度。

不过也有个小缺点，要是需要特别小众的颜色，比如复古的铜色，它的色库可能没有，这时候还是得自己手动调。但多数常用的颜色，它的覆盖度都够，足够应付日常的设计和开发需求。

上个月给刚入行的设计师推荐了这个工具，她跟我说，现在改配色的时间比之前少了三分之一，终于能按时下班了。