色彩深淺產生器
產生任何顏色從亮到暗的漸變色階。 調整步數並匯出為 Tailwind CSS 調色盤。
選擇基礎顏色
亮色調（較淺的顏色）
將白色與基礎顏色混合而成的較淺變化色
暗色調（較深的顏色）
將黑色與基礎顏色混合而成的較深變化色
分享此工具
📖
使用方法
Step 1
選取顏色
透過選色器或 HEX 代碼指定顏色
→
Step 2
產生色調
自動產生從亮到暗的色調
→
Step 3
複製
複製所需色調的色彩代碼
✨
功能特色
步數控制
調整色調步數
多種格式
以 HEX、RGB、HSL 格式複製
調色盤匯出
以 Tailwind CSS 格式匯出調色盤
❓
FAQ
預設為 10 步，可自由調整。
🔗相關工具
🎨
設計工具色碼換算工具
在 HEX、RGB 和 HSL 色碼之間互換。 使用顏色選擇器和即時預覽直觀選色。
🎨
設計工具色彩選擇器
使用色輪和滑桿直覺地選取顏色。 取得並複製 HEX、RGB 和 HSL 格式的色彩代碼。
🎨
設計工具圖片色彩擷取器
自動偵測圖片中的主要色彩並生成色彩調色盤。 也可以點擊圖片上的任意位置來取得個別色彩。
🎯
設計工具圖片平均色彩擷取器
計算整張圖片或選定區域的平均色彩。 適合用於選擇配色方案或縮圖背景顏色。
🌈
設計工具CSS 漸層產生器
使用拖動控制視覺化建立 CSS 漸層。 支援線性、放射狀和圓錐漸層類型及預設。
🔲
設計工具CSS 陰影產生器
使用滑桿視覺化建立 CSS box-shadow。 支援多重陰影和內陰影。