如何生成带自定义颜色与样式的二维码（美化设计不求人）
普通黑白方块二维码放进海报/名片里往往显得突兀。能不能换品牌色、改圆角码眼、让点阵不那么「硬」？可以——但边界很清楚：定位角与纠错预算碰不得。
二维码能美化到什么程度
二维码靠三个定位角（Finder） 和 Reed–Solomon 纠错 工作。在不破坏前者、不耗尽后者的前提下，可以改视觉：
| 可改 | 高风险 / 不可靠 |
|---|---|
| 前景/背景颜色（保持亮度对比） | 三个定位角被遮或变形过度 |
| 码眼样式、数据点形状（本站设计器） | 静区被背景图案吃掉 |
| 印刷后叠中心 Logo（外部设计步骤） | Logo 过大或压住对齐图案 |
| 尺寸与边距 | 反色、低对比渐变 |
纠错级别
| 级别 | 约可遮挡比例 | 适用 |
|---|---|---|
| L | ~7% | 干净屏幕 |
| M | ~15% | 常规（本站默认） |
| Q | ~25% | 计划轻度遮挡 |
| H | ~30% | 更大中心图 / 户外 |
计划缩 Logo 进中心时，选 Q 或 H，并控制遮挡面积；选完仍要实机扫。
实现注记
本站 二维码设计器 同样基于 qrcode（^1.5.4），再在 Canvas 上后处理模块外观：
| 项 | 本站行为 |
|---|---|
| 基础绘制 | QRCode.toCanvas（颜色、尺寸、margin、纠错） |
| 码眼 (eye) | square / circle / rounded |
| 数据点 (dot) | square / circle / dots / star |
| 尺寸 | 128–512 px，步进 32 |
| 边距 | 0–8 模块可调 |
| Logo | 不提供上传/嵌入；需在导出后用设计软件叠层 |
| 对比度提示 | 实时亮度比：<2.5 失败、<4.5 警告、≥4.5 可用 |
| PNG 导出 | 含当前 Canvas 上的自定义码眼/点样式 |
| SVG 导出 | QRCode.toString({ type: 'svg' })——仅标准方块模块 + 所选颜色，不含自定义码眼/圆点/星形 |
只要最快黑白 PNG：用 二维码生成器。回读校验：用 二维码解码器。长链接先理清编码：见 URL 编解码 与 URL 编码专题；载荷含 Base64 时见 Base64 指南。品牌色也可配合 对比度检查 看文本场景的 WCAG 比值。
一步步设计
- 打开 二维码设计器。
- 输入内容：网址、文本，或
WIFI:/ vCard 规范串。 - 需要中心品牌图时，先把纠错调到 Q 或 H，内容尽量短。
- 调前景/背景色、码眼与数据点样式、边距；预览自动更新。先看清控件下方的对比度提示——红/黄未消就不要下载。
- 用手机实扫；通过后再下 PNG（要矢量印刷且可接受标准方块模块时再下 SVG）。
- 若需 Logo：在 Figma / 海报软件里把 PNG/SVG 铺底，中心叠透明 Logo（建议占码面约 15–20% 以内），再实扫。
设计原则（避免翻车）
- 亮度对比优先：扫描仪先二值化，不是「色相对比」。设计器会实时报比值；经验上深前景 + 浅背景更稳。
- 留静区：四周至少约 4 模块空白；设计器 margin 可调，导出后贴稿仍勿裁白边。margin 调到 0 再印刷裁边，很容易扫不出。
- Logo 预算：吃的是纠错余量。H 的 ~30% 是上限量级，工作区常落在中心 15–20%；软边渐变 Logo 会糊进模块，硬边更干净。
- 样式越花，越要实扫：
star/ 细dots会减小有效油墨面积，小尺寸印刷先降级样式或加大尺寸。 - SVG ≠ 所见即所得：自定义码眼/点只保证在 PNG 预览与 PNG 下载里；SVG 是库生成的标准矩阵。
容量、过密与 URL
版本 1–40 与纠错、内容长度构成三角：长 UTM URL + H 纠错 → 高版本密点阵 → 小印刷失败。可执行断点：短链（60 字符以内）+ Q，名片约 2 cm 边长通常够用；同一内容塞进 1.2 cm 再开 H，廉价摄像头容易挂。
| 载荷形态 | 常见结果 |
|---|---|
| 短 HTTPS 路径（<40 字符）+ M/Q | 名片友好 |
| 长 UTM 查询 + H | 过密；放大印刷或缩短 |
| 整段 JSON / 长 Base64 | 用错介质——改短链 |
| 未缩短的中文 URL | %XX 膨胀——见 中文百分号编码 |
能短就短——追踪参数放到落地页，而不是烧进点阵。
静态码 vs 动态码
设计器产出的是静态图案：内容直接编码，免费且无服务依赖，但印出去改不了。商业物料常用跳转层（动态）：图案只指向你控制的短链/中转，再 302 到真实目标。长期印刷品的务实做法：图案编自定义域名跳转，改指向而不改印刷。
印刷与观看距离
| 用途 | 大致最小边长 | 备注 |
|---|---|---|
| 名片 | ~2 cm | 优先方点、更高对比 |
| A5 传单 | ~3–4 cm | 静区留在出血外 |
| 1 m 观看的易拉宝 | ~10 cm | 屏幕预览 ≠ 户外眩光 |
经验：最小边长大致 ≥ 扫描距离的 1/10。务必打样——手机屏会掩盖油墨扩散与纸纹。
扫码测试清单
| 测试项 | 通过标准 |
|---|---|
| iPhone 原生相机 | 稳定识别 |
| Android 原生相机 | 同上 |
| 微信「扫一扫」 | 国内物料建议过关 |
| 距离 / 光线 | 按真实观看距离与现场光 |
| 打印小样 | 屏幕 ≠ 印刷，先打样 |
| 叠 Logo 之后 | 再扫一遍；不稳就提高纠错或缩小 Logo |
常见应用场景
- Wi‑Fi：
WIFI:T:WPA;S:名称;P:密码;;——SSID/密码尽量短；花式点阵 + 长密码会显著加密点 - vCard：扫码存联系人——名片信息过密时改短链落地页
- 活动物料：海报入口；底色复杂时给码加白衬底
- 产品包装：说明书/注册页短链
常见问题
Q：彩色二维码扫不出来？
多数是亮度对比不足或动了定位角。先恢复高对比纯色（清掉设计器失败/警告状态），能扫再加样式。
Q：本站能直接上传 Logo 吗？
不能。设计器负责颜色与模块样式；Logo 请导出后在外部叠层，并实扫验证。
Q：为什么预览是圆点，SVG 却是方块？
SVG 路径走 qrcode 标准矢量输出，不包含 Canvas 后处理样式。要保留圆点/星形请用 PNG，或自行在矢量工具里重绘。
Q：容量有限制吗？
有。版本 40 在高纠错下汉字/字节容量远低于「数字 7000+」的宣传上限。超长正文不该塞进 QR——用短链。
Q：会过期吗？
图案不过期；失效的是 URL / Wi‑Fi / 活动页。长期物料走可改跳转层。
Q：暗色模式 / 反色品牌色？
浅色模块配深色底在亮度比够约 4.5:1、定位角完整时可以工作——但不少消费级 App 默认按深色模块扫。受众混杂时优先深模块 + 浅底。
小结
好看且可扫 = 够用的纠错 + 够高的亮度对比 + 克制的中心遮挡 + 实机验证。用 二维码设计器 完成本地样式，需要 Logo 时外部叠层；发布前扫一遍。
本文出自 ToolVault 工具匣。更多开发者工具请访问 首页。
相关工具
相关文章
中国车牌号规则与校验：普通牌、新能源与特殊格式全解
中国大陆车牌号编码规则详解：普通蓝牌、新能源 GA36D-2018、武警与使馆牌的结构、省份简称与发牌机关编码，附在线校验方法。
GEO 是什么：生成式引擎优化入门，AI 搜索时代的流量新入口
GEO（Generative Engine Optimization）之于 AI 搜索，相当于 SEO 之于 Google——当 ChatGPT、Perplexity、豆包开始直接回答问题，用户不再点击链接，内容如何被 AI 引用成为新战场。本文拆解 GEO 与 SEO 的本质区别、四大核心实践（可抓取/结构化/可引用/事实密度），以及一个真实工具站的 GEO 实测数据。
llms.txt 规范解读：给 LLM 的站点说明书，值不值得放一个
llms.txt 是 2024 年提出的站点根目录 markdown 文件，用结构化的方式告诉大模型这个站有什么值得读。本文拆解它的规范结构（H1+摘要+分层链接）、与 robots.txt/sitemap 的分工、llms-zh/llms-full 多份产物、常见翻车，以及构建期自动生成的真实实践——含可参考的文件骨架与说明文字写法。