HEX 加白加黑

HEX 加白加黑

這是加白 / 加黑產生器。加白往白色混，加黑往黑色混，和 CSS color-mix 在 sRGB 裡對白 / 黑一致。從一顆品牌 HEX 拉出懸停、按下、邊框用的色階。另一條軸只動 HSL 的明度、飽和度或色相。HEX 轉 Tailwind 是找預設類名；本頁用你自己的 HEX 拉色階。

如何使用

1. 貼上 HEX、rgb() 或 hsl()，點色塊、隨機、示例（#3B82F6、#171B45、#0074D9、#0F766E），或在支援的瀏覽器裡從螢幕取色。
2. 軸向預設是混合（白 / 黑）。明度、飽和度、色相會固定 HSL 的另外兩路。步長 5%、10%、20%、25%；自訂是 2–20 等分。
3. 完整色階左邊是加黑、中間是原色、右邊是加白。HEX 寫在色塊下面。點色塊複製該 HEX，並更新 HEX、rgb()、hsl() 晶片。
4. 變數名預設 brand，會寫出 --brand-tint-10 這類 CSS 變數，以及帶 tint / shade 的 Tailwind 片段。複製結果複製 CSS。顯示示例會重新載入 #3B82F6、10% 混合。
5. 批次可一次轉多顆。填入示例是 #3B82F6、#171B45、#0074D9。每行給出原色、中間加白、中間加黑。

注意事項

混合是在 sRGB 裡線性走向 #FFFFFF 或 #000000。#3B82F6 加白 50% 等於把這顆藍以 50% 疊在白上。明度 / 飽和度 / 色相走 HSL，不是 OKLCH，有的色相步距看起來會不均。非法 HEX 會報錯。全部清除會清空色階。相關：HEX 轉 Tailwind、透明度疊底、HEX 轉 RGBA。

用在哪裡

• 從一顆品牌色做懸停、按下、邊框。
• 10% 步長對應常見的 100–900 設計變數。
• 保持明度、降低飽和度做弱填充。
• 轉色相找同重量的陪襯色。

常見問題