调色板生成器

工具简介

一个在线调色板生成工具，输入一个颜色就能自动生成一整套和谐的配色方案。支持互补色、邻近色、三角色等 8 种色彩和谐模式，配色结果可导出为 CSS 变量、Tailwind 配置、SCSS 或 JSON 格式。适合 UI 设计、前端开发、品牌配色等场景。

功能说明

颜色选择：支持颜色选择器、HEX 输入和随机生成三种方式选色，内置 8 个常用预设颜色可快速切换。

配色模式：支持互补色、邻近色、三角色、分裂互补、四方色、正方形、单色系、色度渐变共 8 种色彩和谐模式。

配色预览：生成的配色以正方形色块展示，显示颜色名称和 HEX 值，点击色块可复制颜色代码。

颜色详情：列出每个颜色的 HEX、RGB、HSL 完整信息，方便精确配色。

代码导出：支持 CSS 变量、Tailwind 配置、SCSS、JSON 四种格式导出，可一键复制或下载文件。

使用方法

选择颜色：用颜色选择器点选、直接输入 HEX 值，或点击随机按钮。也可以用下方的预设颜色快速开始。

选择配色模式：从下拉菜单中选择需要的配色模式，配色方案会自动更新。

复制颜色：在配色预览区点击色块即可复制 HEX 值到剪贴板。

导出代码：切换到导出代码区域，选择 CSS/Tailwind/SCSS/JSON 格式，复制或下载代码文件。

隐私说明

所有数据处理都在浏览器中完成，不会上传到服务器。无需注册登录，不存储任何用户数据。

常见问题

什么是互补色？ 色轮上相对的两种颜色，如红和绿、蓝和橙。对比强烈，适合需要突出对比的界面。

单色系和色度渐变有什么区别？ 单色系保持色相不变，在多个亮度档位生成颜色。色度渐变从极深到极浅生成更细腻的渐变序列。

导出的代码能直接用吗？ 可以。CSS 变量和 Tailwind 配置都是标准格式，复制到项目中即可使用。JSON 格式方便在脚本中处理。

支持哪些浏览器？ Chrome、Edge、Firefox、Safari 等现代浏览器都能正常使用。

为什么选择这个工具？