設計工具

色彩格式轉換

轉換 HEX、RGB、HSL 與透明度，即時檢視色樣並複製可用於 CSS 的色值。

色彩對比檢查

依 WCAG 2.2 檢查文字與背景對比，即時預覽一般及大型文字的 AA、AAA 結果。

CSS 漸層產生器

視覺化製作線性與放射狀漸層，編輯色標、位置和角度，直接複製 CSS。

CSS 陰影產生器

調整位移、模糊、擴展、顏色和透明度，預覽內外陰影並複製 box-shadow。

長寬比計算

約分圖片或影片的長寬比，依已知寬高計算另一邊，並直觀檢視畫面形狀。

CSS Grid 版面產生器

以即時預覽設定固定或自適應欄數、間距與對齊，複製對應的 CSS 與 HTML。

CSS Flexbox 版面產生器

即時調整 Flex 排列方向、換行、間距與對齊，產生可直接複製的 CSS 與 HTML。

配色產生器

從基準色建立互補、類似、三色或單色配色，匯出 HEX、CSS 變數或 JSON。

CSS 圓角產生器

連動或獨立調整四個角，預覽一般與橢圓圓角，並匯出 border-radius。

CSS 多邊形裁切產生器

拖曳或精確編輯多邊形節點，即時預覽 clip-path 並匯出 CSS。

CSS 貝茲緩動曲線編輯器

調整兩個控制點、播放過渡效果，並產生 cubic-bezier 緩動函式。

CSS clamp 響應式字級產生器

依字級與視窗寬度上下限產生響應式 clamp()，支援 px、rem 及即時字級預覽。

CSS 圖片濾鏡產生器

在範例或本機圖片上預覽模糊、亮度、色彩與透明度，並匯出 filter CSS。

CSS 2D 與 3D 變形產生器

調整平移、旋轉、縮放、傾斜與變形原點，按需加入透視及三維參數並匯出 CSS。

紙張尺寸與列印像素換算

查詢 A、ISO B、C 與北美紙張規格，依方向、解析度及出血換算毫米、英寸、點與像素。

SVG 最佳化與轉 PNG

清理並最佳化 SVG，比較檔案大小與圖形外觀；可下載 SVG，或依指定尺寸匯出透明、純色背景的 PNG。