无需登录 数据私有 本地保存

随机配色组合 - 点击生成意想不到的搭配

14
0
0
0

随机配色组合

对比度检测
WCAG AA标准：正文 ≥ 4.5:1
历史记录 （点击恢复）
尚未生成配色
配色知识 & 常见问题

配色方案是一组精心挑选的颜色组合，通常包含主色、辅助色、强调色、背景色和文字色。好的配色方案能提升品牌识别度、改善用户体验、传达正确的情感。在UI设计中，协调的配色让界面看起来专业且舒适，帮助用户快速理解信息层次。

互补色：色相环上相差180度的两个颜色（如蓝+橙），对比强烈，视觉冲击力大，适合需要突出对比的设计。
类似色：色相环上相邻的颜色（如蓝+蓝绿+绿），和谐统一，给人舒适自然的感觉，适合柔和的设计风格。
三角色：色相环上均匀分布的三色（如红+黄+蓝），平衡而丰富，既有对比又不失和谐，适合活泼的设计。

WCAG（网页内容无障碍指南）规定：AA级标准要求正文文字与背景的对比度至少4.5:1，大号文字（≥18px粗体或≥24px）至少3:1。AAA级更严格，正文要求7:1以上。本工具内置对比度检测，帮助您判断文字色和背景色是否达标。建议正文始终保持在4.5:1以上的对比度。

HEX（如#3B82F6）是RGB的十六进制表示，简洁紧凑，广泛用于CSS和设计工具。RGB（如rgb(59,130,246)）使用0-255的十进制数值，更直观地表达红绿蓝三通道的强度。两者本质相同，只是表示方式不同。CSS中也支持RGB的变体RGBA（含透明度）和HSL（色相-饱和度-亮度，更符合人类感知）。

这是室内设计和UI设计中的经典配色法则：60%的空间使用主色调（通常是背景色），30%使用辅助色（如家具、卡片），10%使用强调色（如按钮、图标、CTA元素）。这种比例创造出平衡、舒适的视觉层次，避免颜色过于杂乱。本工具生成的配色也遵循类似的角色分配逻辑。

点击"导出CSS"按钮可以一键复制CSS自定义属性（变量），将其粘贴到项目的:root选择器中即可全局使用。例如：var(--color-primary)。在Tailwind CSS项目中，可将这些变量映射到tailwind.config.js的colors配置中。也可以直接将HEX值复制到设计工具（Figma、Sketch等）中使用。
🔧 相关工具