素材阁
前端与 AI 在线工具箱
首页
首页
工具
全部工具
AI
AI 导航
Prompt
Prompt 库
素材
素材库
搜索
Ctrl K
首页
/
素材导航
/
配色方案库
配色方案库
精选 26 套配色方案，每套都由深到浅排列，含完整色值。
点击任意色块或色值即可复制
，也可一键复制整组色值或生成 CSS 变量。
全部
商务
科技
自然
温暖
清新
暗色
设计
沉稳商务蓝
商务
#1F43A8
#2B57D4
#3B6EF5
#93B4FF
#EEF4FF
复制色值
复制 CSS 变量
高级黑金
商务
#1C1917
#44403C
#A16207
#EAB308
#FAFAF9
复制色值
复制 CSS 变量
科技靛蓝
科技
#312E81
#4338CA
#6366F1
#A5B4FC
#E0E7FF
复制色值
复制 CSS 变量
葡萄紫
科技
#4C1D95
#7C3AED
#A78BFA
#DDD6FE
#F5F3FF
复制色值
复制 CSS 变量
冰川蓝灰
科技
#1E3A5F
#3B6EA5
#7FA8CC
#C3D9EA
#EEF5FA
复制色值
复制 CSS 变量
自然森林
自然
#14532D
#16A34A
#4ADE80
#BBF7D0
#F0FDF4
复制色值
复制 CSS 变量
薄荷青绿
自然
#065F46
#10B981
#6EE7B7
#A7F3D0
#ECFDF5
复制色值
复制 CSS 变量
暖阳橙
温暖
#7C2D12
#EA580C
#FB923C
#FED7AA
#FFF7ED
复制色值
复制 CSS 变量
玫瑰粉
温暖
#831843
#DB2777
#F472B6
#FBCFE8
#FDF2F8
复制色值
复制 CSS 变量
奶油杏色
温暖
#78350F
#D97706
#FCD34D
#FDE68A
#FFFBEB
复制色值
复制 CSS 变量
清新薄荷
清新
#134E4A
#14B8A6
#5EEAD4
#CCFBF1
#F0FDFA
复制色值
复制 CSS 变量
天空蓝
清新
#0C4A6E
#0284C7
#38BDF8
#BAE6FD
#F0F9FF
复制色值
复制 CSS 变量
暗夜模式
暗色
#0B0F19
#1E293B
#334155
#64748B
#E2E8F0
复制色值
复制 CSS 变量
极简灰白
设计
#0F172A
#334155
#94A3B8
#E2E8F0
#F8FAFC
复制色值
复制 CSS 变量
莫兰迪灰
设计
#6B7280
#9CA3AF
#D1D5DB
#E5E7EB
#F3F4F6
复制色值
复制 CSS 变量
品牌正红
商务
#7F1D1D
#B91C1C
#EF4444
#FCA5A5
#FEF2F2
复制色值
复制 CSS 变量
深邃藏青
商务
#0F172A
#1E3A8A
#2563EB
#93C5FD
#EFF6FF
复制色值
复制 CSS 变量
赛博青紫
科技
#1A0B2E
#5B21B6
#A855F7
#22D3EE
#E0F2FE
复制色值
复制 CSS 变量
矩阵绿
科技
#052E16
#166534
#22C55E
#86EFAC
#F0FDF4
复制色值
复制 CSS 变量
大地棕土
自然
#3F2D20
#8B5E3C
#C79A6B
#E6CFB8
#FAF4EC
复制色值
复制 CSS 变量
橄榄绿
自然
#365314
#65A30D
#A3E635
#D9F99D
#F7FEE7
复制色值
复制 CSS 变量
珊瑚橘粉
温暖
#7F1D1D
#E11D48
#FB7185
#FECDD3
#FFF1F2
复制色值
复制 CSS 变量
薰衣草紫
清新
#3B0764
#7E22CE
#C084FC
#E9D5FF
#FAF5FF
复制色值
复制 CSS 变量
午夜蓝
暗色
#0A1128
#16213E
#1F3047
#5A7CA6
#E2E8F0
复制色值
复制 CSS 变量
单色蓝
设计
#0C1E3E
#1B3A6B
#2E5C99
#6E9BC5
#DCE9F5
复制色值
复制 CSS 变量
撞色糖果
设计
#1E1B4B
#DB2777
#10B981
#F59E0B
#FDF4FF
复制色值
复制 CSS 变量
没有找到匹配的配色，换个关键词试试。
怎么用这些配色？
深浅比例
：深色做主文字与标题，中间色做按钮与强调，浅色做背景与分割，避免所有颜色等量使用。
对比度
：正文与背景的对比度建议达到 WCAG AA（4.5:1），大字号可放宽到 3:1。
CSS 变量
：直接点「复制 CSS 变量」粘贴到
:root
，后续替换主题只需改一处。
Esc
↑
↓
选择
Enter
打开
Ctrl + K 唤起