tools.color-shade-tint.shades
#3b82f6
tools.color-shade-tint.tints
:root {
--shade-10: #050c16;
--shade-9: #0b182d;
--shade-8: #102343;
--shade-7: #152f59;
--shade-6: #1b3b70;
--shade-5: #204786;
--shade-4: #26539d;
--shade-3: #2b5fb3;
--shade-2: #306ac9;
--shade-1: #3676e0;
--base: #3b82f6;
--tint-1: #4d8df7;
--tint-2: #5f99f8;
--tint-3: #70a4f8;
--tint-4: #82aff9;
--tint-5: #94bbfa;
--tint-6: #a6c6fb;
--tint-7: #b8d2fc;
--tint-8: #caddfd;
--tint-9: #dbe8fd;
--tint-10: #edf4fe;
}工具說明
線上色彩明暗階生成器 — 選取基色自動生成 10 級亮色（Tint）和 10 級暗色（Shade）。點擊複製色值，或一鍵匯出 CSS 自訂屬性，適合設計系統配色方案。
colorshadetint色彩明暗色阶palette
常見問題
- 色彩明暗階生成 是什麼？
- 線上色彩明暗階生成器 — 選取基色自動生成 10 級亮色（Tint）和 10 級暗色（Shade）。點擊複製色值，或一鍵匯出 CSS 自訂屬性，適合設計系統配色方案。 此工具屬於 ToolNext 線上工具箱的設計工具分類。
- 如何使用 色彩明暗階生成？
- 使用視覺化控制項調整參數，即時預覽效果。滿意後點擊複製按鈕取得產生的程式碼或下載結果。
- 色彩明暗階生成 產生的結果可以直接用在專案中嗎？
- 可以。色彩明暗階生成 產生的程式碼和樣式完全符合 Web 標準，可以直接複製貼上到你的 CSS、HTML 或設計專案中使用，無需額外修改。
- 色彩明暗階生成 支援即時預覽效果嗎？
- 支援。色彩明暗階生成 提供即時視覺化預覽，當你調整參數時效果會即時更新。這種所見即所得的體驗能幫你快速找到最佳的設計方案。
- 使用 {name} 需要註冊帳號嗎？
- 不需要。ToolNext 上所有工具無需登入或註冊即可直接使用，開啟就能用。
- 色彩明暗階生成 支援手機使用嗎？
- 支援。色彩明暗階生成 採用響應式設計，在手機、平板和電腦上均可正常使用。