Realtime Colors

Realtime Colors 是一款面向网页设计的在线颜色与字体可视化工具，由 @Juxtopposed 创建。它不只是展示抽象色板，而是把用户选择的颜色分布到真实网站页面的不同区域，用于观察背景、文字、按钮、信息卡片、图片、高亮和链接等界面元素的实际效果。工具也支持设置字体，并提供对比度检查器，帮助用户在网页界面中判断文字可读性。完成配色后，可以将结果导出为多种格式，用于后续设计和开发工作。\n\n### 核心功能\n\n#### 真实网页中的配色预览\nRealtime Colors 会把颜色应用到一个真实网站界面，而不是只显示孤立的色块。用户可以直接观察颜色在页面结构中的分布效果，包括主要行动按钮、页面区块、次要按钮、信息卡片、图片、强调内容、超链接和其他组件。这样的预览方式用于减少反复实现不同配色方案的时间，并帮助用户更快判断一套品牌颜色在网页上的整体表现。\n\n#### 多角色颜色设置\n配色流程从文字和背景使用的两个中性色开始，随后设置主色和次色。主色用于主要行动按钮和页面区块，次色用于不那么重要的按钮和信息卡片；此外还可以设置强调色，用于图片、高亮、超链接、盒子和卡片等位置。官网建议通常选择背景色、文字色和一个强调色这三种颜色，也说明一个平台通常不添加超过六种颜色，以避免界面过于复杂并影响设计中的颜色一致性。\n\n#### 字体配置\n用户可以在工具中输入 Google Fonts 中的字体名称，也可以输入设备上已经安装的字体名称。字体设置与颜色预览结合使用，便于在同一个网页界面中查看配色和字体选择的组合效果。官网正文没有说明具体支持的字体数量，也没有说明字体是否会被上传或保存。\n\n#### 对比度检查\n对比度检查器会显示所选颜色与背景色或前景色之间的对比度比例，并用三种灯号提示结果。红色“x”表示对比度没有通过 AAA 或 AA，较大字号和普通字号都很难阅读；黄色“-”表示可能通过 AA 但无法通过 AAA，大字号可能可读而普通字号可能不可读；绿色“✓”表示同时通过 AA 和 AAA，大字号与普通字号都具备可读性。\n\n#### 多格式导出\n当用户对配色结果满意后，可以点击“Export”并选择导出方式。官网列出的格式包括 ZIP、PNG、CSS、SCSS 和二维码等，页面同时使用“and more”说明还有其他导出选项。导出功能可将已经在网页界面中确认过的颜色选择带到后续工作中，具体导出内容会随所选格式变化。\n\n### 使用方式\n\nRealtime Colors 通过网页中的工具栏使用，官网提供“Get Started”入口进入配色区域。用户先设置文字和背景的中性色，再选择主色、次色和强调色，同时可以配置 Google Fonts 或设备中已安装的字体。页面支持实时查看结果、使用对比度检查器，并在完成后导出 ZIP、PNG、CSS、SCSS、二维码等格式。官网还提供 Figma 插件、VS Code Theme Editor、Dashboard template、Blog post template 和 Color Game 等相关入口，但正文没有说明这些入口的具体使用条件。\n\n### 适用人群与场景\n\n网页设计师可以用它把候选颜色直接放进页面结构，观察按钮、区块、卡片和文字的真实效果，而不是只比较色板。产品设计师和品牌设计相关人员可以通过中性色、主色、次色和强调色的分工整理网页品牌配色，并检查不同颜色组合的可读性。前端开发者可以导出 CSS 或 SCSS，将已经确认的颜色方案带入实现流程。需要同时评估网页字体与配色的人，也可以在同一工具中输入 Google Fonts 或本机字体名称进行预览。\n\n### 定价\n\n官网明确标注该工具“100% Free! Forever.”，Basic 方案为 Free，并写明可以选择任意颜色、无限导出。页面还列出 Pro 和 Enterprise 方案，价格均显示为 $0.00 / month；Pro 包含 Dashboard 访问权限，Enterprise 还列出 members-only content。\n\n### 注意事项\n\n官网称生成的颜色可以用于商业或非商业用途，颜色和字体本身不属于该网站；但该许可仅适用于此网站特有的源代码和材料。对比度检查器提供的是 AA 与 AAA 通过情况提示，官网没有说明其会替代完整的无障碍审查。官网正文为英文，未说明是否提供中文界面。