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

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

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

共 111个免费在线工具

颜色选择器在线颜色选择器，支持 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动画生成器 色盲安全配色生成器所有候选色在 OKLCH 感知均匀空间采样，逐一做 8 型色觉变换（Machado 矩阵用于红/绿色盲，灰度去色用于全色盲）后转 CIE Lab，用贪心算法选出「全部 8 型下两两最小 ΔE」尽可能… 文字阴影生成器文字阴影（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 粒子系统，支持多种发射模式、鼠标交互和预设效果，参数实时调整即时生效 色温 (Kelvin) 转换器色温转换器，将开尔文色温值与 RGB 颜色互相转换并了解光线白平衡，辅助摄影与设计配色。 新拟态生成器调节距离、强度、模糊与底色等参数，实时生成新拟态（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 背景装饰。 卡片生成器拖拽式调整卡片的圆角、阴影、内边距与配色并生成 CSS，适合落地页与列表卡片，纯前端实时预览可复制样式代码。 徽章生成器在线设计圆角或盾形徽章，调整文字、配色与图标并实时预览，导出图片用于活动标识、成就奖章与社交头像，纯前端生成。 条形码生成器（EAN-13等）输入数字生成 EAN-13 等常见条形码图片，自动计算校验位，用于商品标签、仓储与演示，纯前端生成可下载条码。 棋盘生成器生成可调格数与配色的棋盘图案，用于棋类演示、背景与游戏素材，可导出图片，纯前端绘制不上传任何数据。 玻璃拟态生成器可视化调节模糊、透明度与背景，实时生成玻璃拟态（毛玻璃）效果的 CSS 代码，便于现代 UI 卡片质感设计。 盒子阴影生成器（可视化调整）拖动控件调整盒阴影的偏移、模糊、扩散与颜色并生成 CSS，支持内阴影与多层阴影，方便前端快速获得阴影样式。 边框样式生成器（圆角、线条）可视化设置边框宽度、样式、圆角与配色并生成 CSS，支持单边独立设置，便于快速产出分隔线、卡片边框等样式代码。 视口单位转换（vh / vw ↔ px）vw 为视口宽度的 1%，vh 为视口高度的 1%。选择模式并填入基准视口尺寸即可在视口单位与 px 之间换算。 字幕（生成/时间轴）调整辅助字幕时间轴调整与格式转换（偏移/拆分/双语标注），提升音画同步与多语对照。 调色板提取（从图片上传，Canvas分析）上传图片后用 Canvas 分析像素，提取主色与完整调色板及占比，便于从参考图快速获取配色方案，纯前端本地处理。 AI（辅助/生成/优化）探索AI（辅助/生成/优化）探索。免费在线工具，纯前端处理，数据不上传，保护隐私安全。 PPT（模板/动画）生成按主题与页数生成 PPT 大纲、版式与要点文案，辅助汇报/课件快速成稿。 小说（大纲/人设/章节）生成按设定生成小说大纲、人设与章节草稿，辅助网文或短篇起步，打破空白页。 焦距等效换算器焦距等效换算器，在不同画幅间换算等效焦距并对比视角、推荐镜头，辅助摄影器材选型。 SVG 压缩粘贴SVG代码即可自动移除冗余注释、空白与默认属性，压缩体积并生成精简后的代码，便于前端加载优化，支持可视化对比压缩前后效果。 颜色对比度检查器输入前景色与背景色，按 WCAG 2.1 计算对比度比值，判定文字是否达到 AA / AAA 无障碍标准。 样式化二维码样式化二维码生成器，基于内置 qrcode.js 生成标准二维码并支持样式定制，纯前端生成、数据不上传。 调色板提取器上传图片后用中位切分算法智能提取主色调，生成可编辑的调色板并导出为CSS或JSON，方便设计师从参考图中快速获取配色方案用于项目。 竞品（分析/拆解/洞察）方法竞品（分析/拆解/洞察）方法。免费在线工具，纯前端处理，数据不上传，保护隐私安全。 调色板色觉可辨识度检查器模拟采用 Machado 等人（2009）的线性 RGB 变换矩阵，作用于线性光（linear-light）空间，色弱按严重度在「单位矩阵 ↔ 完全型矩阵」之间线性插值；全色盲与灰度按 Rec.70… 在线节拍器在线节拍器，使用 Web Audio API 提供精准节拍并支持多种拍号，适合练习乐器与节奏训练。 对比度检查器⚖️ 对比度检查器 Identicon 头像输入字符串或用户名，按哈希算法生成对称的几何 Identicon 头像，常用于无头像用户的默认标识，纯前端生成。 图片裁剪在浏览器内框选区域裁剪图片，支持自由与固定比例并实时预览，纯前端处理图片不上传，适合头像、证件照与配图裁减。 对比度检查（WCAG标准）输入前景色和背景色，计算 WCAG 2.1 对比度比率，判定 AA / AAA 合规性 网格渐变生成多色网格（mesh）渐变背景，可拖拽色标调整过渡，用于海报、封面与网页英雄区，纯前端预览并导出渐变图片或 CSS。 图片转 ASCII 字符画图片转 ASCII 字符画：可调宽度、对比度、亮度与字符集，本地处理不上传。 图片旋转将图片按任意角度或 90° 步进旋转并校正构图，纯前端处理不上传，支持导出旋转后图片，适合修正拍摄角度与排版需要。 图片翻转在线将图片水平或垂直镜像翻转，一键生成反相构图，纯前端处理图片不上传，适合修正反向照片与制作对称视觉效果。 Farnsworth D-15 色相排列测试① 色帽生成：取 D-15 的 15 个色度点 (x, y)，在固定亮度 Y 下换算 XYZ = (Y/y·x, Y, Y/y·(1−x−y))，再经 sRGB 逆矩阵得线性 RGB；越界的点沿「向… 文字 Favicon输入文字或字母，生成简洁的文字型网站图标（favicon），支持配色与字体调节，便于小站点快速获得品牌标识。 诗歌（韵律/平仄）检查对文本或文档做结构、格式与常见问题的批量检查（标题层级、链接、重复段落），输出问题清单与定位，辅助发布前自查；结果为机器初检，最终以人工复核为准。 环保（材料/标准/检测）控制室内装修材料环保等级判定工具，输入甲醛释放量、VOC含量、苯系物含量等参数，按国家标准判定材料环保等级(E0/E1/E2)。 无障碍检测指南一、颜色对比度检测（WCAG 1.4.3） 可用性测试与评估一、任务绩效指标（权重40%） 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 变量，方便团队保持一致的留白节奏。 加载点动画加载点动画（Loading Dots）在线生成器，可视化预览三点跳动等待动效，调节速度颜色后一键复制 CSS 代码，直接用于网页加载占位，纯前端。 色盲模拟器 Pro红色盲/绿色盲/蓝色盲采用 Machado、Oliveira 与 Fernandes（2009）提出的线性 RGB 变换矩阵，该矩阵把「sRGB → LMS 锥体响应 → 缺陷锥体补偿 → 逆变换」… 频谱可视化在线频谱可视化工具，基于 Web Audio API 将音频实时绘制为频域频谱图，支持 FFT 分析与峰值查看，适合音频调试与教学演示，纯前端处理。 首字母头像首字母头像在线生成器，输入姓名或缩写生成带背景色的字母头像，可调字体、圆角与配色方案，一键下载 PNG/SVG，适合团队与用户占位，纯前端。 字体预览器快速预览多种系统字体渲染效果，输入文字后实时对比不同字体的显示差异，点击卡片即可复制 font-family CSS 代码。 波形可视化在线波形可视化工具，将音频或信号数据绘制为时域波形图，支持上传文件与实时渲染、缩放查看，便于信号分析与教学演示，纯前端处理。 Aztec 码 (简化版)输入文本或链接，生成简化版 Aztec 二维码，用于票据与物流信息的移动端识读，纯前端本地生成不上传。 圆点图案生成均匀或错位的圆点纹理背景，可调点径、间距与颜色，用于包装、网页底纹与印刷稿，纯前端导出透明或纯色图片。 数据矩阵码 (简化版)输入文本或编号，生成简化版 Data Matrix 二维码，用于工业零件与物料的小面积标识，纯前端本地生成。 条纹图案生成水平、垂直或斜向条纹背景纹理，可调条纹宽度与双色配色，用于包装、网页与印刷底纹，纯前端导出图片不上传。 等距网格生成等距（2.5D）风格网格背景，可调格子大小与配色，用于游戏地图、插画底图与示意图，纯前端导出图片不上传。 网格图案生成可调密度的方格或网格线背景图案，自定义线宽颜色，用于工程图底图、网页纹理与印刷稿，纯前端导出图片不上传。 蓝图网格生成可调密度的蓝图风格网格背景，自定义方格尺寸与颜色，用于工程草图、手绘底图与 PPT 背景，纯前端导出图片。 Tailwind CSS 配色板Tailwind CSS 完整色板，22 色 × 11 阶。点击色块查看详情并复制各种格式。 字体搭配推荐字体搭配推荐器，选择字体组合生成配套 CSS 代码，辅助网页与海报的字体搭配设计。 手写签名板支持鼠标和触摸，平滑曲线（quadraticCurveTo），可撤销，导出 PNG 透明背景。 ISO噪点参考ISO 噪点参考，按不同相机在各 ISO 下的噪点表现提供参考、帮助选择合适感光度，辅助拍摄参数设置。 音阶调号参考查阅大调、小调等各调式的音阶音名与升降记号分布，快速对照调号与和弦构成，适用于音乐创作与乐理学习。 BPM 节拍测速器BPM 节拍测速器，跟随音乐点击或按空格测量歌曲速度(每分钟拍数)，辅助乐手与舞蹈节奏把控。
📖关于「设计创意工具」About Design & Creativity Tools▼

