其他
配色生成器
配色生成器只需选择一种基础色，即可自动生成互补色、类似色、三角配色等配色方案，是一款免费的在线调色板生成工具。工具会自动计算生成配色所需的配色理论，让你快速找到可用于网页设计、资料制作、插画、品牌设计等场景的精美色彩组合。
可通过 URL 分享或保存当前配色。
生成的调色板
- L 0.27#1E90FF
- L 0.40#FF8D1E
导出
:root {
--color-1: #1E90FF;
--color-2: #FF8D1E;
}
配色的生成全程在您的浏览器中完成，输入的颜色不会被发送到外部服务器。
相关工具
二维码生成
将网址、Wi-Fi、邮件、短信、电话、联系人、地理位置、日历事件、文本生成二维码的免费二维码生成器，可自定义尺寸、颜色与 Logo，全程在浏览器中完成。
抽签 / 抽奖
从名单列表或数值范围中随机抽取 1~N 项的免费抽奖、抽签工具，支持不重复抽取、卷轴动画与历史记录，适合年会抽奖、课堂点名，全程在浏览器中完成。
番茄钟
按 25 分钟专注、5 分钟休息循环的免费在线番茄钟，支持圆形进度、提示音、全屏与画中画弹窗，打开即用、无需下载，适合学习与工作专注，全程在浏览器中完成。
取色器
从图片中提取颜色并获取颜色代码的免费取色器，可用放大镜按像素精确拾取，支持 HEX / RGB / HSL 切换与调色板导出。免费、无需注册。
颜色代码转换
在 HEX、RGB、HSL、HSV、OKLCH 颜色代码之间相互转换的免费工具，支持透明度（RGBA、8 位 HEX）与 CMYK 参考值，一键复制任意格式，全程在浏览器中完成。
对比度检查器
实时计算前景色与背景色对比度的免费颜色对比度检查器，判定 WCAG 2.1/2.2 AA、AAA 是否达标，并支持达标色建议、色盲（色觉）模拟与 APCA，全程在浏览器中完成。
配色生成器是什么?
配色生成器只需选择一种基础色，即可自动生成互补色、类似色、三角配色等配色方案，是一款免费的在线调色板生成工具。工具会自动计算生成配色所需的配色理论，让你快速找到可用于网页设计、资料制作、插画、品牌设计等场景的精美色彩组合。
基础色除了支持 #1E90FF 这样的 HEX，还支持 rgb(30, 144, 255) 或 hsl(210, 100%, 56%)，也可以从原生取色器中选取，或用「随机」按钮寻找配色灵感。配色类型支持互补色（complementary）、类似色（analogous）、三角配色（triadic）、四角配色（tetradic）、分裂互补色（split-complementary）、单色（monochromatic）、明暗渐变（shades & tints）共 7 种。在单色、类似色等类型下，还可调整生成的颜色数量（3~10 色）。
生成的调色板既可一键复制每种颜色的 HEX，也可整体导出为 CSS 变量（:root { --color-1 }）、Tailwind 的 theme.extend.colors、SCSS 变量、JSON 等格式。可直接粘贴到代码中，从配色决策顺畅衔接到实现。每个色块还会显示在该色之上用黑色文字还是白色文字更易读（对比度参考），有助于 UI 设计中文字颜色的判断。
配色的计算全程在您的浏览器中完成，输入的颜色不会被发送到外部服务器。无需注册账号、无需点击广告，即可立即使用。
使用方法
- 在输入框中输入基础色（支持 HEX、RGB、HSL），或用取色器选取颜色。想要灵感时也可以使用「随机」按钮。
- 选择配色类型（互补色、类似色、三角配色、四角配色、分裂互补色、单色、明暗渐变）。
- 在单色、类似色等可调整颜色数量的类型下，用滑块设置生成的颜色数量（3~10 色）。
- 查看生成的调色板，每种颜色的 HEX 值可通过卡片上的复制按钮复制。
- 在「导出」中切换 CSS 变量、Tailwind、SCSS、JSON 标签页，用「复制」按钮复制整段代码并粘贴到实现中。
- 点击「复制 URL」可获得能够还原当前配色的分享 URL，可用于团队共享或收藏。
使用场景
- 想从基础色确定配色方案的网页设计师、前端开发者，快速生成互补色或类似色的调色板。
- 想把配色方案直接落地为 CSS 变量或 Tailwind 配置的前端工程师。
- 想用三角配色、四角配色等配色方案整理演示文稿或幻灯片配色的职场人士。
- 想以品牌色为起点，用单色或明暗渐变展开不同色调变体的设计师。
- 想在插画或作品创作中获得协调色彩组合灵感的创作者。
- 想把确定好的配色通过分享 URL 发给团队，或日后还原同一调色板的用户。
注意事项
- 配色的生成全程在浏览器中完成，输入的颜色不会被发送到外部。
- 基础色支持以 HEX、RGB、HSL 各种格式输入。不支持透明度（Alpha）。
- 互补色、三角配色、四角配色、分裂互补色的颜色数量由配色理论决定，因此不显示颜色数量滑块。单色、类似色、明暗渐变可调整颜色数量。
- 配色是在 HSL 色彩空间中旋转色相来计算的。若以饱和度极低的颜色（接近灰色的颜色）作为基础色，色相的差异可能会变得不易区分。
- 分享 URL 中仅包含基础色、配色类型和颜色数量。打开该 URL 会以相同设置还原调色板。