設計工具
提供前端與視覺設計工作的快速工具,包含可直接複製的 CSS,以及依據 WCAG 對比公式進行的無障礙檢查。
7 個工具
此分類的工具
- 色彩轉換器在 HEX、RGB、HSL、HWB、OKLCH 和簡易 CMYK 之間轉換顏色。貼上 CSS 顏色或使用選色器,再複製所需格式。所有操作都在瀏覽器中完成。
- 對比度檢查器檢查文字與背景顏色的 WCAG 2.2 對比度,查看文字和 UI 元件是否符合 AA、AAA 等級,並取得最接近的合格顏色。
- CSS 漸層產生器建立線性、放射狀和圓錐 CSS 漸層,設定 2 到 6 個色標的顏色、角度和位置,即時預覽並複製背景 CSS。
- Box Shadow 產生器設計多層 CSS box-shadow:調整偏移、模糊、擴散、顏色、透明度和 inset。在任意背景上預覽並複製 box-shadow CSS。
- 色票產生器從單一顏色產生互補色、類似色、三角色、四角色、分裂互補色和明暗色票。鎖定顏色後,複製 HEX、CSS 或 JSON。
- PX 轉 REM 轉換器可使用任意根元素字體大小(預設 16px),將 px 轉換為 rem 或 em,並可反向轉換。內含常用尺寸對照表,也能批次轉換整段 CSS 中的 px 數值。
- 長寬比計算機計算任意長寬比缺少的寬度或高度,將 1920×1080 等尺寸簡化為 16:9、預覽形狀,並複製 CSS aspect-ratio 規則。