📝栏目简介

设计创意工具集合收录了 111 个免费在线工具，覆盖设计创意场景下的常见计算、换算与查询需求。无论你是相关领域的从业者、学生还是普通用户，都能在这里找到即用即走的实用小工具。所有工具纯前端运行，数据不上传服务器，保护隐私安全。This collection gathers 111 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 Picker & Converter
  • 图片取色器Image Color Picker
  • 照片打印尺寸计算器Photo Print Size Calculator
  • 安全快门计算器Safe Shutter Speed Calculator
  • CSS 栅格布局生成器CSS Grid Layout Generator
  • 高级阴影生成器Advanced Shadow Generator
  • 粒子特效生成器Interactive Canvas Particle System
  • 头像生成器Avatar Generator
  • 背景纹理生成器（重复图案）CSS Background Pattern Generator
  • 边框样式生成器（圆角、线条）CSS Border Style Generator
  • 小说（大纲/人设/章节）生成Novel
  • 竞品（分析/拆解/洞察）方法Competitor
  • 对比度检查（WCAG标准）WCAG Contrast Check
  • 文字 FaviconText Favicon Generator
  • PNG 转 SVGPNG to SVG Converter
  • 加载点动画Loading Dots CSS Generator
  • 圆点图案Dot Pattern Generator
  • Tailwind CSS 配色板Tailwind CSS Color Palette

这些工具帮助你快速完成设计创意相关的常见任务，无需记忆复杂公式或手动换算，输入即可得结果。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.