使用高级功能创建、查看和管理配色方案。运用色彩理论生成配色方案,支持从多种格式导入,检查无障碍对比度,并导出为 CSS、SCSS、Tailwind、JSON 或 PNG 格式。
通过选择“模板”(预设配色)、“生成器”(色彩理论)或“自定义”(创建您自己的)选项卡开始使用。
按类别浏览模板配色方案,使用互补色或三元色等配色方案生成,或手动创建自定义配色方案。
点击任意颜色即可使用取色器进行编辑,拖动颜色以重新排序,或使用洗牌按钮进行新的排列。
使用对比度检查器,确保您的颜色组合符合 WCAG 无障碍标准,以提高文本可读性。
将您的最终配色方案导出为 CSS 变量、SCSS、Tailwind 配置、JSON 数据或 PNG 图像,以便在您的项目中使用。
从精选的专业配色方案集中选择,这些方案按自然、现代、复古等类别进行组织。
运用色彩理论原理,生成和谐的配色方案,包括互补色、三元色、邻近色、单色和分裂互补色方案。
支持从 CSS 变量、SCSS、Tailwind 配置、JSON 或十六进制颜色列表导入配色方案。可导出为以上任一格式以及 PNG 图像。
内置 WCAG 对比度检查器,带有 AA/AAA 合规性指示,确保您的颜色组合符合无障碍标准。
点击任意颜色即可使用取色器进行编辑,拖动以重新排序颜色,并实时预览调整亮度。
创建并保存您自己的自定义配色方案,支持个性化命名和无限色彩组合。
配色方案查看器是一款设计工具,可帮助您为项目创建、组织和管理配色方案。它将色彩理论原理与格式转换、无障碍检查和模板库等实用功能相结合,以简化您的设计工作流程,并确保专业、和谐的色彩组合。
运用经过验证的色彩理论原理,生成科学平衡的配色方案,打造视觉吸引力的设计。
直接导出为 CSS 变量、SCSS、Tailwind CSS 或 JSON 格式,无缝集成到您的开发工作流程中。
内置 WCAG 对比度检查,确保您的颜色选择符合无障碍标准,实现包容性设计。
访问数百个按风格和类别组织的专业精选配色方案,即时获取灵感。
所有处理都在您的浏览器本地进行——您的配色方案和偏好保持私密和安全。
您可以从 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 种或更多颜色。该工具会自动处理不同大小的配色方案,并在需要时为模板进行扩展。