📷 拖放图片到这里或点击上传，提取图片主色调
本配色方案生成器操作简单且功能强大，以下是详细的使用指南：
基础操作：在「基础颜色」输入框中输入HEX颜色值（如 #FF6B6B），或点击颜色选择器直接选取颜色。从「配色模式」下拉菜单中选择一种配色模式，然后点击「生成配色」按钮即可看到生成的5色配色方案。每个色块显示对应的颜色值，点击可复制到剪贴板。
锁定颜色：点击任意色块可锁定该颜色，被锁定的颜色在点击「随机」或更换配色模式时不会改变。再次点击可解锁。这一功能在微调配色方案时非常有用——您可以锁定满意的几个颜色，让其他颜色随机变化直到找到完美组合。
图片取色：将图片文件拖放到上传区域，或点击选择文件上传。工具会自动分析图片像素，提取出现频率最高的主色调，并将其设为当前基础颜色，同时生成相应的配色方案。所有图片处理均在浏览器本地完成，不会上传到服务器。
导出配色：在「导出格式」下拉菜单中选择 CSS、Sass 或 JSON 格式，点击「导出配色」即可生成对应的代码。CSS格式会生成 CSS 变量（:root 下），Sass格式会生成 $variable，JSON格式则生成可直接使用的 JSON 对象。点击「复制」按钮将导出内容复制到剪贴板。
配色方案生成器在设计和开发中应用广泛，以下是几个典型的使用场景：
品牌色彩设计：在设计品牌视觉识别系统（VI）时，需要从主品牌色出发，生成一套完整的辅助色和点缀色。本工具支持7种配色模式，从单色到多色方案，可以覆盖从保守到大胆的各种品牌风格需求。导出为CSS变量后，可直接用于网站和App的品牌色系统。
UI界面配色：在Web或App界面设计中，需要为主色调、辅助色、文字色、背景色等分配不同的颜色。使用类似色模式可以生成和谐的UI色彩体系，而互补色模式则适合用于需要强调对比的操作按钮和重要提示。锁定功能让您可以逐步微调每个颜色，直到整个界面色彩协调统一。
图片配色灵感：看到一张漂亮的照片想要提取配色灵感？上传图片即可自动提取主色调，并基于该色调生成多种配色方案。这对于需要根据特定图片或场景来配色设计师来说非常实用，可以快速获得与图片风格协调的色彩方案。
色轮与配色原理：色轮是将颜色按照色相排列成圆形的工具，常见的有RYB（红-黄-蓝）色轮和RGB（红-绿-蓝）色轮。本工具使用HSL色彩模型（色相Hue、饱和度Saturation、明度Lightness），因为它更符合人类对颜色的感知方式——调整色相改变颜色种类，调整饱和度改变鲜艳程度，调整明度改变明暗程度。
7种配色模式详解：单色方案使用同一色相的不同明度和饱和度，最安全但可能缺乏变化；互补色方案使用色轮上相对的两种颜色，对比强烈、视觉冲击大；三角色方案使用等距的三种颜色，色彩丰富且平衡；分裂互补方案是一种互补色的变体，对比度略低但更和谐；类似色方案使用相邻颜色，过渡自然柔和；四角色方案使用两组互补色，色彩最丰富；方形方案使用90度间隔的四种颜色，均衡且多样。
无障碍设计：在Web设计中，配色不仅要美观还要考虑无障碍性。根据WCAG标准，正常文本与背景的对比度至少应达到4.5:1，大文本至少3:1。本工具在导出CSS时可搭配「颜色对比度检查器」使用，确保配色方案满足无障碍要求。
本工具使用Canvas读取图片像素，通过统计像素颜色频率提取主色调。对于纯色背景或主色调明确的图片效果最佳。所有图片处理仅在浏览器本地完成，不会上传到任何服务器。
单色方案基于同一色相的不同明度和饱和度；互补色选择色轮上相对的两种颜色；三角色选择色轮上等距的三种颜色；分裂互补选择一种颜色及其补色两侧的两种颜色；类似色选择色轮上相邻的颜色；四角色选择四组互补色；方形选择色轮上90度间隔的四种颜色。
导出CSS后，将颜色变量复制到项目的 :root 选择器中，然后在样式中通过 var(--color-primary) 等方式引用。Sass变量则可以直接在 .scss 文件中使用 $color-primary。
点击色块上的锁图标可锁定该颜色。被锁定的颜色在您点击「随机」或切换配色模式时不会改变，便于您保留满意的颜色，逐步微调其他颜色。
支持 JPG、PNG、GIF、WebP、SVG 和 BMP 等常见图片格式。图片通过浏览器 FileReader API 读取，Canvas 提取像素，全程在本地完成。
颜色协调度取决于原始基础颜色的选择。某些颜色在特定模式下可能产生过于刺眼或暗淡的组合。建议尝试不同的基础色，或切换到其他配色模式寻找更和谐的方案。也可以使用「类似色」或「单色」模式获得更安全的配色。
完全免费。本工具是纯前端应用，所有计算在浏览器本地完成，不依赖服务器，因此可以永久免费使用。