🎨 設計創意工具🎨 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.