色彩專區
色彩淡化產生器
將色彩與白色混合，讓色彩變亮。
色彩淡化產生器: TOEA套用這個固定公式：Tint = color × (1 − amount) + white × amount。色彩運算會在瀏覽器中本機執行。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。
- 分類
- 日常工具
- 使用次數
- 在瀏覽器中
- 費用
- 免費・免註冊
- 可用狀態
- 可立即使用
結果表單 / 02
淡化後HEX
#5C8AF0
- 淡化後RGB
- rgb(92, 138, 240)
計算公式
Tint = color × (1 − amount) + white × amount假設條件 / 使用前請閱讀
- 結果是具決定性的sRGB數學轉換；顯示效果取決於螢幕和色彩設定檔。
- HEX輸入接受#RGB或#RRGGBB表示法。數值會留在瀏覽器中，不會上傳。
建立淺色階梯
設計系統通常會透過與白色混合來產生較淺的階梯；Bootstrap的tint-color()就是採用這種方式。加入80–95%的白色，可為警示、選取列和徽章建立背景；加入20–40%，則能為懸停填色和插圖產生較柔和的品牌色版本。請從原始基準色產生每個階梯，不要在已經調淡的色彩上繼續調淡，這樣百分比才有意義；最淺階梯上的文字或圖示則請使用基準色本身。
調淡色彩為何會顯得粉白
加入白色不只會提高明度，也會降低飽和度，因此淺色可能顯得乳白，藍色尤其可能偏向薰衣草色。如果淺色階梯看起來不對，可以嘗試使用飽和度稍高的基準色，或在色彩轉換器中直接設定明度並比較。淺色越亮，深色文字越容易通過對比度檢查；請在對比度檢查工具中檢查實際使用的配色。
使用方式
- 輸入有效的#RGB或#RRGGBB值，以及所需的百分比。
- 執行固定的瀏覽器本機色彩運算。
- 查看色票，並複製結果或調色盤值。
隱私與限制
色彩值會留在這部裝置上。對比度結果是數學檢查工具，不代表全面符合WCAG；仍需檢視使用情境、字型呈現、非文字對比度及使用者介面狀態。
相關工具
常見問題
淡化產生器如何運作？
它會使用Tint = color × (1 − amount) + white × amount。
接受哪些HEX格式？
請使用三位數的#RGB或六位數的#RRGGBB sRGB表示法。不接受Alpha通道和具名色彩。
對比度結果是否保證符合無障礙規範？
不保證。這是針對回報色彩和文字門檻的數學對比度檢查工具，不代表全面符合規範。
免費工具・使用在瀏覽器中次・免註冊