Elementor 颜色调色板生成器：全局套件与对比度
选择四种全局颜色和四种全局字体，检查文本是否可读，然后下载可导入 Elementor 的套件或 CSS 变量。
- 免费
- 无需注册
- 一切在您的浏览器中完成
对比度（WCAG AA）
| 组合 | 比率 | 普通文本 | 大文本 |
|---|
预览 使用您计算机上安装的字体
主标题
副标题
段落文本，用于检查在所选背景上的可读性。
按钮导入 Elementor：工具 › 导入/导出套件 › 导入。请先备份。
如何使用工具创建全局套件
设置调色板
主色、辅助色、文本色和强调色，使用与 Elementor 全局变量相同的 ID。每个颜色配一种字体和字重。
检查对比度
选择您网站的背景色。每种组合显示其比率，以及是否通过普通文本和大文本的 WCAG AA 标准。
下载
可导入 Elementor 的 .zip 套件，或可粘贴到您主题的 --e-global-* CSS 变量。
全局套件生成了什么
Elementor 可导入的套件
.zip 遵循 Elementor 的导出格式：一个 manifest.json 和一个包含系统颜色和字体的 site-settings.json。
使用 Elementor 命名的 CSS 变量
变量使用与 Elementor 生成的相同名称（--e-global-color-primary、--e-global-typography-primary-font-family…）。
WCAG AA 对比度
表格计算每种颜色在背景上的比率。AA 要求普通文本 4.5:1，大文本 3:1。
预览
使用您的颜色和字体显示标题、副标题、段落和按钮，以便在导入前验证组合是否可读。
如何手动设置 Elementor 全局颜色
在 Elementor 编辑器中，打开菜单并转到网站设置。全局颜色和全局字体在那里。前四个（主色、辅助色、文本色和强调色）是系统颜色。
当您从颜色设置中的全局图标选择颜色时，小部件将使用该全局颜色。更改该全局颜色，所有使用它的小部件都会改变。
对于单个网站，手动操作没问题。如果要构建多个使用相同品牌的网站，或在决定前检查对比度，套件可节省步骤。
网站上已有手动输入的颜色怎么办？
新套件不会更改手动输入颜色的小部件。设计系统插件会找到它们并将其转换为全局变量或 Elementor 4 变量。
Design system · 即将推出
此工具不支持的功能
- 不更改小部件中手动输入的颜色：仅设置全局颜色。
- 对于字体，仅设置字体族和字重；字号和行高在 Elementor 中后续调整。
- 预览使用您计算机上安装的字体；在网站上，Elementor 会加载它们。
- 不创建 Elementor 4 变量，它们是与全局颜色分离的系统。
Elementor 全局颜色常见问题
Elementor 中的全局颜色在哪里？
在编辑器中，菜单 › 网站设置 › 全局颜色。字体在旁边，在全局字体下。
套件会删除我的自定义颜色吗？
不应该：导入套件时，Elementor 替换四种系统颜色和字体，并将自定义颜色添加到您已有的颜色中。请先备份。
我需要什么对比度比率？
WCAG 2.2 AA 级要求普通文本 4.5:1，大文本 3:1（24px 或 18.66px 粗体）。
它适用于 Elementor 4 吗？
是的。套件通过导入 Elementor 4.4 进行了测试。Elementor 4 变量是另一回事，此套件不创建它们。