/** * 調整顏色亮度 * @param hex 原始顏色的 HEX 值(例如 "#01ab83") * @param percent 調整百分比,正值變亮,負值變暗 * @returns 調整後的 HEX 色碼 */ export function adjustBrightness(hex: string, percent: number): string { // 移除 # 符號 const cleanHex = hex.replace('#', ''); // 解析 RGB const num = parseInt(cleanHex, 16); const r = (num >> 16) & 0xFF; const g = (num >> 8) & 0xFF; const b = num & 0xFF; // 計算調整後的 RGB(確保在 0-255 範圍內) const newR = Math.min(255, Math.max(0, r + percent * 2.55)); const newG = Math.min(255, Math.max(0, g + percent * 2.55)); const newB = Math.min(255, Math.max(0, b + percent * 2.55)); // 轉回 HEX const result = ((Math.round(newR) << 16) | (Math.round(newG) << 8) | Math.round(newB)) .toString(16) .padStart(6, '0'); return `#${result}`; } /** * 生成非常淺的背景色(類似原本的 primary-lightest: #e6f7f3) * 這個函式會保留原色的色調,但大幅提高亮度和降低飽和度 * @param hex 原始顏色的 HEX 值 * @returns 淺色背景的 HEX 色碼 */ export function generateLightestColor(hex: string): string { const cleanHex = hex.replace('#', ''); const num = parseInt(cleanHex, 16); const r = (num >> 16) & 0xFF; const g = (num >> 8) & 0xFF; const b = num & 0xFF; // 混合白色來創造非常淺的色調(90% 白色 + 10% 原色) const mixRatio = 0.1; const newR = Math.round(255 * (1 - mixRatio) + r * mixRatio); const newG = Math.round(255 * (1 - mixRatio) + g * mixRatio); const newB = Math.round(255 * (1 - mixRatio) + b * mixRatio); const result = ((newR << 16) | (newG << 8) | newB) .toString(16) .padStart(6, '0'); return `#${result}`; } /** * 生成淺色(類似原本的 primary-light: #33bc9a) * @param hex 原始顏色的 HEX 值 * @returns 淺色的 HEX 色碼 */ export function generateLightColor(hex: string): string { const cleanHex = hex.replace('#', ''); const num = parseInt(cleanHex, 16); const r = (num >> 16) & 0xFF; const g = (num >> 8) & 0xFF; const b = num & 0xFF; // 混合白色(70% 原色 + 30% 白色) const mixRatio = 0.7; const newR = Math.round(r * mixRatio + 255 * (1 - mixRatio)); const newG = Math.round(g * mixRatio + 255 * (1 - mixRatio)); const newB = Math.round(b * mixRatio + 255 * (1 - mixRatio)); const result = ((newR << 16) | (newG << 8) | newB) .toString(16) .padStart(6, '0'); return `#${result}`; } /** * 生成深色(類似原本的 primary-dark: #018a6a) * @param hex 原始顏色的 HEX 值 * @returns 深色的 HEX 色碼 */ export function generateDarkColor(hex: string): string { const cleanHex = hex.replace('#', ''); const num = parseInt(cleanHex, 16); const r = (num >> 16) & 0xFF; const g = (num >> 8) & 0xFF; const b = num & 0xFF; // 降低亮度(80% 原色) const factor = 0.8; const newR = Math.round(r * factor); const newG = Math.round(g * factor); const newB = Math.round(b * factor); const result = ((newR << 16) | (newG << 8) | newB) .toString(16) .padStart(6, '0'); return `#${result}`; } /** * 生成按鈕 active 狀態的顏色(比 dark 更深,約 60% 原色) * @param hex 原始顏色的 HEX 值 * @returns 更深色的 HEX 色碼 */ export function generateActiveColor(hex: string): string { const cleanHex = hex.replace('#', ''); const num = parseInt(cleanHex, 16); const r = (num >> 16) & 0xFF; const g = (num >> 8) & 0xFF; const b = num & 0xFF; // 降低亮度(60% 原色) const factor = 0.6; const newR = Math.round(r * factor); const newG = Math.round(g * factor); const newB = Math.round(b * factor); const result = ((newR << 16) | (newG << 8) | newB) .toString(16) .padStart(6, '0'); return `#${result}`; }