调色板生成器

SUS 主题是一个 CSS 类：.theme-dark / .theme-light 将 --thm-* 变量映射到 --base-* 调色板范围，任何项目都可以添加自己的 .theme-<name> 块。此工具从几个输入参数生成一个主题 — 主题名称、表面亮度和强调色 — 并填充运行时定义的所有 --thm-* 名称，因此结果是一个完整的、可直接使用的主题，而不是部分覆盖。

这里最重要的检查是对比度读数：对于主要的文本/背景对该工具计算实际的 WCAG 比率并标记低于 AA 文本阈值的任何内容（4.5:1），而不是在颜色已经交付后才猜测。

主题名称将成为 CSS 类 .theme-<name>。 .theme-midnight表面明度 — 10数值低 = 偏暗主题（表面随层级升高而变亮）。数值高 = 偏亮主题（表面随层级升高而变暗）。Primary（强调色）自定义 secondary 强调色自定义 danger 强调色

生成的代码块

.theme-midnight {
    --thm-bg-page: #1a1a1a;
    --thm-bg-surface: #242424;
    --thm-bg-surface-raised: #2e2e2e;
    --thm-bg-surface-overlay: #383838;
    --thm-bg-surface-variant: #3d3d3d;
    --thm-bg-disabled: #666666;
    --thm-text-primary: #f5f5f5;
    --thm-text-secondary: #dbdbdb;
    --thm-text-disabled: #a8a8a8;
    --thm-text-on-primary: #0a0a0a;
    --thm-border: #4d4d4d;
    --thm-border-hover: #757575;
    --thm-border-focus: #3d9cf0;
    --thm-primary: #3d9cf0;
    --thm-primary-hover: #9cccf7;
    --thm-primary-pressed: #0e69b9;
    --thm-secondary: #4d4d4d;
    --thm-secondary-hover: #5c5c5c;
    --thm-success: #22c55e;
    --thm-success-hover: #45df7e;
    --thm-warning: #f59e0b;
    --thm-warning-hover: #f7b546;
    --thm-error: #ef4444;
    --thm-error-hover: #f47c7c;
    --thm-info: #38bdf8;
    --thm-info-hover: #73d1fa;
    --thm-scrim: rgba(0, 0, 0, 0.3);
    --thm-hover-overlay: rgba(255, 255, 255, 0.05);
    --thm-selected-overlay: rgba(255, 255, 255, 0.1);
    --thm-disabled-overlay: rgba(255, 255, 255, 0.05);
    --thm-rare: #4dabf7;
    --thm-epic: #a78bfa;
    --thm-legendary: #fbbf24;
    --thm-heal: #34d399;
    --thm-shield: #22d3ee;
}

文字/背景对比度

WCAG 比值，AA 文本阈值 4.5:1，低于阈值的组合会被标出。

Aatext-primary / bg-page15.96:1
Aatext-secondary / bg-page12.57:1
Aatext-primary / bg-surface14.24:1
Aatext-on-primary / primary6.80:1

预览

卡片标题

此表面上的正文使用 text-secondary；这一行使用 text-primary。

hover 遮罩

调色板生成器 ​

接下来 ​

调色板生成器

接下来