颜色工具
为您的项目生成、分析和导出调色板。
图片取色器 从任意图片像素精准拾取HEX RGB HSL颜色代码
上传任意图片,用取色器在画布上精准拾取像素颜色,即时读取HEX、RGB、HSL数值并一键复制,全程在浏览器本地完成,图片不会上传服务器。
图片主色提取工具 从图像一键获取HEX RGB主色调配色方案
从任意图片智能提取占比最高的主色调,自动生成协调配色并同步输出每种颜色的HEX与RGB代码,图像在浏览器本地解析,无需上传。
图片调色板生成器 上传图像自动生成完整HEX RGB配色方案
上传一张图片即可智能生成完整调色板,自动提取和谐配色并显示每种颜色的HEX、RGB代码,全部在浏览器本地处理,方便直接取用。
图像主色调识别工具 提取画面主要颜色与占比及HEX数值
分析图像并识别占比最高的几种主导颜色及各自比例,输出对应的HEX与RGB数值,帮助你快速理解画面并复用其整体配色风格。
相似颜色查找器 匹配邻近色调并输出HEX RGB相近色值
输入任意颜色即可查找视觉上邻近的相似色系,附带每个色值的HEX、RGB数值,帮你轻松扩展并微调整套配色方案的层次。
颜色格式转换器 HEX RGB HSL CMYK OKLCH色值一键互转
在HEX、RGB、HSL、CMYK、OKLCH等格式之间即时互相转换颜色,实时预览色块并复制代码,方便设计排版与前端开发直接使用。
颜色对比度检测器 检查WCAG无障碍对比度AA AAA是否合规
检查前景与背景色的WCAG对比度比值,自动判定AA与AAA等级是否达标,确保正文与标题文字清晰可读并符合无障碍设计标准。
调色板导出工具 将配色一键输出为CSS JSON ASE格式文件
把整套调色板一键导出为CSS、JSON、ASE等多种格式文件,便于导入Figma等设计软件或直接接入前端项目开发流程。
颜色预览工具 实时查看配色应用在真实设计版式中的效果
把选定颜色应用到真实版式与组件中实时预览效果,直观对比多组配色之间的差异,帮你在正式落地前做出更稳妥的配色决定。
调色板下载工具 将HEX配色导出为PNG图像文件保存分享
将整套调色板连同每个色块的HEX代码下载为清晰的PNG图片,方便随时分享、存档或加入设计交付说明文档中长期留存。
配色方案分享工具 通过专属链接一键分享调色板便于协作
生成专属链接即可一键分享你的调色板,对方无需安装任何软件便可直接查看完整配色与HEX数值,让团队协作沟通更顺畅高效。
色彩和谐搭配工具 生成互补三色分裂类比等和谐配色方案
基于色轮生成互补色、三色、分裂互补、类比等多种和谐配色方案,并附上每种颜色的HEX数值,帮你快速找到协调耐看的组合。
CSS渐变生成器 可视化制作线性径向渐变并一键复制代码
可视化调整颜色、位置与角度,生成线性或径向CSS渐变并一键复制代码,实时预览效果,便于直接用于网页背景与按钮样式。
网格渐变生成器 制作多彩Mesh渐变背景并导出CSS代码
创建柔和的多彩网格渐变背景,自由拖动色点位置调节色彩层次并导出CSS代码,为界面与首屏增添富有现代感的视觉质感。
动画渐变生成器 制作流动CSS渐变动效背景并导出代码
生成平滑流动的动画渐变背景,可自由调节颜色、方向与速度并导出CSS代码,让网页首屏、横幅与按钮更具动感与活力。
色盲模拟器 检测配色在红绿蓝黄等色觉障碍下的显示效果
模拟红绿色盲、蓝黄色盲等多种色觉障碍下的画面效果,检验配色的可辨识度,帮助你打造更具无障碍包容性的界面视觉设计。
文本可读性测试工具 检测文字与背景配色组合的清晰程度
测试不同文字与背景颜色组合的实际可读性,结合对比度比值评估清晰程度,助你为正文与标题选出真正易读又舒适的配色。
WCAG分析器 逐一检测整套调色板的无障碍对比度合规性
逐一分析调色板中各颜色组合的WCAG对比度,清晰标注AA、AAA达标情况,帮你全面把控整站配色的无障碍合规水平。
玻璃拟态生成器 制作毛玻璃模糊透明CSS效果并复制代码
可视化调节模糊、透明度与背景颜色,生成玻璃拟态毛玻璃CSS效果并一键复制代码,直接用于现代卡片、导航与弹窗界面。
新拟态生成器 制作柔和UI凹凸阴影CSS效果并实时预览
调节光影方向、圆角与颜色生成新拟态柔和凹凸UI效果,实时预览并导出CSS代码,为按钮与卡片打造细腻立体的界面质感。
彩色阴影生成器 制作多层彩色投影CSS代码并实时预览
为按钮与卡片元素生成富有层次的彩色投影,自由搭配颜色、模糊与偏移并导出CSS代码,让界面视觉更加立体生动有质感。
双色调效果生成器 为图片套用双色渐变滤镜打造统一风格
为图片套用双色调渐变效果,自选高光与阴影两种颜色打造统一而醒目的视觉风格,图像全程在浏览器本地处理,不会上传。
图片颜色滤镜工具 调整色调饱和度亮度与色温并实时预览
为图片套用颜色滤镜,实时调整色调、饱和度、亮度与色温并即时预览效果,图像全程在浏览器本地处理,不会上传服务器。
色彩情绪板制作工具 用你的调色板搭建视觉参考与灵感板
用你的调色板搭建视觉情绪板,自由组合颜色、纹理与灵感素材,为品牌与设计项目确定统一而清晰的整体视觉基调与方向。
颜色混合器 调配两种或多种颜色生成平滑的中间过渡色值
混合两种或多种颜色生成平滑的中间过渡色,实时读取每一步的HEX、RGB数值,帮你轻松调配出理想的中间色调与渐变。
明暗色阶生成器 生成任意颜色的深浅明暗变体与色阶方案
为任意基础色一键生成整套明色与暗色阶变体,并附上每一级的HEX数值,便于构建层次分明又统一协调的完整配色体系。
随机调色板生成器 一键刷新即可获取和谐配色的灵感方案
一键生成随机而和谐的调色板,快速激发配色灵感,每一组均附上HEX代码,可反复刷新直到找到令你真正满意的方案为止。
关键词配色生成器 输入词语智能生成主题调色板配色方案
输入海洋、日落、森林等关键词,即可智能生成契合主题氛围的调色板并附上HEX代码,让整套配色紧贴你的创意概念与构思。
Tailwind调色板生成器 输出CSS完整色阶配置代码
根据一个基础色生成完整的Tailwind CSS色阶配置,从最浅到最深一应俱全,可直接复制到配置文件加速主题搭建。
CSS变量导出工具 将配色生成自定义属性代码便于复用
将整套调色板导出为CSS自定义属性变量,一键复制粘贴即可在样式表中集中管理并复用项目的主题配色,方便统一维护。
shadcn/ui主题生成器 输出组件库明暗模式配色变量代码
为shadcn/ui生成完整的主题配色变量,涵盖明亮与暗色两种模式,一键复制代码即可直接套用到你的组件库项目中。
SCSS变量导出工具 将配色生成Sass变量代码便于复用
将整套调色板导出为SCSS/Sass变量,一键复制即可在样式文件中集中管理与复用项目配色,方便团队统一维护与调整。
色温分析工具 判断颜色的冷暖倾向并给出对应的色温数值
分析任意颜色的冷暖倾向并给出对应的色温数值,帮助你在整套配色中平衡温度感,为画面营造出理想的氛围与整体情绪基调。
色彩情绪分析工具 解读颜色所传达的情感与心理学深层含义
探索每种颜色所传达的情感与心理联想,解读不同色调背后的氛围特质,助你为品牌与项目挑选恰当而贴切的整体主题配色。
品牌色提取工具 从Logo标志中提取HEX RGB品牌配色
在目录中搜索品牌,查看已收录的品牌颜色,并快速复制可用的 HEX 色值。
流行色彩趋势工具 发现当下热门配色与调色板的灵感来源
浏览当下流行的热门颜色与调色板趋势,每一组均附上HEX代码方便随手取用灵感,让你的设计始终紧跟最新的视觉潮流。
渐变映射工具 按图片明度用自定义渐变为整个画面重新上色
根据图片像素明度套用渐变映射,用你自定义的渐变为整个画面重新上色打造风格化影调,图像全程在浏览器本地处理,不会上传。
颜色叠加工具 为图片添加半透明色彩滤层统一整体画面色调
为图片叠加半透明色彩滤层并调节混合模式,统一整体画面色调、营造特定氛围,图像全程在浏览器本地处理,不会上传服务器。
单色配色生成器 生成同一色系深浅明暗渐变过渡配色方案
基于单一色相生成同色系的深浅明暗配色方案,并附上每一级的HEX数值,帮你打造简洁统一又富有层次的视觉风格与配色。
互补配色生成器 生成对比强烈且格外醒目的撞色配色方案
基于色轮生成对比鲜明的互补撞色方案并附上HEX代码,帮你打造视觉冲击力强、重点突出且格外醒目的高对比配色搭配。
UI配色预览工具 在真实界面组件中查看配色的实际效果
把配色应用到按钮、卡片、表单等真实UI组件上实时预览,直观检验界面整体效果,让你在正式落地前及早发现潜在问题。
社交媒体配色预览工具 在贴文与封面模型中查看配色效果
在社交媒体贴文与封面模型中预览你的配色效果,直观评估配色在信息流中的实际视觉表现,帮你优化内容在各平台的整体呈现。