🎨 设计创意工具🎨 Design & Creativity Tools

← ToolBox / 设计创意工具Design & Creativity Tools

🎨 设计创意工具🎨 Design & Creativity Tools

共 108个免费在线工具

颜色选择器在线颜色选择器，支持 HEX/RGB/HSL/HSV/CMYK 多格式互转、屏幕取色与实时预览，内置预设色板，一键复制所需格式颜色值，纯前端运行。 CSS 渐变生成器可视化配置线性或径向渐变的起止颜色、角度与停靠点，实时生成 CSS gradient 代码，便于网页背景与按钮配色。 Favicon 生成器在线 Favicon 生成器，上传图片或输入文字/emoji 生成多尺寸网站图标，支持圆角、背景与格式导出，一键下载 .ico 适配各浏览器，纯前端处理。 图片格式转换器支持 PNG / JPEG / WEBP / BMP 格式互转，可调整质量和尺寸，纯浏览器本地处理 图片缩放按像素或百分比调整图片尺寸，可选保持宽高比并设定输出质量，纯前端压缩处理不上传，适合适配上传限制与缩小配图。 Base64 转图片将 Base64 编码字符串还原为图片并预览下载，也支持反向转换，便于在网页与文档中嵌入或导出图像数据。 图片取色器上传图片后在画面上点选任意位置提取 HEX/RGB 颜色，支持放大取样与历史记录，便于从参考图中取色配色，纯前端处理。 二维码生成器（已有，可加强定制）输入网址或文本，生成可定制尺寸、容错与颜色的二维码，支持导出，便于名片、海报与物料上的信息快速扫码。 调色板生成器设定主色与配色规则后自动生成协调的调色板，提供色值、渐变与CSS变量导出，帮助设计师为网站、海报快速建立统一且可复用的色彩体系。 px 转 rem 计算器rem 相对根元素字体大小，做响应式与可访问性布局时常用来替代写死的 px。输入像素值与根字号即可得到 rem 值。 景深/散景计算器输入光圈、焦距与拍摄距离，计算前景深、后景深与超焦距，帮助摄影者掌控清晰范围与散景效果，辅助构图决策。 照片宽高比计算器输入像素或目标尺寸，计算照片宽高比（如 16:9、4:3）及另一边的对应长度，便于裁剪与多平台发布尺寸统一。 照片打印尺寸计算器输入照片像素与打印 DPI，计算最佳打印物理尺寸并对照常见相纸规格，避免冲印模糊或浪费，便于摄影输出。 rem 转 px 计算器把以 rem 为单位的标注或设计稿按当前根字号反算成 px，便于落地到固定尺寸场景。 颜色明暗生成器在基色上按比例混入白色得到更亮的 tint、混入黑色得到更暗的 shade，指定档数生成协调的明暗色卡。 照片存储计算器照片存储计算器，根据相机分辨率、格式与拍摄数量估算所需存储卡空间，辅助备卡与容量规划。 从颜色生成渐变从指定颜色生成渐变工具，基于单个色值自动推导同色系或互补色渐变方案，调节角度与停靠点，实时预览并复制 CSS 渐变代码，纯前端运行。 曝光三角计算器在光圈、快门速度与 ISO 之间做曝光等效换算，保持曝光量不变调整任一参数，辅助摄影曝光组合的选择。 快门速度计算器安全快门计算器，按焦距估算手持拍摄的安全快门速度以避免手抖模糊，辅助摄影防抖参数设置。 圆角图片生成器⭛ 圆角图片生成器 Emoji 图标生成器将选中的 Emoji 渲染为网站 favicon 图标并导出多尺寸 ICO/PNG，方便快速更换站点图标，纯前端生成不上传。 配色方案生成器在色环上拖动圆点调整基础色相，自动生成包含互补、类似、三角等关系的配色方案，实时预览并导出色值，适合网页与品牌视觉的快速配色。 CSS 圆角生成器可视化调节圆角参数并实时生成对应的 CSS border-radius 代码，支持独立四角与百分比，便于前端快速套用。 CSS 文字阴影生成器可视化调节文字阴影的偏移、模糊与颜色，实时生成 CSS text-shadow 代码，便于标题与标语的质感效果设计。 CSS 盒阴影生成器可视化调节偏移、模糊、扩散与颜色，实时生成 CSS box-shadow 代码，支持多层阴影，便于网页元素立体效果设计。 CSS 栅格布局生成器设置列数、列宽方式、间距与断点，快速生成 CSS Grid 布局并一键复制 CSS 与 HTML 代码。 CSS动画生成器✨ CSS动画生成器 色盲安全配色生成器生成在红绿 / 蓝黄 / 全色盲等 8 种色觉类型下都能清晰区分的配色方案：支持顺序、发散、定性三类模式，在 OKLCH 感知均匀空间采样并做 8 型色觉变换校验，用贪心算法选出各型下两两色差尽可能… 文字阴影生成器文字阴影（text-shadow）在线生成器，调节偏移、模糊、颜色与多层阴影，实时预览效果并一键复制 CSS 代码，适合标题装饰与网页视觉增强，纯前端。 涟漪效果生成器涟漪（Ripple）点击效果在线生成器，模拟 Material Design 水波纹动效，可调颜色、扩散半径与持续时间，导出 CSS/JS 代码片段直接引用，纯前端。 骨架屏生成器骨架屏（Skeleton Screen）在线生成器，可视化配置列表/卡片/图文占位骨架，调节圆角间距与闪烁动画，导出 CSS 代码用于加载占位，纯前端。 高级阴影生成器支持多层外阴影、内阴影、模糊与扩散的精细调节，实时预览并一键生成高级box-shadow或drop-shadow的CSS代码，用于卡片与按钮的层次设计。 进度条生成器进度条在线生成器，调节长度、厚度、圆角、颜色渐变与动画样式，实时预览并一键复制 HTML/CSS 代码，适合下载、投票与任务进度展示，纯前端。 分辨率DPI转换器分辨率 DPI 转换器，在像素尺寸与物理尺寸间互转并支持 DPI/PPI 计算，辅助印刷与屏幕图像输出。 圆角生成器可视化调整元素四角圆角半径并实时生成 CSS 代码，支持独立设置各角，方便前端快速套用圆角样式，纯前端复制。 像素画生成器在网格上点击上色绘制像素画，可调整网格大小与调色板，完成后导出为字符画或 CSS 代码。 响应式断点生成器选择需要适配的设备断点，自动生成移动优先（min-width）的媒体查询 CSS 代码。 粒子特效生成器实时 Canvas 粒子系统，支持多种发射模式、鼠标交互和预设效果，参数实时调整即时生效 新拟态生成器调节距离、强度、模糊与底色等参数，实时生成新拟态（Neumorphism）风格的阴影与圆角CSS代码，方便UI设计师快速套用柔和立体的界面元素。 CSS 阴影生成器可视化调节外阴影与内阴影的偏移、模糊、扩散与颜色，提供常用预设，实时生成 CSS box-shadow 代码，便于 UI 质感设计。 加载动画生成器CSS 加载动画（Spinner）在线生成器，提供旋转、圆环、点阵等多种动效模板，调节尺寸颜色速度后一键复制代码，用于网页加载占位，纯前端。 图案生成器在线图案生成器，基于 SVG 制作点阵、条纹、网格、波浪等无缝背景纹理，调节间距颜色与透明度，导出 CSS 背景代码用于网页装饰，纯前端。 头像生成器在线头像生成器，随机或按种子生成几何风、像素风、渐变风头像，可调整配色与形状，一键下载 PNG 或 SVG，适合社交账号与占位图，纯前端。 CSS动画生成器（关键帧可视化）以可视化方式编排 CSS 关键帧动画，调整时长、缓动与属性并实时预览，生成可直接使用的 @keyframes 代码，纯前端。 Flexbox 布局生成器选择关键 flex 属性，立即得到对应的 display:flex CSS，并实时预览 1 / 2 / 3 个项目的排列效果。 Toast 提示生成器可视化配置 Toast 提示的文案、位置、图标与动画，生成对应的 HTML/CSS/JS 代码片段，便于前端快速接入消息提示。 按钮生成器可视化设置按钮的背景、圆角、阴影与悬停态并生成 CSS，支持多种风格预设，便于前端与设计师快速产出按钮样式代码。 粒子特效生成器（可配置参数）调粒子数量、速度、颜色与引力等参数实时预览粒子动画，导出 canvas 代码或图片，用于网页背景与活动页特效，纯前端。 背景纹理生成器（重复图案）调节参数生成可平铺重复的 CSS 背景纹理（点阵、网格、波浪等），实时预览并导出代码，用于网页与 UI 背景装饰。 色温转换器色温 (Kelvin) 转换器 卡片生成器拖拽式调整卡片的圆角、阴影、内边距与配色并生成 CSS，适合落地页与列表卡片，纯前端实时预览可复制样式代码。 徽章生成器在线设计圆角或盾形徽章，调整文字、配色与图标并实时预览，导出图片用于活动标识、成就奖章与社交头像，纯前端生成。 条形码生成器（EAN-13等）输入数字生成 EAN-13 等常见条形码图片，自动计算校验位，用于商品标签、仓储与演示，纯前端生成可下载条码。 棋盘生成器生成可调格数与配色的棋盘图案，用于棋类演示、背景与游戏素材，可导出图片，纯前端绘制不上传任何数据。 玻璃拟态生成器可视化调节模糊、透明度与背景，实时生成玻璃拟态（毛玻璃）效果的 CSS 代码，便于现代 UI 卡片质感设计。 盒子阴影生成器（可视化调整）拖动控件调整盒阴影的偏移、模糊、扩散与颜色并生成 CSS，支持内阴影与多层阴影，方便前端快速获得阴影样式。 边框样式生成器（圆角、线条）可视化设置边框宽度、样式、圆角与配色并生成 CSS，支持单边独立设置，便于快速产出分隔线、卡片边框等样式代码。 视口单位转换（vh / vw ↔ px）vw 为视口宽度的 1%，vh 为视口高度的 1%。选择模式并填入基准视口尺寸即可在视口单位与 px 之间换算。 AI（辅助/生成/优化）探索按「角色 + 任务 + 上下文 + 输出格式 + 约束」五要素拼装结构化提示词：选择任务类型与输出格式、填写目标对象与约束条件，即可得到一段可直接复制的提示词，并给出五要素完整度评分与缺失项补写建议。 PPT（模板/动画）生成按幻灯片页数、演讲总时长、每页要点数与字号规划演示节奏：给出每页平均时长、每要点可用时间、全文可讲字数与建议的每页正文上限，并推算字号的最大观看距离、单页动画时长上限与常见主题的模板要素参考。 小说（大纲/人设/章节）生成按目标总字数与章数规划小说结构：输出每章平均字数、完成周期，按三幕（25/50/25）、四段起承转合（20/30/30/20）或均匀模式切分各幕字数与章数，并给出逐章配额表与可复制的人物设定卡模板。 焦距等效换算器焦距等效换算器，在不同画幅间换算等效焦距并对比视角、推荐镜头，辅助摄影器材选型。 SVG 压缩粘贴SVG代码即可自动移除冗余注释、空白与默认属性，压缩体积并生成精简后的代码，便于前端加载优化，支持可视化对比压缩前后效果。 样式化二维码样式化二维码生成器，基于内置 qrcode.js 生成标准二维码并支持样式定制，纯前端生成、数据不上传。 调色板提取器上传图片后用中位切分算法智能提取主色调，生成可编辑的调色板并导出为CSS或JSON，方便设计师从参考图中快速获取配色方案用于项目。 竞品（分析/拆解/洞察）方法竞品对标加权评分：为「价格竞争力 / 功能完整度 / 使用体验 / 品牌信任 / 服务支持」五个维度分别给我方与竞品打分，按选定权重（均衡 / 重价格 / 重体验 / 重功能）加权汇总，输出总分差… 调色板色觉可辨识度检查器把一组配色贴进来，立刻看到它在「正常 / 红绿色盲 / 蓝黄色盲 / 全色盲 / 灰度」共 8 种视觉通道下的两两可辨识度：输出 ΔE 色差矩阵、易混淆对标注与灰度明度阶梯评分，并给出可一键应用的修… Web Audio 节拍器在线节拍器，使用 Web Audio API 提供精准节拍并支持多种拍号，适合练习乐器与节奏训练。 对比度检查器⚖️ 对比度检查器 Identicon 头像输入字符串或用户名，按哈希算法生成对称的几何 Identicon 头像，常用于无头像用户的默认标识，纯前端生成。 图片裁剪在浏览器内框选区域裁剪图片，支持自由与固定比例并实时预览，纯前端处理图片不上传，适合头像、证件照与配图裁减。 对比度检查（WCAG标准）输入前景色和背景色，计算 WCAG 2.1 对比度比率，判定 AA / AAA 合规性 网格渐变生成多色网格（mesh）渐变背景，可拖拽色标调整过渡，用于海报、封面与网页英雄区，纯前端预览并导出渐变图片或 CSS。 图片转 ASCII 字符画图片转 ASCII 字符画：可调宽度、对比度、亮度与字符集，本地处理不上传。 图片旋转将图片按任意角度或 90° 步进旋转并校正构图，纯前端处理不上传，支持导出旋转后图片，适合修正拍摄角度与排版需要。 图片翻转在线将图片水平或垂直镜像翻转，一键生成反相构图，纯前端处理图片不上传，适合修正反向照片与制作对称视觉效果。 Farnsworth D-15 色相排列测试经典 Farnsworth Panel D-15 色相排列测试的浏览器实现：15 个色帽由标准 D-15 的 CIE 1931 xy 色度坐标在等亮度下实时换算为可显示的 sRGB 色值，两端基准帽… 文字 Favicon输入文字或字母，生成简洁的文字型网站图标（favicon），支持配色与字体调节，便于小站点快速获得品牌标识。 可用性（测试/评估/改进）流程可用性测试与评估工具：结合 SUS 系统可用性量表（标准 10 题问卷）与任务绩效指标（完成率 / 时间 / 错误 / 求助 / 满意度），依据 ISO 9241-11 与 Nielsen 可用性准… 无障碍（设计/标准/检测）指南无障碍检测工具，基于 W3C WCAG 2.1 标准：提供前景 / 背景颜色对比度计算器（WCAG 1.4.3）与 14 项关键合规清单检测，按可感知 / 可操作 / 可理解 / 健壮四大原则分类评… 环保（材料/标准/检测）控制室内装修材料环保等级判定：输入甲醛释放量、VOC 含量、苯系物含量等参数，按 GB 18580-2017 等国家标准判定材料环保等级（E0 / E1 / E2），并给出与限值的差距与整改建议，纯前端… 诗歌（韵律/平仄）检查逐字标注格律诗的平仄：基于内置常用平声 / 仄声字库比对，命中标「平」或「仄」、未收录标「？」，按句分行输出平仄串，便于对照格律谱自查，纯前端本地计算。 Material Design 配色完整 Material Design 色板，共 19 色系 × 10 阶色值。点击色块复制 HEX。 PNG 转 SVG将位图 PNG 转换为矢量 SVG 格式（描摹或嵌入），便于缩放无损与前端使用，纯前端本地处理不上传原图。 SVG 转 PNG将矢量 SVG 转换为 PNG 位图并支持下载，可设定尺寸与背景，便于在不支持矢量的场景使用，纯前端本地转换。 SVG 查看器粘贴或上传SVG代码即可在浏览器中可视化预览图形，支持缩放查看与一键生成对应CSS样式代码，方便前端与设计人员调试与嵌入矢量素材。 像素艺术绘制器网格化像素绘制，支持画笔、橡皮、填充、吸管，可撤销重做，导出原始/放大版 PNG。 字体比例尺按倍数生成字号阶梯（如 1.25 比例），输出标题到正文的字号表与 CSS，帮助建立一致的排版层级，纯前端复制使用。 间距比例尺基于基数生成统一的间距阶梯（如 4/8/16 倍数），用于设计规范与组件间距，可复制为 CSS 变量，方便团队保持一致的留白节奏。 色盲模拟器 Pro专业色觉缺陷（CVD）模拟器：支持红色盲、红色弱、绿色盲、绿色弱、蓝色盲、蓝色弱、全色盲、蓝锥单色共 8 种色觉类型的实时模拟，可对单个颜色、整组调色板或上传图片做变换，并内置 WCAG 对比度检查… 加载点动画加载点动画（Loading Dots）在线生成器，可视化预览三点跳动等待动效，调节速度颜色后一键复制 CSS 代码，直接用于网页加载占位，纯前端。 频谱可视化在线频谱可视化工具，基于 Web Audio API 将音频实时绘制为频域频谱图，支持 FFT 分析与峰值查看，适合音频调试与教学演示，纯前端处理。 首字母头像首字母头像在线生成器，输入姓名或缩写生成带背景色的字母头像，可调字体、圆角与配色方案，一键下载 PNG/SVG，适合团队与用户占位，纯前端。 字体预览器快速预览多种系统字体渲染效果，输入文字后实时对比不同字体的显示差异，点击卡片即可复制 font-family CSS 代码。 波形可视化在线波形可视化工具，将音频或信号数据绘制为时域波形图，支持上传文件与实时渲染、缩放查看，便于信号分析与教学演示，纯前端处理。 Aztec 码输入文本或链接，生成简化版 Aztec 二维码，用于票据与物流信息的移动端识读，纯前端本地生成不上传。 圆点图案生成均匀或错位的圆点纹理背景，可调点径、间距与颜色，用于包装、网页底纹与印刷稿，纯前端导出透明或纯色图片。 数据矩阵码输入文本或编号，生成简化版 Data Matrix 二维码，用于工业零件与物料的小面积标识，纯前端本地生成。 条纹图案生成水平、垂直或斜向条纹背景纹理，可调条纹宽度与双色配色，用于包装、网页与印刷底纹，纯前端导出图片不上传。 等距网格生成等距（2.5D）风格网格背景，可调格子大小与配色，用于游戏地图、插画底图与示意图，纯前端导出图片不上传。 网格图案生成可调密度的方格或网格线背景图案，自定义线宽颜色，用于工程图底图、网页纹理与印刷稿，纯前端导出图片不上传。 蓝图网格生成可调密度的蓝图风格网格背景，自定义方格尺寸与颜色，用于工程草图、手绘底图与 PPT 背景，纯前端导出图片。 字体搭配推荐字体搭配推荐器，选择字体组合生成配套 CSS 代码，辅助网页与海报的字体搭配设计。 手写签名板支持鼠标和触摸，平滑曲线（quadraticCurveTo），可撤销，导出 PNG 透明背景。 Tailwind 配色板Tailwind CSS 配色板 ISO噪点参考ISO 噪点参考，按不同相机在各 ISO 下的噪点表现提供参考、帮助选择合适感光度，辅助拍摄参数设置。 音阶调号参考查阅大调、小调等各调式的音阶音名与升降记号分布，快速对照调号与和弦构成，适用于音乐创作与乐理学习。 BPM 节拍测速器BPM 节拍测速器，跟随音乐点击或按空格测量歌曲速度(每分钟拍数)，辅助乐手与舞蹈节奏把控。
📖关于「设计创意工具」About Design & Creativity Tools▼

