如何使用配色方案工具
- 1
选择您的方法
通过选择“模板”（预设配色）、“生成器”（色彩理论）或“自定义”（创建您自己的）选项卡开始使用。
- 2
选择或生成颜色
按类别浏览模板配色方案，使用互补色或三元色等配色方案生成，或手动创建自定义配色方案。
- 3
编辑和优化
点击任意颜色即可使用取色器进行编辑，拖动颜色以重新排序，或使用洗牌按钮进行新的排列。
- 4
检查无障碍性
使用对比度检查器，确保您的颜色组合符合 WCAG 无障碍标准，以提高文本可读性。
- 5
导出您的配色方案
将您的最终配色方案导出为 CSS 变量、SCSS、Tailwind 配置、JSON 数据或 PNG 图像，以便在您的项目中使用。
主要功能
模板配色方案库
从精选的专业配色方案集中选择，这些方案按自然、现代、复古等类别进行组织。
色彩理论生成器
运用色彩理论原理，生成和谐的配色方案，包括互补色、三元色、邻近色、单色和分裂互补色方案。
多格式导入/导出
支持从 CSS 变量、SCSS、Tailwind 配置、JSON 或十六进制颜色列表导入配色方案。可导出为以上任一格式以及 PNG 图像。
无障碍对比度检查器
内置 WCAG 对比度检查器，带有 AA/AAA 合规性指示，确保您的颜色组合符合无障碍标准。
交互式色彩编辑器
点击任意颜色即可使用取色器进行编辑，拖动以重新排序颜色，并实时预览调整亮度。
自定义配色方案创建
创建并保存您自己的自定义配色方案，支持个性化命名和无限色彩组合。
什么是配色方案查看器？
配色方案查看器是一款设计工具，可帮助您为项目创建、组织和管理配色方案。它将色彩理论原理与格式转换、无障碍检查和模板库等实用功能相结合，以简化您的设计工作流程，并确保专业、和谐的色彩组合。
为何使用我们的配色方案工具？
- 1
专业的色彩理论
运用经过验证的色彩理论原理，生成科学平衡的配色方案，打造视觉吸引力的设计。
- 2
开发者友好的导出方式
直接导出为 CSS 变量、SCSS、Tailwind CSS 或 JSON 格式，无缝集成到您的开发工作流程中。
- 3
无障碍合规性
内置 WCAG 对比度检查，确保您的颜色选择符合无障碍标准，实现包容性设计。
- 4
模板库
访问数百个按风格和类别组织的专业精选配色方案，即时获取灵感。
- 5
完全隐私
所有处理都在您的浏览器本地进行——您的配色方案和偏好保持私密和安全。
常见问题
我可以导入哪些颜色格式？
您可以从 CSS 变量（:root）、SCSS 变量（$color）、Tailwind 配置文件、JSON 对象或简单的十六进制颜色列表导入配色方案。支持文件上传和文本粘贴两种方式。
色彩理论生成器如何工作？
生成器利用色轮上的数学颜色关系来创建和谐的配色方案。您可以选择互补色（对立色）、三元色（三个等距颜色）、邻近色（相邻颜色）等。
对比度检查器遵循哪些无障碍标准？
该工具遵循 WCAG 2.1 指南，检查 AA 级（4.5:1 比例）、AAA 级（7:1 比例）和 AA 大文本（3:1 比例）的合规性，以确保您的颜色适用于视力障碍用户。
我可以编辑配色方案中的单个颜色吗？
是的！点击任意颜色样本即可打开取色器编辑器。您还可以拖动颜色以重新排序，或使用洗牌按钮随机重新排列配色方案。
有哪些可用的导出格式？
您可以将配色方案导出为 CSS 自定义属性、SCSS 变量、Tailwind CSS 配置、JSON 数据对象或 PNG 图像。每种格式都针对不同的开发工作流程进行了优化。
一个配色方案可以包含多少种颜色？
模板配色方案通常包含 5 种颜色，但自定义配色方案可以包含 3 种或更多颜色。该工具会自动处理不同大小的配色方案，并在需要时为模板进行扩展。