Realtime Colors

功能特点

• 实时网页预览：在编辑器中调整颜色的同时，立即在真实网页布局中看到效果，无需反复导出或刷新页面，所见即所得
• 完整配色体系：支持背景色、文字色、主色、辅助色和强调色五种角色的独立配置，覆盖网页设计中的关键色彩决策点
• 对比度检测器：内置WCAG无障碍对比度检查工具，以红/黄/绿三色指示灯直观显示当前配色是否符合AA或AAA级标准，确保文字可读性
• 多格式一键导出：完成配色后可通过导出功能保存为CSS、SCSS、PNG图片、ZIP压缩包甚至二维码等多种格式，方便交付开发或分享给团队
• 字体搭配预览：除了配色，还能在同一界面上预览字体组合在真实网页中的呈现效果，一站式完成视觉风格的初步定调
• Figma插件集成：提供官方Figma插件，已有超过19,000名用户安装，可在设计工具内直接调用Realtime Colors的能力
• 永久免费无限制：所有功能完全免费，没有任何导出次数限制或付费墙，个人设计师和团队均可自由使用

使用指南

• 打开网站后，先从左侧工具栏选择两个中性色作为文字和背景的基础色调
• 接着挑选主色用于主要按钮和核心区块，再选辅助色用于次要按钮和信息卡片
• 根据需要配置强调色，它会应用在超链接、高亮区域和图片装饰上
• 观察中间实时渲染的网页预览区域，随时微调每个颜色直到满意
• 点击导出按钮，选择CSS、SCSS、PNG或二维码等格式保存配色方案
• 如需在Figma中使用，安装官方插件后即可在设计稿中直接应用配色

应用场景

• 网页设计师在项目初期快速探索配色方向，几分钟内确定视觉风格基调
• 前端开发者在编码前用工具生成可直接使用的CSS变量，减少手动调色时间
• 产品团队在设计评审中实时调整配色方案，现场决策避免反复修改
• 独立开发者或创业者为自己的产品页面快速搭建专业级的色彩体系
• 设计教学中演示色彩理论在实际网页中的应用效果，直观展示对比度与可读性的关系

常见问题

• Q: 一个网页应该使用几种颜色比较合适？ A: 通常背景色、文字色加一个强调色共3种颜色就能满足基本需求。一般建议整个平台不超过6种颜色，过多的颜色会让设计变得复杂且难以保持一致性。
• Q: 对比度检测器的红黄绿指示灯分别代表什么？ A: 红色表示对比度未通过AA和AAA标准，普通文字和大文字都难以阅读；黄色表示可能通过AA但未通过AAA，大文字可读但普通文字可能吃力；绿色表示同时通过AA和AAA标准，所有文字都具有良好可读性。
• Q: 工具是否需要付费才能使用全部功能？ A: 不需要，Realtime Colors完全免费，选择颜色、导出方案等所有功能均无限制开放使用。
• Q: 预览页面中的示例图片有什么设计用意？ A: 主视觉图灵感来源于蒙德里安的构图作品，其红、蓝、黄的比例接近UI设计中经典的60-30-10配色法则，能更真实地展示颜色在页面中的分布效果。