📝栏目简介

设计创意工具集合收录了 108 个免费在线工具，覆盖设计创意场景下的常见计算、换算与查询需求。无论你是相关领域的从业者、学生还是普通用户，都能在这里找到即用即走的实用小工具。所有工具纯前端运行，数据不上传服务器，保护隐私安全。This collection gathers 108 free online Design & Creativity tools for everyday calculations, conversions and lookups. Whether you are a professional, a student or a casual user, you will find handy tools you can use right away. Everything runs client-side — no data is uploaded.

✨核心功能与适用场景

本页收录的设计创意工具包括（部分代表工具）：Featured Design & Creativity tools on this page include:

  • 颜色选择器Color Selector
  • 图片取色器Image Color Picker
  • 照片打印尺寸计算器Photo Print Size
  • 快门速度计算器Shutter Speed Calculator
  • CSS 盒阴影生成器CSS Box Shadow Generator
  • 骨架屏生成器Skeleton Loader
  • 响应式断点生成器Breakpoint Queries
  • 头像生成器Avatar Generator
  • 背景纹理生成器（重复图案）Generator 11
  • 玻璃拟态生成器Glassmorphism Generator
  • 小说（大纲/人设/章节）生成Novel
  • 调色板色觉可辨识度检查器Palette Cvd Checker
  • 网格渐变Mesh Gradient
  • 可用性（测试/评估/改进）流程Tester Assessor
  • SVG 转 PNGSVG to PNG
  • 加载点动画Loading Dots
  • 圆点图案Dot Pattern
  • 字体搭配推荐Font Pairing

这些工具帮助你快速完成设计创意相关的常见任务，无需记忆复杂公式或手动换算，输入即可得结果。These tools help you complete Design & Creativity tasks quickly — no formulas to memorise and no manual conversion, just enter your values and get the result.

❓常见问题

设计创意工具需要下载或注册吗？Do Design & Creativity tools require any download or sign-up?

不需要。本页所有设计创意工具都是纯前端在线工具，打开网页即可直接使用，无需安装软件、无需注册账号，也不上传任何数据。No. Every tool on this page is a pure front-end online tool — just open the page and start using it. No software to install, no account needed, and no data is uploaded.

设计创意工具的计算结果准确吗？数据安全吗？Are the results accurate? Is my data safe?

工具基于公开的数学公式与通用行业标准在你的浏览器本地计算，结果即时可得。所有运算都在你的设备本地完成，数据不会上传到服务器，隐私安全有保障。Calculations are based on published formulas and common industry standards, computed locally in your browser for instant results. Everything runs on your own device — nothing is uploaded to a server.