Color Shade Generator - ToolBox

← ToolBox / 顏色明暗生成器

📖 檢視「顏色明暗生成器使用指南」

🎨 顏色明暗生成器

在基色上按比例混入白色得到 tint（更亮），混入黑色得到 shade（更暗）。指定檔數即可生成一組協調的明暗色卡，方便做按鈕、背景層次。

📐 工作原理與說明

本設計工具基於通用設計規範與演算法，純前端處理，資料不上傳。工具名稱：顏色明暗生成器。

基色 HEX（如 #6366F1）

每側檔數

⚠️ 使用說明與注意事項

tint 是基色混入白色（t→1 越亮），shade 是基色混入黑色（越暗），線性混合即可獲得平滑過渡。
HEX 支援 3 位簡寫（如 #F60）與 6 位標準寫法，工具會自動展開。
無障礙配色建議保證文字與背景的對比度（WCAG AA 至少 4.5:1），不要只看美觀。

📋 說明

左→右為由淺（tint）到基色再到深（shade）的漸變；每側檔數即混入白/黑的比例步數。

設計系統（如 Tailwind 的 50–900）常用這種按明度分檔的色板組織方式。

📚 深度解析：Color Shade Generator

💡 常見使用場景

快速核對Color Shade Generator：優先統一輸入單位、口徑和引數範圍，再對典型樣例做一遍手工驗算。
教學與複核：建議固定其餘引數，只變動一個輸入變數，確認輸出變化趨勢，避免“算式正確但口徑錯位”。
常見場景：顏色明暗生成器

快速複核「Color Shade Generator」

先輸入一組典型引數跑基準值，再做 ±10%、±20% 調參演算，檢查輸出是否沿業務常識方向變化。

❓ 常見問題（FAQ）

Color Shade Generator 結果可直接用於決策嗎？: Color Shade Generator 適合用於預估與複核，正式決策請結合完整資料口徑說明（口徑定義、時間區間、邊界條件）。
結果偏離預期很大怎麼辦？: 先核對輸入單位與是否存在“% 與小數”混用，再確認分母與分子定義是否同口徑，最後替換一組可復現例項複測。