2022 年面向 Web 設計師的 50 個基於 Web 的微型工具

色調工具
用於處理顏色的簡單開源工具箱。 它包括，顏色混合、混合、轉換、修改、詳細信息等等。

薄荷
該工具使用機器學習來創建獨特的配色方案。

顏色名稱生成器
輸入十六進制代碼，此應用程序將為它命名，並生成 CSS 變量。

阿爾弗雷多
使用此在線 alpha 生成器創建完美的色階。

網狀·y
這個基於瀏覽器的工具將幫助您創建可以導出為 PNG 圖像的網格漸變。

漸變
使用此在線工具創建可以多種格式導出的複雜漸變。

CSS 陰影漸變
使用此基於網絡的工具複製並粘貼彩色陰影漸變或設計您自己的陰影。

鼠兔
這個基於 Web 的工具將幫助您製作漂亮的屏幕截圖，您可以在社交媒體或博客文章中分享這些屏幕截圖。

微博
一個免費工具，用於生成可共享的推文圖像。

kod.so
此瀏覽器應用程序將幫助您創建漂亮的代碼片段屏幕截圖。

美圖
另一個用於創建自定義屏幕截圖的免費瀏覽器應用程序。

故障圖像生成器
一個有用的工具，可讓您創建和保存獨特的故障圖像。

調色板
使用這款 AI 驅動的應用程序為您的複古照片著色。

魔術橡皮擦
使用此免費工具從圖像中刪除不需要的項目。

裝載機
為您的下一個項目準備各種加載器和旋轉器。

動畫師
在您的項目中使用這組現成的 CSS 動畫。

盒子陰影
用於 Tailwind CSS 的精美復制和粘貼框陰影的精選集合。

香草微風
將 Tailwind CSS 元素轉換為語義 CSS 的在線工具。

CSS 迴旋角
這個在線工具將使用 CSS clip-path生成圓角。

設計令牌生成器
使用此工具可以快速啟動您的 CSS 項目。

金屬CSS
這個開源 JavaScript 庫為任何設計元素增添了金屬質感。

界面填充
用於您的設計項目的小型複制和粘貼佔位符庫。

按鈕生成器
從一系列有吸引力的點擊複製按鈕中為您的項目選擇。

用戶界面按鈕
在您的項目中使用的複制和粘貼 CSS 按鈕樣式的集合。

100 個按鈕
免費收集 100 個現代 CSS 按鈕設計，供您在項目中使用。

CSS檢查器
使用此工具來識別冗餘的 CSS 類。

在線 CSS 代碼質量分析器
該工具根據一系列質量保證對您的 CSS 進行評分。

CSS 壓縮器
將您的 CSS 粘貼到此應用程序中，它會縮小您的代碼。

後備字體生成器
該工具將幫助您避免佈局中令人討厭的 Cumulative Layout Shift (CLS)。

排版比例計算器
使用此工具創建和諧的字體比例。

兔子字體
查看這個開源、隱私至上的網絡字體平台。

無障礙網頁清單
使用此清單創建可訪問的網站和 Web 應用程序。

A11Y 項目清單
此清單提示您檢查的問題涵蓋範圍廣泛的殘疾狀況。

對比網格
此工具將幫助您測試各種顏色組合是否符合 WCAG 2.0。

可訪問性非清單
在評估您網站的可訪問性時，使用此列表作為參考。

了解輔助功能
一門常青的無障礙課程和參考資料，可提升您的 Web 開發水平。

隨機性
使用此工俱生成可隨機訪問的調色板。

偶像
搜索 36 個免費圖標庫，找到最適合您的項目的圖標。

基本圖標
下載這個用於產品設計和開發的基本圖標集。

複製符號
尋找符號？ 該搜索引擎將提供圖標、鍵盤快捷鍵和用於復制和粘貼的 CSS 內容代碼。

字形應用程序
一個方便的複制和粘貼符號庫，可用於您的項目。

圖標
通過此搜索工具為您的項目找到完美的圖標集。

馬克文檔
用於創建自定義文檔網站的基於 markdown 的編輯器。

降價網
看看這個開源的、協作的 Markdown 編輯器，它可以直接在你的瀏覽器上運行。

作家
markdown 的粉絲會想要嘗試一下這個最小的編輯器。

代碼片段搜索
該搜索引擎將為您的查詢返回相關的代碼片段。

抄書
這個方便的資源包含 Web 應用程序中常用的文本。

道德設計資源
促進設計倫理的文章、組織、工具等的集合。

Heazy SVG 創作者
借助此基於瀏覽器的工具製作自定義 SVG。

進步
通過這個猜語言遊戲測試您的編程知識。

正則表達式的類型
通過這款益智遊戲測試您的 RegEx 技能。

動感
基於瀏覽器的自由運動圖形編輯器。

元搜索引擎優化
一個免費的基於網絡的工具，用於為您的網站或內容快速生成元標記。

JavaScript遊樂場
使用此在線工具學習和提高您的技能。