網頁配色最避諱「花而不亂」——阿捷秘訣：堅持單一色系漸變，色彩豐富且高級不花哨。下文提供 200+ 十六進制色值庫，按色相分組，直接複製可用，適配設計系統 Token 建立、UI 狀態色擴展、品牌色系延展。

核心配色法則

1. 主色定調： 確定品牌主色（如 #0066CC 科技藍）。
2. 同色系延展： 固定色相，調整飽和度（S）與明度（B）生成：
   — 深色態：降低 B，用於 Header、Primary Button、強調文字。
   — 中性態：中等 S/B，用於 Body 文字、圖標、分割線。
   — 淺色態：提高 B、降低 S，用於背景、懸停態、禁用態、Tag 背景。
   — 白/近白：#FAFAFA、#F5F5F5、#F0F0F0，用於卡片背景、分隔區塊。
3. 輔助色克制： 全站輔助色不超 1-2 個（如成功綠 #28A745、警告橙 #FFC107、危險紅 #DC3545），嚴禁隨意引入新色相。
4. 無障礙對比度： 正文對比 ≥4.5:1，大字 ≥3:1，工具驗證（WebAIM Contrast Checker）。

200+ 十六進制色值庫（按色相序）

註：此為原文色值庫重排版，實際使用請依品牌主色篩選同色系 5-9 階梯。

紅/橙/暖色系

#FF0000 #FF1493 #FF3030 #FF34B3 #FF3E96 #FF4040 #FF4500 #FF6347 #FF69B4 #FF6A6A #FF6EB4 #FF7256 #FF7F00 #FF7F24 #FF7F50 #FF8247 #FF82AB #FF83FA #FF8C00 #FF8C69 #FFA07A #FFA500 #FFA54F #FFAEB9 #FFB5C5 #FFB6C1 #FFB90F #FFBBFF #FFC0CB #FFC125 #FFC1C1 #FFD39B #FFD700 #FFDAB9 #FFDEAD #FFE1FF #FFE4B5 #FFE4C4 #FFE4E1 #FFE7BA #FFEBCD #FFEC8B #FFEFD5 #FFEFDB #FFF0F5 #FFF5EE #FFF68F #FFF8DC #FFFACD #FFFAF0 #FFFAFA #FFFF00 #FFFFE0 #FFFFF0 #FFFFFF

黃/綠/青色系

#EEC900 #EED8AE #EED5B7 #EED5D2 #EED2EE #EECFA1 #EECBAD #EEC591 #EEB422 #EEB4B4 #EEAD0E #EEAEEE #EEA9B8 #EEA2AD #EE9A00 #EE9A49 #EE9572 #EE8262 #EE82EE #EE7942 #EE799F #EE7AE9 #EE7600 #EE7621 #EE6AA7 #EE6A50 #EE6363 #EE5C42 #EE4000 #EE3B3B #EE3A8C #EE30A7 #EE2C2C #EE1289 #EE00EE #EE0000 #EDEDED #EBEBEB #EAEAEA #E9967A #E8E8E8 #E6E6FA #E5E5E5 #E3E3E3 #E0FFFF #E0EEEE #E0EEE0 #E0E0E0 #E066FF #DEDEDE #DEB887 #DDA0DD #DCDCDC #DC143C #DBDBDB #DB7093 #DAA520 #DA70D6 #D9D9D9 #D8BFD8 #D6D6D6 #D4D4D4 #D3D3D3 #D2B48C #D2691E #D1EEEE #D1D1D1 #D15FEE #D02090 #CFCFCF #CDCFC1 #CDCDB4 #CDCD00 #CDC9C9 #CDC9A5 #CDC8B1 #CDC673 #CDC5BF #CDC1C5

藍/紫/冷色系

#C1CDCD #B4CDCD #B0C4DE #AEEEEE #ADD8E6 #AB82FF #A52A2A #A4D3EE #A2B5CD #A020F0 #A0522D #9FB6CD #9ACD32 #98F5FF #97FFFF #96CDCD #9400D3 #9370DB #90EE90 #8FBC8F #8EE5EE #8B8B8B #8B7D6B #8B7355 #8B6914 #8B5F65 #8B5742 #8B4789 #8B4513 #8B3A62 #8B3A3A #8B2500 #8B2323 #8B1A1A #8B008B #8B0000 #8A2BE2 #87CEFA #87CEEB #8470FF #838B8B #836FFF #808080 #808000 #800080 #800000 #7FFF00 #7D9EC0 #7D26CD #7B68EE #7A8B8B #7A67EE #7A378B #79CDCD #78866B #778899 #76EEC6 #708090 #6E8B3D #6E7B8B #6CA6CD #6B8E23 #698B69 #696969 #6959CD #68838B #68228B #66CDAA #668B8B #663366 #6495ED #63B8FF #636363 #616161 #5F9EA0 #5D8AA8 #5CACEE #5B5B5B #595959 #556B2F #555555 #545454 #525252 #505050 #4F4F4F #4D4D4D #4B4B4B #4A4A4A #484848 #464646 #444444 #424242 #404040 #3E3E3E #3C3C3C #3A3A3A #383838 #363636 #343434 #323232 #303030 #2E2E2E #2C2C2C #2A2A2A #282828 #262626 #242424 #222222 #202020 #1E1E1E #1C1C1C #1A1A1A #181818 #161616 #141414 #121212 #101010 #0E0E0E #0C0C0C #0A0A0A #080808 #060606 #040404 #020202 #000000

工程化落地建議

• 在設計系統中建立 color-primary-50 ~ 900、color-success/warning/danger、color-neutral-50 ~ 900 語義化 Token，而非直接硬編碼十六進制值。
• Figma/Sketch 本地變量 / Style Dictionary / Tokens Studio 同步至代碼倉庫，設計改色一鍵全站生效。
• 暗色模式下，同色系 Token 自動映射對應明度階梯，無需重寫業務代碼。

色值庫來源：網友阿捷整理 | 現代化落地建議：筆者補充